css中常用的选择器和选择器优先级

css常用的选择器:类选择器,id选择器,元素选择器,伪类选择器,伪元素选择器,属性选择器.

选择器的优先级由四个部分组成:0,0,0,0

一个选择器的具体优先级如下规则确定:

• ID选择器 加 0,1,0,0
• 类选择器,伪类选择器,属性选择器 加0,0,1,0
• 元素和伪元素选择器 加0,0,0,1
• 结合符和通配符对优先级没有贡献

例子

• h1{color:red;} /* 优先级为 0,0,0,1 */
• p em{color:purple;} /* 优先级为 0,0,0,2 */
• p.bright em.dark{color:maroon;} /* 优先级 0,0,2,2 */

• id2 {color:blue;} /* 优先级 0,1,0,0 */

一些常用的选择器

类 id 元素选择器

<li class="red">1</li>
<li id="blue">2</li>
<li class="red">3</li>
<li>4</li>
<style>
    .red{color:red;}
    #blue{color:blue;}
    li{color:green;}
    *{font-size:16px;}
</style>

伪类选择器

<a href="https://www.baidu.com">链接</a>
<style>
    a:link{color:blue;}
    a:visited{color:grey;}
    a:hover{color:red;}
    a:active{color:yellow;}
</style>

且
E:focus
E:not()
E:empty
E:checked
E:enabled
E:disabled
E:first-child  同一层排行第一
E:nth-child(n)
E:nth-last-child(n)
E:last-child
E:only-child
E:first-of-type 同一层细分领域第一
E:nth-child(n)
E:nth-last-child(n)
E:last-of-type
E:only-of-type

伪元素选择器

内的
E::first-letter E内的第一个字母
E::first-line E内的第一行
E::before E内的最前面
E::after E内的最后面

属性选择器

^开始 $结尾 *包含
E[att]
E[att="val"]
E[att^="val"]
E[att$="val"]
E[att*="val"]
包含val并用空格分隔
E[att~="val"]
以val开头并用连接符"-"分隔
E[att|="val"]