css3 - 属性选择器、伪元素选择器、结构性伪类选择器

最新推荐文章于 2025-09-25 08:37:58 发布

原创最新推荐文章于 2025-09-25 08:37:58 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了CSS3中的关键选择器概念，包括属性选择器，如如何通过属性应用样式；伪元素选择器，如`first-line`用于设置元素首行样式，`first-letter`针对首字母美化，以及`before`和`after`用于内容前后插入；还有结构性伪类选择器，如`root`用于根元素样式，`not`用于排除子元素样式，`empty`针对空元素，以及`target`在用户点击链接后对目标元素应用样式。

一、属性选择器

这里写图片描述

html:

<body>
  <div id="box1">示例1</div>
  <div id="box2">示例2</div>
  <div id="box3">示例2</div>
  <div id="box4">示例2</div>
</body>

css:

<style>
  [id = box1] { /*选择id="box1"的标签 设置样式*/
    background-color: pink;
  }
</style>

二、伪元素选择器

1. first-line伪元素选择器用于为某个元素中的第一行文字使用样式。

这里写图片描述

html：

<p>我是一个段落中的第一行<br>我是第二行。</p>

css：

<style>    
  p::first-line {  /*first-line伪元素选择器将第一行文字设为红色*/
    color: red;
  }
</style>

2. first-letter伪元素选择器用于为某个元素中的文字首字母或第一个字（中文或日文等汉字）使用样式。

这里写图片描述

html：

<p>这是一段中文文字。</p>
<p>This is an englist text.</p>

css：

<style>    
  p::first-letter {  /*first-letter选择器设置这两段文字的开头字母或文字的颜色为红色*/
    color: red;
  }
</style>

3.before伪元素选择器用于在某个元素之前插入一些内容

这里写图片描述

html:

<ul>
  <li>列表项目1</li>
  <li>列表项目2</li>
  <li>列表项目3</li>
</ul>

css:

<style>    
    ul {list-style: none;}/*去掉列表默认的小圆点 */
    li::before {
      content: '@@'  /*before伪元素选择器在每个列表项目的文字的开头插入“@@”符号*/
    }
</style>

4.after伪元素选择器用于在某个元素之后插入一些内容

这里写图片描述

html:

<ul>
  <li>列表项目1</li>
  <li>列表项目2</li>
  <li>列表项目3</li>
</ul>

css:

<style>    
    ul {list-style: none;}/*去掉列表默认的小圆点 */
    li::after {
      content: "(仅用于测试，请勿用于商业用途)";
      font-size: 16px;
      color: red;
    }
</style>

三、结构性伪类选择器

1.root选择器将样式绑定到页面的根元素中

这里写图片描述

html：

<body>
  <h1>我是标题</h1>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是一个段落，我是一个段落，我是一个段落，我是一个段落，我是一个段落,我是一个段落，我是一个段落，我是一个段落.</p>
</body>

css：

<style>
    :root {
      background-color: yellow;/*root选择器来指定整个网页的背景颜色为黄色*/
    }
    body {
      background-color: pink;/*将网页中body元素的背景设为绿色*/
    }
</style>

解析：
如果只使用body元素来设置背景颜色，那么整个页面背景都是绿色；

2.not选择器：如果想对某个结构元素使用样式，但想排除这个结构元素下面的子结构元素，让他不使用这个样式时，可以使用not选择器

这里写图片描述

html：

<body>
  <h1>我是标题</h1>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我是一个段落，我是一个段落，我是一个段落，我是一个段落，我是一个段落,我是一个段落，我是一个段落，我是一个段落.</p>
</body>

css：

<style>
    body :not(h1) {/*body后面有一个空格，如果没有空格效果不显示。在body中，除了h1标签之外，其他所有标签设置背景颜色*/
      background-color: pink;
    }
</style>

3.empty选择器：来指定当元素内容为空白时使用的样式

这里写图片描述

html：

<body>
  <table border="1" cellpading="0" cellspacing="0">
    <tr>
      <td>单元格A</td>
      <td>单元格B</td>
      <td>单元格C</td>
    </tr>
    <tr>
      <td>单元格D</td>
      <td>单元格E</td>
      <td></td>
    </tr>
  </table>
</body>

css：

<style>
    :empty {
      background-color: pink;/*当表格中某个单元格内容为空白时，该单元格背景颜色为pink*/
    }
</style>

4.target选择器：对页面中某个target元素（该元素的id被当做页面中的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并跳转到target元素后起作用

点击超链接“示例文字2”，相对应的锚点id的背景颜色会设置为pink

这里写图片描述

html：

<body>
    <p id="menu">
      <a href="#txt1">示例文字1</a> |
      <a href="#txt2">示例文字2</a> |
      <a href="#txt3">示例文字3</a> |
      <a href="#txt4">示例文字4</a> |
    </p>

    <div id="txt1">
      <h2>我是示例文字1</h2>
      <p>...此处略去...</p>
    </div>
    <div id="txt2">
      <h2>我是示例文字2</h2>
      <p>...此处略去...</p>
    </div>
    <div id="txt3">
      <h2>我是示例文字3</h2>
      <p>...此处略去...</p>
    </div>
    <div id="txt4">
      <h2>我是示例文字4</h2>
      <p>...此处略去...</p>
    </div>
</body>

css：

<style>
    :target {  /*当点击某个链接时，对应的target锚点的id就会设置背景颜色*/
      background-color: pink;
    }
</style>

解析：

超链接a的href=”#id”分别对应下面的id值。点击哪个超链接，对应的id的背景颜色就会根据css样式target来设置为pink