CSS选择器及其权重

基本选择器

选择器	描述
*	匹配所有元素
E	匹配所有E标签
.app	匹配所有class="app"的元素
#app	匹配id="app"的元素，仅一个

组合选择器

选择器	描述
A，B	并列选择器,匹配A和B
A B	后代选择器,匹配A包裹的所有B元素
A > B	子元素选择器,匹配A包裹的儿子元素B
A + B	相邻选择器,匹配所有紧随A元素之后的同级元素B
A ~ B	后兄弟选择器,匹配任何A标签之后的同级B标签

属性选择器

选择器	描述
E[attribute]	具有attribute属性的E元素，E可省略
E[attribute = value]	attribute属性值为value的E元素
E[attribute ~= value]	匹配所有attribute属性具有多个空格分隔的值、其中一个值等于“value”的E元素
E[attribute ^= value]	attribute属性值以value开头的E元素
E[attribute $= value]	attribute属性值以value结尾的E元素
E[attribute *= value]	attribute属性值包含value字符串的E元素
[attribute |= value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词

~=和*=区别，~=匹配空格包含的整个值，*=匹配字符串是否包含字符串，例如以下输出结果为红色背景，字体颜色未生效，

<div class="abcd" >test</div>

div[class*=abc] {
            background-color: red;
}
div[class~=abc] {
    color: green;
}

伪类选择器

选择器	描述
E:first-child	第一个子元素E
E:nth-child(n)	第n个子元素E
E:link	未被点击的链接
E:hover	鼠标悬停在E上的效果
E:active	鼠标点击还未释放的效果
E:visited	点击过的链接
E:focus	获得当前焦点的E元素
E:target	特定id的元素点击后的效果
E:lang©	lang属性等于c的E元素
E:enabled	表单中激活的E元素
E:disabled	表单中禁用的E元素
E:checked	表单中选中的元素
E::selection	匹配被用户选取的选取的部分
E:not(:nth-child(n))	除了第n个的其它E元素

target伪类选择器使用方式：

:target{
    border: 2px solid #D4D4D4;
    background-color: green;
}

<!-- 点击后对应id的样式会改变 -->
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

伪元素选择器

选择器	描述
E:first-line	E标签第一行
E:first-letter	E标签内第一个字母
E:before	E前面插入内容
E:after	E后面插入内容

注：::before和::after在CSS3引入，作用与:before和:after相同

优先级：id > class > 标签 > 相邻选择器 > 子选择器 > 后代选择器 > * > 属性选择器 > 伪类选择器