这是我参与「第四届青训营」笔记创作活动的第1天

CSS选择器是CSS中十分核心的一个概念，用来选择DOM元素并改变其样式。使用起来非常的简单，但是因为其种类繁多，所以有时候会纠结要使用什么选择器。下面总结一下选择器的种类。

选择器的种类

选择器可以分为通配符选择器、元素选择器、id选择器、类选择器、群组选择器、属性选择器，伪类选择器与伪元素选择器以及各种关系选择器，其中关系选择器又包含了后代选择器、子代选择器、兄弟选择器和相邻选择器。

通配符选择器

*{...}

通配符可以用来指代任意类型的元素，可以用来改变所有元素的样式，在实际场景中通常用来格式化页面的样式，但是因为要选择所有元素，导致效率较低。

元素选择器

p{...}

用来选择指定类型的元素。

id选择器

html
<p id = "pid"></p>

css
#pid{...}

html中任意可见元素都可以设置id属性（应该不会有人给head中的元素加id吧。。。），然后选择器就可以唯一的选择这个元素，不允许两个元素设置同样的id属性。id选择器用于设置特定页面下特定元素的样式。

类选择器

html
<p class = "pclass"></p>

css
.pclass{...}

跟id属性一样，html中任意可见元素也可以设置class属性，与id不同的是，不同的元素可以设置相同的类，即使这些元素的类型不一样，不过一般类名一样的元素类型也相同。类选择器我们经常要用到，一定要记住它的用法。

群组选择器

p,
#pid,
.pclass{...}

群组选择器聚合了多种类型的选择器，可以同时对它们改变样式。

属性选择器

html
<input type = "text" />

css
input[type]{...}  /*选择具有type属性的input元素*/
input[type = "text"]  /*选择type属性为text的input元素*/
input[type != "text"]  /*选择type属性不为text的input元素*/
input[type ^= "te"]  /*选择以“te”开头的type属性的input元素*/
input[type $= "xt"]  /*选择以“xt”结尾的type属性的input元素*/
input[type *= "ex"]  /*选择包含"ex"的type属性的input元素*/

属性选择器用来筛选具有特定属性及其取值的元素，可以用来选择特定类型的表单元素。

伪类选择器

/* 常见伪类 */
:nth-child(n/odd/even) {...}  
/* 参数为数字，表示选择第n个特定类型子元素
 * 需要记住的是：第一个元素的序号是1而不是0，同时需要保证子元素序列中只包含这种特定类型的元素
 * 参数为odd和even分别表示选择奇数和偶数序号的特定类型子元素
 */
:nth-of-type(n/odd/even) {...}
/* 跟上面的很像，不过不需要保证子元素序列的类型的一致 */
:root {...}
/* 选择根元素，相当于html {...} */
:active {...}
/* 选择被激活瞬间的元素，如被点击瞬间的按钮 */
:checked {...}
/* 匹配处于选中状态的单选或者复选框 */
:disabled {...}
/* 选择处于关闭状态的元素 */
:focus {...}
/* 选择获得获得焦点的元素，一般只有表单元素和文本框才具有焦点，
 * 可以在页面中通过按tab键来查看一个元素是否具有焦点 
 */
:hover {...}
/* 选择鼠标浮于其上的元素 */
:read-only {...}
/* 选择只读元素 */
:read-write {...}
/* 选择可以更改的元素 */

伪类选择器用于选择处于特定状态的元素,比如你可能想要当鼠标放在一个元素上的时候它能够改变样式或者播放动画，或者在你往文本框中输入的时候它的边框能够高亮用来提升用户体验，这些都可以结合JS来实现，但是用伪类选择器的话会更加简单。

伪元素选择器

css
/* 常见伪元素 */
::before {...}
/* 匹配出现在原有元素的实际内容之前的一个可样式化元素 */
::after {...}
/* 匹配出现在原有元素的实际内容之后的一个可样式化元素 */
::selection {...}
/* 匹配文档中被选择的那部分 */

伪类选择器就像往一个元素里面添加类名一样，而伪元素则表现的像往选择的元素中添加一个元素一样，比如::before像是在元素前面加上一个元素并改变其样式，常常搭配属性content使用；而::selection则像是在选择的文字两边加上并改变它的样式。

关系选择器

html
<div>
    <ul>
        <li id = "L1">1</li>
        <li id = "L2">2</li>
        <li id = "L3">3</li>
        <li id = "L4">4</li>
    </ul>
</div>

css
div li{...}  /*后代选择器，选择div的所有孙元素li*/
ul>li{...}  /*子代选择器，选择的层级关系只能是相邻的，选择ul的子元素li*/
div>li{...}  /*这样是不对的*/
#L2~li{...}  /*兄弟选择器，选择L2的后面的兄弟元素，即L3,L4*/
#L2+li{...}  /*相邻选择器，选择与L2相邻的兄弟元素，即L3*/

有时候我们不想给元素一个个的设定id或者class，而想要通过元素之间的关系来选择其他元素，这时候就要用到关系选择器了，关系选择器包括后代选择器、子代选择器、兄弟选择器和相邻选择器，兄弟选择器和相邻选择器选择的都是“这个”元素后面的相应元素。

CSS选择器 | 青训营笔记