CSS选择器详解

CSS选择器详解

CSS选择器是一种强大的工具，用于指定哪些HTML元素应当被应用样式规则。基本语法是：

选择器 {

    属性: 值;

    属性1: 值1;

}

接下来，我们将详细探讨不同类型的CSS选择器。

一、基本选择器

元素选择器：

直接使用HTML元素的名称作为选择器。例如，要选择所有的<p>元素：

p {
    color: red;  
}

属性选择器：

根据元素的属性及属性值来选择元素。例如：

div[id] { /* 有id属性的div元素 */   

background-color: yellow;  } 

div[id=xx] { /* id属性值为xx的div元素 */   

border: 1px solid black;  } 

div[id*=xx] { /* id属性值包含xx的div元素 */   

font-weight: bold;  } 

div[id^=xx] { /* id属性值以xx开头的div元素 */   

color: green;  } 

div[id$=xx] { /* id属性值以xx结尾的div元素 */   

text-decoration: underline;  }

ID选择器：

使用HTML元素的id属性值选择特定的单个元素。例如：

#xx {    color: blue;  }

类选择器：

通过HTML元素的class属性值选择元素。例如：

.xx {    font-size: 20px;  }

包含选择器:

选择A元素内部的所有B元素。例如：

div p {    color: orange;  }

子选择器：

选择A元素直接子元素的B元素。例如：

div > p {    color: purple;  }

兄弟选择器：

相邻兄弟选择器：

选择紧接在A元素之后的同级B元素。例如：

h1 + p {    margin-top: 50px;  }

通用兄弟选择器：

选择A元素之后的所有同级B元素。例如：

h1 ~ p {    color: gray;  }

二、伪元素选择器

用于选择元素的特定部分。例如：

p::first-letter { /* 首字母 */   

font-size: 2em;  }   

p::first-line { /* 首行 */   

font-weight: bold;  }   

p::before { /* 在前面插入 */   

content: "注意：";   

color: red;  }   

p::after { /* 在后面插入 */   

content: "（重要）";   

color: blue;  }

三、伪类选择器

用于选择处于特定状态的元素。例如：

结构性伪类选择器：

li:nth-child(2) { /* 选择第二个子元素 */   

color: red;  }  

li:nth-of-type(2) { /* 选择第二个<li>元素 */   

font-weight: bold;  }

UI状态伪类选择器：

a:hover { /* 鼠标悬停状态 */   

color: green;  }  

input:focus { /* 焦点状态 */   

background-color: yellow;  }  

input:checked { /* 选中状态 */   

border: 2px solid blue;  }

其他伪类选择器：

:not(p) { /* 选择非<p>元素 */   

color: navy;  }