CSS选择器

2017-08-01 本文已影响18人 1a659520c6fc

class和id

class类选择器：在html中用class=“name”调用样式，在css中通过类选择器.name{}定义样式，一个标签中可以包含多个类，统一个类也可以出现在不同的标签里，所以类选择器用于多个标签的样式相似或相同时。
id选择器：在html中用id=“name”调用样式，在css中通过id选择器#name{}定义样式，一个标签只能有一个id所以id选择器用在和其它标签没有相似样式的时候。

选择器类型

基础选择器
组合选择器
属性选择器
伪类选择器
伪元素选择器

基础选择器

* 通用元素选择器，匹配页面中所有元素
#id id选择器,匹配特定的id元素
.class 类选择器，匹配class中包含的特定类的元素
element 标签选择器

组合选择器

E，F 多元素选择器，同时匹配元素E，F
E F 后代选择器，中间用空格分开，匹配元素E后面的所有的后代元素F（不论子代，孙代都被选中，注意和子代选择器的区别）
E>F 子代选择器，用>分隔，匹配E下的所有直接子元素F
E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F，当相邻同级元素不是F则不被选中
E~F 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2 /element#id/element.class 中间没有分隔符，同时满足两个条件才匹配

属性选择器

E[attr] 匹配所有具有属性attr的元素，div[id]就能匹配所有id属性的div
E[attr =value] 匹配属性attr且值为value的元素，div[id =test]匹配id=test的div
E[attr ～=value] 匹配所有属性attr具有多个空格分开，其中一个值为value的元素
E[attr ^=value] 匹配属性attr的值以value开头的属性
E[attr *=value] 匹配属性attr的值中包含value的属性
E[attr $=value] 匹配属性attr的值以value结尾的属性

伪类选择器

E:first-child 匹配第一个子女的元素E
E:link 匹配所有未被点击的链接
E:visited 匹配所有已被点击的链接
E:active 匹配鼠标已经其上按下、还没有释放的E元素
E:hover 匹配鼠标悬停其上的E元素
E:focus 匹配获得当前焦点的E元素
E:lang(c) 匹配lang属性等于c的E元素
E:enabled 匹配表单中可用的元素
E:disabled 匹配表单中禁用的元素
E:checked 匹配表单中被选中的radio或checkbox元素
E::selection 匹配用户当前选中的元素
E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last／first-child 匹配父元素的最后一个子元素，等同于:nth-last／first-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
n的取值：1、2、3、4.../2n+1、2n、4n+1/odd、even

伪元素选择器

E::first-line 匹配E元素内容的第一行
E::first-letter 匹配E元素内容的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容
E::before／after{content:"内容"; color=""}

选择器的权重

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
复杂场景下的选择器优先级在保证以上条件下两个相同类型的选择器权重大于一个相同类型的选择器，但不大于权重靠前的任意选择器

a:link 未被点击的状态
a:visited 被点击后的状态
a:hover 鼠标悬停的状态
a:active 点击过程中的状态
样式覆盖 link是没点击的状态，当点击后visited被声明优先级大于link，当鼠标移到a处hover被声明优先级大于visited，active同理

以下选择器的意思

.header{} 选中id="header" 唯一
.header{} 选中class="header" 可多个
.header .logo{} 选中class="header"下的所有class="logo" 后代选择器
.header.mobile{} 选中选中class="header"且class="mobile"的元素
.header p,.header h3{} 选中class="header"下的所有p和class="header"下的h3（后代+多元素）
#header .nav>li{} 选中id="header"下的class="nav"下的子元素里的所有的li
#header a:hover{} 选中id="header"下a标签并设置hover状态
#header .logo~p{} 选中id="header"下的和class="logo"同级的p
#header input[type="text"]{} 选中id="header"下input标签属性是type值为text的元素

区别

div:first-child意思是div的父元素下的第一个子元素且为div时被选中
div:first-of-type意思是div父元素下的同级别元素中的第一个div被选中
div: first-child（:后面有空格）意思是div元素下的第一个子元素被选中（有空格是后代选择器）
div: first-of-type意思是div元素下同级别元素中相同的第一个被选中

页面输出的效果
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
.item1:first-child选中其父元素<div class="ct">下的第一个类为item1的元素就是<p class="item1">，所以aa颜色是红色
.item1:first-of-type选中其父元素<div class="ct">下的不同类型的第一个子元素是<p class="item1">aa</p>和<h3 class="item1">bb</h3>，所以aa和bb的背景色是蓝色