CSS 选择器详解：~、>、+、[]、: 和::
在 CSS 中，选择器是用来指定要应用样式的 HTML 元素的工具。不同的选择器有着不同的作用和用法，下面就来详细介绍一下~、>、+、[]、:和::这些选择器。
一、>选择器（子选择器）
>选择器用于选择指定元素的直接子元素。
div > p {
color: blue;
}在这个例子中，只有作为<div>直接子元素的<p>元素的文本颜色会被设置为蓝色。这意味着如果<p>元素被嵌套在其他元素中，而不是直接在<div>元素下，那么这个样式将不会被应用。
二、+选择器（相邻兄弟选择器）
+选择器用于选择紧接在指定元素后的第一个兄弟元素。
h1 + p {
font-size: 18px;
}在这个例子中，紧接在<h1>元素后面的第一个<p>元素的字体大小会被设置为 18 像素。如果有多个<p>元素紧接在<h1>元素后面，只有第一个<p>元素会受到影响。
三、~选择器（通用兄弟选择器）
~选择器用于选择指定元素之后的所有兄弟元素。
h2 ~ p {
color: green;
}在这个例子中，<h2>元素后面的所有<p>元素的文本颜色都会被设置为绿色。
四、[]选择器（属性选择器）
[]选择器根据元素的属性来选择元素。
input[type="text"] {
border: 1px solid gray;
}在这个例子中，所有type属性为text的<input>元素会有一个 1 像素宽的灰色边框。
还可以使用其他属性选择器的语法，如：
[attribute^="value"]：选择属性值以指定值开头的元素。[attribute$="value"]：选择属性值以指定值结尾的元素。[attribute*="value"]：选择属性值包含指定值的元素。
五、:伪类选择器
伪类选择器用于选择处于特定状态的元素。
例如：
:hover：选择鼠标悬停在其上的元素。:active：选择被激活（如被点击）的元素。:visited：选择被访问过的链接。:first-child：选择父元素的第一个子元素。:last-child：选择父元素的最后一个子元素。:nth-child(n)：选择父元素的第 n 个子元素。
六、::伪元素选择器
伪元素选择器用于选择元素的特定部分。
例如：
::before：在元素内容的前面插入内容。::after：在元素内容的后面插入内容。::first-letter：选择元素内容的第一个字母。::first-line：选择元素内容的第一行。
用选择器实现二级分栏
- HTML 结构：
<div class="container">
<div class="first-level">一级栏目 1</div>
<div class="second-level">
<div>二级栏目 1.1</div>
<div>二级栏目 1.2</div>
</div>
<div class="first-level">一级栏目 2</div>
<div class="second-level">
<div>二级栏目 2.1</div>
<div>二级栏目 2.2</div>
</div>
</div>这里使用div元素创建了一个包含一级栏目和二级栏目的容器。每个一级栏目后面紧跟着对应的二级栏目。
- CSS 样式：
.container {
display: flex;
flex-wrap: wrap;
}
.first-level {
width: 200px;
background-color: #f0f0f0;
padding: 10px;
}
.second-level {
display: none;
width: 200px;
background-color: #e0e0e0;
padding: 10px;
}
.first-level:hover +.second-level {
display: block;
}通过 CSS 设置容器为弹性布局，一级栏目和二级栏目分别设置宽度和背景颜色。当鼠标悬停在一级栏目上时，显示对应的二级栏目。