CSS常见选择器及其应用

CSS常见选择器及其应用

1. 基本选择器

元素选择器（Element Selector）

元素选择器用于匹配文档中特定类型的元素。

/* 匹配所有段落 */
p {
    color: red;
}

类选择器（Class Selector）

类选择器通过.后面跟随类名来匹配拥有该类名的任何元素。

/* 匹配class为'highlight'的所有元素 */
.highlight {
    background-color: yellow;
}

ID选择器（ID Selector）

ID选择器使用#后跟ID名来指定唯一元素。

/* 匹配id为'main-header'的元素 */
#main-header {
    font-size: 24px;
}

2. 属性选择器

简单属性选择器

简单属性选择器检查元素是否具有指定属性。

/* 匹配所有包含href属性的a元素 */
a[href] {
    text-decoration: underline;
}

属性值选择器

根据属性值的一部分或全部进行匹配。

/* 匹配lang属性值为'en'的元素 */
[lang='en'] {
    font-style: italic;
}

/* 包含'example'的src属性值的img元素 */
img[src*='example'] {
    width: 100%;
}

3. 伪类选择器

链接伪类

应用于不同状态的链接。

/* 鼠标悬停时的链接样式 */
a:hover {
    color: blue;
}

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

/* 活动链接样式 */
a:active {
    font-weight: bold;
}

结构化伪类

基于DOM结构的选择器。

/* 匹配第一个子元素 */
.first-child {
    color: green;
}

/* 匹配最后一个子元素 */
.last-child {
    border-bottom: 1px solid black;
}

/* 匹配偶数索引的兄弟元素 */
li:nth-child(even) {
    background-color: lightgray;
}

4. 伪元素选择器

内容生成伪元素

例如：::before 和 ::after 可以在元素内容之前或之后插入内容。

/* 在每个段落前添加内容 */
p::before {
    content: "—— ";
    color: #666;
}

5. 后代选择器与子元素选择器

后代选择器（Descendant Selector）

匹配任一元素下的后代元素。

/* 匹配所有div内的段落 */
div p {
    margin-bottom: 1em;
}

子元素选择器（Child Selector）

只匹配作为直接子元素的关系。

/* 匹配作为ul直接子元素的li */
ul > li {
    list-style-type: disc;
}

6. 交集选择器、并集选择器与兄弟选择器

交集选择器（Intersection Selector）

同时满足多个条件的选择器。

/* 匹配类名为'box'且属于div元素的元素 */
div.box {
    padding: 10px;
    border: 1px solid black;
}

并集选择器（Comma-separated Selector）

用逗号分隔多个选择器，表示它们是分组的。

/* 匹配类为'header'和'id为'main'的元素 */
.header, #main {
    background-color: white;
    font-family: Arial, sans-serif;
}

/* 或者 */
h1, h2, h3 {
    color: navy;
}

兄弟选择器（Adjacent Sibling Selector）

匹配紧跟在某个元素后的同级元素。

/* 匹配紧随h1元素后的段落 */
h1 + p {
    margin-top: 0;
}

一般同胞选择器（General Sibling Selector）

匹配同级元素中的某一个元素之后的所有元素。

/* 匹配同级元素中任意h1元素之后的所有段落 */
h1 ~ p {
    font-size: smaller;
}

以上只是CSS选择器的一小部分介绍，每种选择器都有其独特的作用和应用场景，熟练掌握这些选择器将有助于构建更精细、更具表现力的网页布局和样式设计。