CSS选择器

选择器类型：

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

基础选择器：

*：通用元素选择器，匹配页面任何元素（很少使用）。
id：id选择器，匹配特定的id元素。
.class：类选择器，匹配class包含（不等于）特定类的元素。
element：标签选择器。
id定位到页面上唯一的元素，class定位到页面上某一类的元素。一个页面上不能出现相同id的元素

1.png

组合选择器：

E,F：多元素选择器，用,分隔，同时匹配元素E或元素F。
E F：后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素，子元素向下递归）元素F。
E>F：子元素选择器，用>分隔，匹配元素E所有的直接子元素。相当于第一层级的元素，嵌套的元素不包括。
E+F：直接相邻选择器，匹配E元素之后的相邻的同级元素F。（不包括E）
E~F：普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）。（不包括E）
.class1.class2：id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符。（同时拥有这两个特性的元素）
element#id：id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符。（同时拥有这两个特性的元素）

3.png

属性选择器：

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]：匹配属性attri的值以value结尾的元素。
E[attr*=value]：匹配属性attr的值包含value的元素。

2.png

伪类选择器：代表元素的而另外一种状态

E:first-child：匹配元素E的第一个子元素。
E:link：匹配所有未被点击的链接。
E:visited：匹配所有已被点击的链接。
E:active：匹配鼠标已经其上按下，还没有释放的元素。
E:hover：匹配鼠标悬停其上的E元素。
E:focus：匹配获得当前焦点的E元素。（对于input输入框，当鼠标选中的时候的样式）
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(n)作用类似，但是仅匹配使用同种标签的元素。（同种类型）
E:nth-last-of-type(n)：与nth-last-child(n)作用类似，但是仅匹配使用同种标签的元素。
E:last-child：匹配父元素的最后一个子元素，等同于nth-last-child(1)。
E:first-of-type：匹配父元素下使用同种标签的第一个子元素，相当于nth-of-type(1)。
E:last-of-type：匹配父元素下使用同种标签的最后一个子元素，相当于nth-last-of-type(1)。
E:only-cild：匹配父元素仅有的一个子元素，相当于first-child:last-child或nth-child(1):nth-last-child(1)。
E:only-of-type：匹配父元素下使用同种标签的唯一一个子元素，相当于first-of-type:last-of-type或nth-of-type(1):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元素之后插入生成的内容。在元素内部最后一个子元素的后面生成内容。
对于这种伪元素，必须要有content，插入生成的内容。在元素内部生成一个元素。使用目的：简化标签。

a连接的4个伪类属性的顺序：

a:link {
    color: red;
}
a:visited {
    color: black;
}
a:hover {
    color: blue;
}
a:active {
    color: yellow;
}

选择器的优先级

如果多条规则作用于同一个人元素上，且定义的相同属性的不同值，比如：


test

在属性后面使用!important会覆盖页面内任何位置定义的元素样式。
作为style属性写在元素标签上的内联样式。
id选择器。
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义

样式覆盖

下面的覆盖上面的。

选择器的使用经验

遵守CSS书写规范。
使用合适的命名空间，不要随便使用标签选择器。
合理的解释复用class。

`div:first-child、div:first-of-type、div :first-child和div :first-of-type`的作用和区别（注意空格的作用）

div :first-child添加空格没有作用
div :first-of-type添加空格没有作用。

CSS选择器

选择器类型：

基础选择器：

id：id选择器，匹配特定的id元素。

组合选择器：

属性选择器：

伪类选择器：代表元素的而另外一种状态

伪元素选择器：

a连接的4个伪类属性的顺序：

选择器的优先级

样式覆盖

选择器的使用经验

div:first-child、div:first-of-type、div :first-child和div :first-of-type的作用和区别 （注意空格的作用）

你可能感兴趣的:(CSS选择器)

`div:first-child、div:first-of-type、div :first-child和div :first-of-type`的作用和区别（注意空格的作用）