前端 · 1 分钟阅读

CSS 选择器

基础选择器
组合选择器
多类名使用
属性选择器
伪类选择器
伪元素选择器
选择器优先级
使用建议

基础选择器

1. 元素选择器

/* 选择所有p元素 */
p {
    color: blue;
}

2. 类选择器

/* 选择所有class="highlight"的元素 */
.highlight {
    background-color: yellow;
}

3. ID选择器

/* 选择id="header"的元素 */
#header {
    font-size: 24px;
}

4. 通配符选择器

/* 选择所有元素 */
* {
    margin: 0;
    padding: 0;
}

组合选择器

1. 后代选择器

/* 选择div内的所有p元素 */
div p {
    margin: 10px;
}

2. 子元素选择器

/* 只选择div的直接子元素p */
div > p {
    padding: 5px;
}

3. 相邻兄弟选择器

/* 选择紧跟在h1后面的p元素 */
h1 + p {
    font-weight: bold;
}

多类名使用

一个元素可以同时带多个类名，用空格分隔：

<div class="red font35">标题文本</div>

.red {
    color: red;
}
.font35 {
    font-size: 35px;
}

属性选择器

/* 选择具有title属性的元素 */
[title] {
    border: 1px solid #ccc;
}

/* 选择href属性值以"https"开头的元素 */
[href^="https"] {
    color: green;
}

/* 选择class属性包含"button"的元素 */
[class*="button"] {
    cursor: pointer;
}

伪类选择器

/* 鼠标悬停效果 */
a:hover {
    text-decoration: underline;
}

/* 访问过的链接 */
a:visited {
    color: purple;
}

/* 第一个子元素 */
li:first-child {
    font-weight: bold;
}

伪元素选择器

/* 在元素内容之前插入 */
.box::before {
    content: "→";
}

/* 在元素内容之后插入 */
.box::after {
    content: "←";
}

/* 选择第一行 */
p::first-line {
    font-size: 120%;
}

选择器优先级

优先级从高到低：

!important
内联样式
ID选择器
类选择器、属性选择器、伪类选择器
元素选择器、伪元素选择器
通配符选择器

/* 优先级示例 */
#header {
    color: blue !important;    /* 最高优先级 */
}
.nav {
    color: red;               /* 次高优先级 */
}
p {
    color: green;            /* 较低优先级 */
}

使用建议

优先用类选择器，少用 ID 选择器
选择器嵌套别太深，一般不超过 3 层
尽量别用 !important，权重一旦上去就降不下来了