CSS 选择器
CSS选择器
CSS选择器指的是在CSS中用来定位目标元素的一组符号。这些符号表现出元素的结构，属性和关系，可以对文档中的元素进行精确的匹配。
基本选择器
例如：
div {
color: blue;
}
这个选择器会匹配页面中所有的"div"元素，并使它们的文字变为蓝色。这是最基本的CSS选择器。
还有其他一些基本的选择器类型：
元素选择器
元素选择器就是选择HTML文档中所定义的元素类型。例如：
h1 {
font-size: 24px;
}
这个选择器会匹配所有的"h1"元素，并将它们的字体大小设为24px。
类选择器
类选择器可以根据元素的"class"属性来选择元素。例如：
.highlight {
background-color: yellow;
}
这个选择器会选择所有定义了"class=‘highlight’“的元素，并将它们的背景色设为黄色。
ID选择器
ID选择器可以根据元素的"id"属性来选择元素。例如：
#header {
color: red;
}
这个选择器会匹配所有id属性为"header"的元素，并将它们的颜色设为红色。
组合选择器
组合选择器是指多个基本选择器组合在一起，以此来更具体地匹配目标元素。例如：
后代选择器
后代选择器就是通过描述嵌套关系，来选择某个元素下的所有后代元素。例如：
<div>
<p>Hello World!</p>
</div>
div p {
font-size: 14px;
}
这个选择器会匹配所有嵌套在"div"元素中的"p"元素，并将它们的字体大小设为14px。
子元素选择器
子元素选择器是指通过"父级元素 > 子级元素"的方式来选择子元素。例如：
<div>
<p>Hello World!</p>
</div>
div > p {
font-size: 14px;
}
这个选择器会匹配所有在"div"元素下的直接子元素"p”，并将它们的字体大小设为14px。
相邻兄弟选择器
相邻兄弟选择器是指通过"元素1 + 元素2"的方式来选择紧挨着元素1的相邻兄弟元素。例如：
<div>
<p>Hello World!</p>
<h1>Heading</h1>
</div>
p + h1 {
font-size: 24px;
}
这个选择器会匹配所有在"p"元素后紧挨着的"h1"元素，并将它们的字体大小设为24px。
通用兄弟选择器
通用兄弟选择器是通过"元素1 ~ 元素2"的方式来匹配在元素1后面的所有兄弟元素2。例如：
<div>
<p>Hello World!</p>
<h1>Heading1</h1>
<h1>Heading2</h1>
</div>
p ~ h1 {
font-size: 18px;
}
这个选择器会匹配所有在"p"元素后的所有"h1"元素，并将它们的字体大小设为18px。
属性选择器
属性选择器可以根据元素的某个属性来选择元素。例如：
属性选择器基础
input[type='text'] {
border: 1px solid gray;
}
这个选择器会选择所有"type=‘text’“的input元素，并将它们的边框设为1像素宽、灰色。
“starts with"选择器
input[type^='tex'] {
border: 1px solid gray;
}
这个选择器会选择所有"type"属性值以"tex"开头的input元素，并将它们的边框设为1像素宽、灰色。
“ends with"选择器
a[href$='.pdf'] {
color: red;
}
这个选择器会选择所有"href"属性值以”.pdf"结尾的链接元素，并将它们的颜色设置为红色。
“contains"选择器
a[href*='google'] {
font-weight: bold;
}
这个选择器会选择所有"href"属性值中包含"google"的链接元素，并将它们的字体加粗。
伪类和伪元素
伪类和伪元素是指在匹配元素时，不是根据元素本身的属性或结构来选择，而是依靠元素的行为和状态等信息。
例如：
:hover伪类
a:hover {
color: red;
}
这个选择器会在鼠标经过链接时，将它的颜色设为红色。
:nth-child(n)伪类
ul li:nth-child(2n) {
background-color: #EEE;
}
这个选择器会选择ul中的所有li元素中，位置为偶数的元素并将它们的背景色设为#EEE。
::before伪元素
div::before {
content: "";
display: block;
background-image: url("icon.png");
}
这个选择器将在div元素之前添加一个空内容的伪元素，并将它的背景设为icon.png。
总结
CSS选择器是CSS语言中非常重要的一部分。基本选择器能够独立使用;通过组合选择器来更加精确的选择目标元素，而属性选择器可提供更加丰富的选择方式。同时，伪类和伪元素可以提供额外的选择和样式变化。熟练地运用所有选择器和组合方式，能够轻松地实现各种复杂的设计效果。