css3 选择器

/* 示例代码：CSS3 选择器 */

/* 1. 属性选择器 */
input[type="text"] {
    border: 1px solid blue;
}

/* 解释：选择所有 type 属性等于 "text" 的 input 元素，并设置边框样式。 */

/* 2. 伪类选择器 :nth-child */
li:nth-child(odd) {
    background-color: #f0f0f0;
}

/* 解释：选择每个 li 元素中奇数位置的元素，并设置背景颜色。 */

/* 3. 伪类选择器 :not */
p:not(.intro) {
    color: red;
}

/* 解释：选择所有不包含 .intro 类的 p 元素，并设置文本颜色为红色。 */

/* 4. 伪元素选择器 ::before 和 ::after */
p::before {
    content: "Before ";
}

p::after {
    content: " After";
}

/* 解释：在每个 p 元素的内容前插入 "Before"，在内容后插入 "After"。 */

/* 5. 结构化伪类选择器 :first-child */
ul li:first-child {
    font-weight: bold;
}

/* 解释：选择每个 ul 中的第一个 li 元素，并设置字体加粗。 */

/* 6. 相邻兄弟选择器 + */
h2 + p {
    color: green;
}

/* 解释：选择紧跟在 h2 元素之后的 p 元素，并设置文本颜色为绿色。 */