一. 介绍
1. 什么是CSS选择器
- CSS选择器是一种用于选择HTML或XML文档中特定元素的模式。它们允许开发者根据元素的标签名、类名、ID、属性等特征来选择元素，并对其应用样式或执行其他操作。
2. CSS选择器的作用和重要性
- CSS选择器是CSS的核心组成部分，它们使开发者能够以简洁而灵活的方式选择和操作文档中的元素。通过使用选择器，开发者可以轻松地对网页进行样式化、布局和交互操作。选择器的正确使用可以提高代码的可读性、可维护性和重用性。
二. 基本选择器
2.1 元素选择器
- 元素选择器通过元素的标签名来选择元素。例如，使用
p选择器可以选择所有<p>元素。
<body>
<p>一</p>
<p>二</p>
<p>三</p>
<p>四</p>
</body>
p{
font-size:36px;
}
2.2 类选择器
- 类选择器通过元素的
class属性值来选择元素。例如，使用.red选择器可以选择所有class属性值为red的元素。
<body>
<p class="red">一</p>
<p>二</p>
<p class="red">三</p>
<p>四</p>
</body>
body{
display: flex;
}
p{
font-size:36px;
}
.red{
color:red;
}
2.3 ID选择器
- ID选择器通过元素的
id属性值来选择元素。例如，使用#header选择器可以选择id属性值为header的元素。
<body>
<div id="header">头部</div>
<p class="red">一</p>
<p>二</p>
<p class="red">三</p>
<p>四</p>
</body>
#header{
color:blue;
}
body{
display: flex;
}
p{
font-size:36px;
}
.red{
color:red;
}
2.4 属性选择器
- 属性选择器通过元素的属性值来选择元素。例如，使用
[type="text"]选择器可以选择所有type属性值为text的元素。
<body>
<input type="text" />
</body>
[type="text"]{
background:#000;
}
2.5 伪类选择器
- 伪类选择器用于选择元素的特定状态或位置。例如，使用
:hover选择器可以选择鼠标悬停在元素上时的状态。
[type="text"]{
background: #000
}
[type="text"]:hover{
background: red
}
2.6 伪元素选择器
伪元素选择器用于选择元素的特定部分或生成内容。例如，使用::before选择器可以选择元素的前面生成的内容。
#header::before{
background:#000;
width:200px;
height: 200px;
}
<div id="header">头部</div>
三 组合选择器
3.1 后代选择器
- 后代选择器通过选择元素的后代元素来选择元素。例如，使用
div p选择器可以选择所有在<div>元素内的<p>元素。
<div id="header">
头部
<p>header-p</p>
</div>
<p class="red">一</p>
<p >二</p>
<p class="red">三</p>
<p>四</p>
div p{
color:red;
}
3.2 子元素选择器
- 子元素选择器通过选择元素的直接子元素来选择元素。例如，使用
div > p选择器可以选择所有作为<div>元素的直接子元素的<p>元素。
<div id="header">
头部
<p>header-p</p>
</div>
<p class="red">一</p>
<p >二</p>
<p class="red">三</p>
<p>四</p>
div > p{
color:red;
}
3.3 相邻兄弟选择器
- 相邻兄弟选择器通过选择元素的相邻兄弟元素来选择元素。例如，使用
h1 + p选择器可以选择紧接在<h1>元素后的<p>元素。
<div id="header">
头部
<p>header-p</p>
</div>
<p class="red">一</p>
<h1>
<p >二</p>
<p class="red">三</p>
<p>四</p>
h1 + p{
color:red;
}
3.4 通用兄弟选择器
- 通用兄弟选择器通过选择元素的兄弟元素来选择元素。例如，使用
h1 ~ p选择器可以选择所有在<h1>元素后的兄弟<p>元素。
<div id="header">
头部
<p>header-p</p>
</div>
<p class="red">一</p>
<h1>
<p >二</p>
<p class="red">三</p>
<p>四</p>
h1 + p{
color:red;
}
