web（八）CSS选择器

标签选择器

　　使用html标签筛选需要渲染的网页元素。

使用场景
- 修改标签的默认样式，例如ul li 有默认的内边距，开发时应去掉标签的默认样式。
- 设定全局字体样式。
- 根据分辨率设定html标签的默认字体。
```
div {/*直接用标签作为选择器*/
    background-color: yellow;
}
```

类选择器

　　为一组样式属性进行命名（类名），标签使用时需要声明，使用频率最多的选择器。

类选择器的特点

多个标签可以引用同一个样式类，提高程序的公用性。
通过语义化的类名定义增加了程序可读性。
标签可以通过class引入多个样式类名，用空格分开。

类名区分大小写。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css"><!--使用style标签包裹-->
 7             .aClass{
 8                 background-color: #2E8B57;
 9             }
10             .bClass{
11                 color: red;
12             }
13         </style>
14     </head>
15     <body>
16         <div class="aClass bClass">这是一个div容器</div>
17     </body>
18 </html>

ID选择器

　　　　根据标签的id属性筛选要被渲染的标签（很少使用）。

注意事项
- ID不能重复，因此每个元素都要编写一个id选择器，无法提炼公用样式。
- 文档内元素的ID是区分大小写的。
- id命名规则是由字母、数字和下划线组成。
- 但是数字不能开头。

程序示例

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css"><!--使用style标签包裹-->
            #v_div{
                color: green;
            }
        </style>
    </head>
    <body>
        <div id="v_div">这是一个div容器</div>
    </body>

选择器分组

　　对一组选择器赋予同样的样式属性。

使用场景：对于一组公用标签的相同属性进行赋值。

基本语法

selector1,selector2…..{/*若干个选择器，用逗号分隔*/
    此处为css属性以及取值
}

程序示例

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css"><!--使用style标签包裹-->
            #v_div,a,.v_p{
                border: solid 3px #800080;
            }
        </style>
    </head>
    <body>
        <div id="v_div">这是一个div容器</div>
        <p class="v_p">段落</p>
        <a href="#">超链接</a>
    </body>

派生选择器

　　　　又称为后代选择器，按照html标签的层级关系（全部后代子孙）筛选被渲染的标签。

基本语法

<!--父在前，子在后，并用空格隔开-->
selector1 selector2…..{
    此处为css属性以及取值
}

程序示例

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .parent p {
                color: red;
            }
        </style>
    </head>
    <body>
        <div class = "parent">
                <div>
            <p>派生选择器</p>
                 </div>
        </div>
    </body>

后代选择器

　　又称为子元素选择器，按照html标签的层级关系（直接后代），筛选要被渲染的标签。

基本语法

selector1>selector2{
    此处为css属性以及取值
}

程序示例

 1     <head>
 2         <meta charset="utf-8" />
 3         <title></title>
 4         <style type="text/css"><!--使用style标签包裹-->
 5             .parent>div>p {
 6                 color: red;
 7             }
 8         </style>
 9     </head>
10     <body>
11         <div class = "parent">
12                 <div>
13                 <p>派生选择器</p>
14                  </div>
15         </div>
16     </body>

属性选择器

　　　　根据元素的html属性或属性值筛选要被渲染的元素。

基本语法

selector[attr][attr=‘value’]{
    此处为css属性以及取值
}

程序示例

<style type="text/css">
    a[href] {
        color:yellow;
    }
    a[href][title] {
        color:red;
    }
    a[href='www.baidu.com'] {
        color:blue;
    }
</style>

伪类选择符

　　　　按照用户操作状态筛选需要渲染的元素，在css2中定义的伪类选择符一般用来操作超链接。

伪类选择符的状态

E:link:筛选未被访问的链接。
E:visited :筛选已经被被访问的链接。
E:hover:筛选当前鼠标悬停时的任何元素。

E:active:筛选被用户激活（鼠标点击）时的任何元素。

<style type="text/css"><!--使用style标签包裹-->
    .mydiv:link{
        color: blue;
    }
    .mydiv:visited{
        color: gray;
    }
    .mydiv:hover {
        color: purple;
    }
    .mydiv:active{
        color: red;
    }
</style>
<!--.mydiv为类选择器-->

伪对象选择符

　　　　在其他选择器筛选的结果中继续筛选需要渲染的标签

E::first-letter：设置符合E筛选条件的第一个字符的样式。
E::first-line：设置符合E筛选条件内的第一行的样式。
E::before：设置符合E筛选条件的前一个元素的样式。
E::after：设置符合E筛选条件的后一个元素的样式。

　　　　color: blue;

}

</style>

选择器的优先级别

当同一个元素被多个选择符筛选，并且继承父元素的样式时，优先级别如下：
- !important的优先级别最高。
- 继承的优先级别最低，私有css属性将覆盖继承的属性。
- 同一个元素被不同选择器筛选，又无!important修饰时优先级别计算公式
  - ID选择符个数*100+类选择符个数*10+标签选择符个数