什么是CSS选择器?
CSS选择器用于选择要设置样式的HTML元素。CSS选择器根据元素的id、class或属性来选择HTML元素。
基本选择器
通用选择器:
*
符号用于选择页面上的所有元素。大多数开发者希望将边距和内边距重置为0,以便消除浏览器默认提供的边距和内边距。这有助于在访问网站时在不同浏览器之间保持一致性。
语法:
*{
// 设置元素样式
}
HTML示例:
<body>
<h1>通用选择器示例</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>
CSS示例:
*{
background: black;
color: white;
font-family: 'Poppins';
}
h1{
text-align: center;
}
类选择器:
类选择器用于选择属于特定类属性的所有元素。为了选择具有特定类的元素,请使用表示类名的句点(.)字符,即它将根据类属性的内容匹配HTML元素。
语法:
.class {
// CSS属性
}
HTML示例:
<body>
<div class="intro">
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p class="intro">My best friend is Mickey.</p>
</body>
CSS示例:
.intro{
background: skyblue;
}
Id选择器:
id选择器使用HTML元素的id属性来选择特定元素。页面中元素的id是唯一的,因此id选择器用于选择一个唯一的元素!要选择具有特定id的元素,请编写一个井号(#)字符,后跟元素的id。
语法:
#idname {
// 样式属性
}
HTML示例:
<body>
<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
</body>
CSS示例:
#paragraph{
background: skyblue;
}
类型选择器:
类型选择器有时被称为标签名选择器或元素选择器,因为它选择文档中的HTML标签/元素。
语法:
element{
// 设置元素样式
}
HTML示例:
<body>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</p>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus.</span>
</body>
CSS示例:
span{
background: skyblue;
}
分组选择器
CSS分组选择器用于选择多个元素并一起设置样式。这减少了为每个元素声明公共样式所需的代码和额外工作。要对选择器进行分组,每个选择器之间用逗号分隔。
语法:
element, element{
// 设置元素样式
}
HTML示例:
<body>
<h1>分组选择器示例</h1>
<p>示例CSS选择器。</p>
<h4>示例CSS选择器分组。</h4>
</body>
CSS示例:
h1{
text-align: center;
}
p,h4{
background: skyblue;
}
组合器
组合器用于解释选择器之间的关系。CSS中有四种不同的组合器:
- 后代选择器(空格)
- 子选择器(>)
- 相邻兄弟选择器(+)
- 通用兄弟选择器(~)
后代组合器(空格)
后代组合器通常由一个空格(" ")字符表示,将两个选择器组合在一起,这样,如果第二个选择器匹配的元素具有匹配第一个选择器的祖先元素(父元素、父元素的父元素、父元素的父元素的父元素等),则选择它们。
语法:
selector1 selector2 {
/* 属性声明 */
}
HTML示例:
<body>
<div>
<p>div中的段落1。</p>
<p>div中的段落2。</p>
<section><p>div中的段落3。</p></section>
</div>
<p>段落4。不在div中。</p>
<p>段落5。不在div中。</p>
</body>
CSS示例:
div p{
background: skyblue;
}
子组合器(>)
子组合器使用大于号(>)作为元素之间的分隔符。它选择父元素的直接后代。此组合器仅匹配文档树中的直接子元素。与后代选择器相比,它更严格,因为只有当第一个选择器是其父元素时,才会选择第二个选择器。
语法:
selector1 > selector2
{
// 样式属性
}
HTML示例:
<body>
<h1>子组合器示例</h1>
<p>子选择器(>)选择指定元素的所有子元素。</p>
<div>
<p>div中的段落1。</p>
<p>div中的段落2。</p>
<section>
<!-- 不是子元素,但是后代元素 -->
<p>div中的段落3(在section元素内)。</p>
</section>
<p>div中的段落4。</p>
</div>
<p>段落5。不在div中。</p>
<p>段落6。不在div中。</p>
</body>
CSS示例:
div>p{
background: skyblue;
}
相邻兄弟组合器(+)
相邻兄弟组合器使用加号(+)作为元素之间的分隔符。仅当第二个元素紧跟在第一个元素之后,并且它们都是同一个父元素的子元素时,才会匹配第二个元素。此兄弟选择器选择相邻元素,或者我们可以说,元素位于指定标签的旁边。
语法:
former_element + target_element
{
// 样式属性
}
HTML示例:
<body>
<h1>相邻兄弟选择器示例</h1>
<p>+选择器用于选择紧跟在另一个特定元素之后的元素。</p>
<div>
<p>div中的段落1。</p>
<p>div中的段落2。</p>
</div>
<p>段落3。在div之后。</p>
<p>段落4。在div之后。</p>
<div>
<p>div中的段落5。</p>
<p>div中的段落6。</p>
</div>
<p>段落7。在div之后。</p>
<p>段落8。在div之后。</p>
</body>
CSS示例:
div + p {
background: skyblue;
}
通用兄弟组合器(~)
通用兄弟组合器使用波浪号(~)作为元素之间的分隔符。它选择跟随第一个选择器元素的元素,并且它们都是同一个父元素的子元素。它可用于选择具有共同父元素的元素组。
语法:
former_element ~ target_element
{
// 样式属性
}
HTML示例:
<body>
<h1>通用兄弟组合器示例</h1>
<p>通用兄弟选择器(~)选择指定元素的所有下一个兄弟元素。</p>
<p>段落1。</p>
<div>
<p>段落2。</p>
</div>
<p>段落3。</p>
<code>一些代码。</code>
<p>段落4。</p>
</body>
CSS示例:
div ~ p {
background-color: skyblue;
}
伪选择器
伪类:
当元素的状态因用户交互而改变时,使用冒号(:)。
语法:
selector:pseudo-class
{
// property: value;
}
常用伪类有:
- :focus
- :required
- :checked
- :disabled
- :hover
- :visited
- :active
这些伪类与文档树中元素的位置有关:
- :root
- :first-child
- :last-child
- :only-child
- :nth-child(n)
- :nth-last-child(n)
- :not(selector)
伪元素:
双冒号(::)用于为选定元素的特定部分设置样式。
语法:
selector::pseudo-element
{
// property: value;
}
常用伪元素有:
- ::after
- ::before
- ::first-line
- ::first-letter (:first-letter)
- ::first-line (:first-line)
- ::file-selector-button
属性选择器
CSS属性选择器根据给定属性的存在或值匹配元素。
[attr] 表示具有attr属性名的元素。
[attr=value] 表示具有attr属性名且值恰好为value的元素。
[attr~=value] 表示具有attr属性名且值为由空格分隔的单词列表的元素,其中一个单词恰好为value。
[attr|=value] 表示具有attr属性名且值可以恰好为value,或者以value开头,后面紧跟连字符的元素。它通常用于语言子代码匹配。
[attr^=value] 表示具有attr属性名且值以value为前缀(前置)的元素。
[attr$=value] 表示具有attr属性名且值以value为后缀(后置)的元素。
[attr*=value] 表示具有attr属性名且值至少包含一个value出现的元素。
[attr operator value i] 在闭合括号前添加i(或I)会使值进行不区分大小写的比较(对于ASCII范围内的字符)。