CSS选择器

一、元素选择器（标签选择器）

这是最基本的 CSS 选择器。它直接使用 HTML 元素的标签名来选择元素。例如：

p{color:red;}会将所有<p>段落元素中的文字颜色设置为红色。

div{background - color:lightgray;}会给所有<div>元素设置浅灰色的背景颜色。

二、类选择器（class 选择器）

以点（.）开头，后面跟着自定义的类名。可以应用于多个 HTML 元素共享相同的样式。例如：

在 HTML 中有<div class = "box">和<p class = "box">。

在 CSS 中定义.box{border:1px solid black;}，那么这两个元素都会有 1 像素的黑色边框。

三、ID 选择器

以井号（#）开头，后面跟着自定义的 ID 名。在一个 HTML 文档中，ID 必须是唯一的。例如：

HTML 中<div id = "header">。

CSS 中#header{height:50px;}，这个样式只会应用到id为header的<div>元素上。

四、后代选择器

用于选择某个元素的后代元素。用空格分隔不同的选择器。例如：

在 HTML 中<div class = "parent"><p class = "child">Text</p></div>。

在 CSS 中.parent.child{font - size:14px;}，这个样式会应用到class为parent的元素内部的class为child的元素上，也就是<p>元素上。

五、子元素选择器

用于选择某个元素的直接子元素。用大于号（>）分隔不同的选择器。例如：

在 HTML 中<div class = "parent"><p class = "child">Text</p><span><p class = "child">Another Text</p></span></div>。

在 CSS 中.parent >.child{color:blue;}，这个样式只会应用到class为parent的元素的直接子元素class为child的<p>元素上，也就是第一个<p>元素，而不会应用到<span>内部的<p>元素。

六、相邻兄弟选择器

用于选择紧挨着某个元素的兄弟元素。用加号（+）分隔不同的选择器。例如：

在 HTML 中<p class = "first">First</p><p class = "second">Second</p>。

在 CSS 中.first +.second{margin - top:10px;}，这个样式会应用到紧挨着class为first的<p>元素后面的class为second的<p>元素上。

七、通用兄弟选择器

用于选择某个元素后面的所有兄弟元素。用波浪号（~）分隔不同的选择器。例如：

在 HTML 中<p class = "first">First</p><p class = "second">Second</p><p class = "third">Third</p>。

在 CSS 中.first ~.third{text - decoration:underline;}，这个样式会应用到class为first的<p>元素后面的class为third的<p>元素上。

八、属性选择器

根据元素的属性来选择元素。例如：

input[type = "text"]{width:200px;}会将所有type属性为text的<input>元素的宽度设置为 200 像素。

还可以使用部分匹配属性值的属性选择器，如[class^ = "col -"]会选择所有class属性值以col -开头的元素。

九、伪类选择器

用于在特定状态下选择元素。例如：

a:hover{text - decoration:underline;}，当鼠标悬停在<a>链接上时，会添加下划线。

input:focus{border - color:blue;}，当<input>元素获得焦点时，边框颜色变为蓝色。

十、伪元素选择器

用于向某些元素添加特殊的效果或内容。例如：

p::before{content:"* ";}会在每个<p>段落元素的开头添加一个星号和一个空格。

p::after{content:".";}会在每个<p>段落元素的结尾添加一个句号。