CSS选择器详细指南及代码示例

最新推荐文章于 2024-02-28 10:29:15 发布

YOLO大师

最新推荐文章于 2024-02-28 10:29:15 发布

阅读量323

点赞数

文章标签： css 前端

原创文章，禁止任何形式转载！

本文链接：https://blog.csdn.net/shangyanaf/article/details/133177933

版权

什么是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范围内的字符）。

YOLO大师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS选择器详细指南及代码示例

CSS选择器用于选择要设置样式的HTML元素。CSS选择器根据元素的id、class或属性来选择HTML元素。
复制链接

扫一扫