五、css复合选择器

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如div.classname1

并集选择器

各个选择器通过逗号连接而成的。
div,p,.classname1,#id1{width:2px;}

后代选择器

当标签发生嵌套时，内层标签就成为外层标签的后代。
后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。
div p{}

<div>
    <p></p>
</div>

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。注意，符号左右两侧各保留一个空格。
div>p{} 这里选择的只有id=p1的p标签。这里的子 指的是 亲儿子 不包含孙子 重孙子之类。

<div>
    <p id="p1">
        <p></p>
    </p>
</div>

测试题

<div class="nav">    <!-- 主导航栏 -->
  <ul>
    <li><a href="#">公司首页</a></li>
    <li><a href="#">公司简介</a></li>
    <li><a href="#">公司产品</a></li>
    <li>
         <a href="#">联系我们</a>
         <ul>
                    <li><a href="#">公司邮箱</a></li>
                    <li><a href="#">公司电话</a></li>
         </ul>
    </li>
  </ul>
</div>
<div class="sitenav">    <!-- 侧导航栏 -->
  <div class="site-l">左侧侧导航栏</div>
  <div class="site-r"><a href="#">登录</a></div>
</div>

在不修改以上代码的前提下，完成以下任务：

1.链接 登录 的颜色为红色,同时主导航栏里面的所有的链接改为橙色
2.主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑
3.主导航栏里面的一级菜单链接文字颜色为绿色

参考：

    <style>
       .site-r a {
          color: red;
       }
       .nav a {  /*后代选择器*/
          color: orange;
       }

       .nav, .sitenav {   /*并集选择器*/
            font: 14px "微软雅黑";
       }
       .nav> ul > li > a {  /*子代选择器*/
        color: green;   /*123123123  */
       }
    </style>

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。
语法
:hover{}

链接伪类选择器

a:link {color: #FF0000}     /* 未访问的链接文本颜色 */
a:visited {color: #00FF00}  /* 已访问的链接文本颜色 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上时文本的颜色 */
a:active {color: #0000FF}   /* 选定的链接文本颜色 */