CSS选择器_ 字节宝

前言

本文将介绍基本的CSS选择器使用方

CSS选择器

CSS选择器主要可以分为两大类：

基础标签器
复合选择器

除了基于HTML标签的属性选择元素，还有一些特殊的选择器：

伪类选择器
伪元素选择器

下面来逐一介绍。

基础标签器

元素选择器

直接选择元素标签

格式：element

示例：选择所有的<div>标签，将其文本内容设置倾斜样式

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

div{
  font-style: italic;
}

效果如下：

类选择器

根据class属性选择元素

格式：.class

示例：将第三段（class=para3）的文本内容加粗

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

.para3{
  font-weight: bolder;
}

效果如下：

ID选择器

根据唯一的id值选择对应的元素

格式：#id

示例：将第二段（id=para2）的文本增加下划线

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

#para2{
  text-decoration: underline;
}

效果如下：

通配符选择器

选择页面中所有元素（一般不使用）

格式：*

示例：将所有内容增添下划线

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

*{
  text-decoration: underline;
}

效果如下：

属性选择器

可以根据元素的属性以及属性值来选择元素

[属性名]
[属性名="属性值"]
[属性名*=部分属性值]
[属性名^=以xx开头的属性值]
[属性名$=以xx结尾的属性值]

格式：[attribute]

示例：将带有title属性的元素内容添加橙色阴影

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

[title]{
  text-shadow: 0.1em 0.1em 0.2em darkorange;
}

效果如下：

格式：[attribute=value]

示例：将第一段（class属性值为para1）的文本内容添加蓝色阴影

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

[class=para1]{
  text-shadow: 0.1em 0.1em 0.2em blue;
}

效果如下：

格式：[attribute*=value]

示例：将class属性包含para值的元素内容添加绿色阴影

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

[class*=para]{
  text-shadow: 0.1em 0.1em 0.2em green;
}

效果如下：

格式：[attribute^=value]

示例：将id属性以pa开头的元素内容添加黄色阴影

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

[id^=pa]{
  text-shadow: 0.1em 0.1em 0.2em yellow;
}

效果如下：

格式：[attribute$=value]

示例：将id以le结尾的元素内容添加绿色边框

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

[id$=le]{
  width: 220px;
  outline: yellowgreen outset 5px;
}

效果如下：

复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。

交集选择器

又称“标签指定式选择器”（即…又…）。由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器。

注意：两个选择器之间不能有空格

格式：

element.class
element#id

示例：选择<p>标签下class属性值为purple的元素，将其文本样式设置为紫色、加粗

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

p.purple{
  color: purple;
  font-weight: bolder;
}

效果如下：

并集选择器

由各个选择器通过逗号,连接而成。

任何形式的选择器都可以作为并集选择器的一部分

格式：

选择器1,选择器2,...

示例：选择<h2>标签和class属性值为orange的元素，将其文本样式设置为橙色、加粗

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

h2,[class="orange"]{
  color: orange;
  font-weight: bolder;
}

效果如下：

后代、儿子、兄弟选择器

后代选择器
儿子选择器
相邻兄弟选择器
一般兄弟选择器

又称为“包含选择器”，可以选择某元素后代的元素

格式：

element element

示例：选择<div>标签下class属性为blue的元素，将其文本样式设置为蓝色、加粗

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

div [class="blue"]{
  color: blue;
  font-weight: bolder;
}

效果如下：

只选择某个元素的子元素，而非所有后代元素

格式：

element>element

示例：选择<div>标签下所有的<p>元素，将其文本样式设置为红色、加粗，并添加粉色边框

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <em>
      <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
      <p class="yellow" id="yellow2">告诉他们我的幸福</p>
      <p class="green" id="green1">那幸福的闪电告诉我的</p>
      <p class="green" id="green2">我将告诉每一个人</p>
    </em>
  </div>
  <br>
  <div class="para3" id="para3">
    <em>
      <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
      <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
      <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
      <p class="blue" id="blue2">愿你有情人终成眷属</p>
      <p class="purple" id="purple1">愿你在尘世获得幸福</p>
      <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
    </em>
  </div>

注意：这里第二、三段文本被<em>标签包裹，而非直接在<div>标签下

代码语言：javascript复制

div>p{
  width: 280px;
  color: red;
  font-weight: bolder;
  outline: hotpink outset 5px;
}

效果如下：

选择紧邻在一个元素之后的另一个元素（二者必须拥有相同的父元素）

格式：

element element

示例：选择紧跟在id值为red1标签后的第一个<p>标签，将其文本样式设置为蓝色、加粗，并添加蓝色边框

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

[id="red1"] p{
  width: 280px;
  color: cornflowerblue;
  font-weight: bolder;
  outline: deepskyblue outset 5px;
}

效果如下：

选择一个元素之后所有指定的同级元素

格式：

element~element

示例：选择紧跟在id值为red1之后所有的<p>标签，将其文本样式设置为橙色、加粗，并添加绿色边框

代码语言：javascript复制

<h2 class="title" id="title" title>面朝大海，春暖花开</h2>

  <p class="author" id="author">海子</p>
  
  <div class="para1" id="para1">
    <p class="red" id="red1">从明天起，做一个幸福的人</p>
    <p class="red" id="red2">喂马，劈柴，周游世界</p>
    <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
    <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
  </div>
  <br>
  <div class="para2" id="para2">
    <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
    <p class="yellow" id="yellow2">告诉他们我的幸福</p>
    <p class="green" id="green1">那幸福的闪电告诉我的</p>
    <p class="green" id="green2">我将告诉每一个人</p>
  </div>
  <br>
  <div class="para3" id="para3">
    <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
    <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
    <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
    <p class="blue" id="blue2">愿你有情人终成眷属</p>
    <p class="purple" id="purple1">愿你在尘世获得幸福</p>
    <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
  </div>

代码语言：javascript复制

[id="red1"]~p{
  width: 280px;
  color: orange;
  font-weight: bolder;
  outline: forestgreen outset 5px;
}

效果如下：

伪类选择器

伪类选择器可以根据元素的状态或者元素的某种结构来选择元素。

根据上述介绍可以将伪类选择器分为两类：

UI伪类选择器
结构伪类选择器

下面来逐一介绍。

UI伪类选择器

链接伪类
:focus伪类
:target伪类
link：链接等待用户点击的状态
visited：用户此前已经点击过链接
hover：用户鼠标悬停在链接上
focus：链接拥有焦点的时候
active：链接正在被点击（鼠标在元素上按下，还没有被释放）

注意：如果链接拥有上述多种状态设置时，必须按照“LVHFA”的顺序定义选择器，否则会失效。

示例：以百度链接为例实现如下效果：

当未访问过时字体为蓝色
当鼠标悬停在链接上方时为灰色
当鼠标点击不释放时为红色
当链接拥有焦点时为黄色
当链接访问过时为紫色

代码语言：javascript复制

<div>
    <a href="https://www.baidu.com/">百度一下，你就知道</a>
</div>

代码语言：javascript复制

a:link{
  color: #2440b3;
}
a:visited{
  color: #771cb2;
}
a:hover{
  color: darkgrey;
}
a:focus{
  color: gold;
}
a:active{
  color: #ff0000;
}

效果如下：

一个元素在获得焦点时选择该元素

格式：

e:focus（其中e代表html中的任意元素）

示例：构建一个表单，当输入框获取到焦点时，样式改为：字体橙色、加粗，并添加绿色边框

代码语言：javascript复制

<form action="#">
    用户名：<input type="text" name="username">
    密码：<input type="password" name="password">
    <input type="submit" value="提交">
</form>

代码语言：javascript复制

input:focus{
  color: orange;
  font-weight: bolder;
  outline: forestgreen outset 5px;
}

效果如下：

这里要涉及锚点。当点击锚点链接时，选中被链接的元素。

格式：

#xx:target

示例：点击锚点链接，被链接的文本样式加粗

代码语言：javascript复制

<div>
    <h2 class="title" id="title" title>面朝大海，春暖花开</h2>

    <p class="author" id="author">海子</p>
    
    <div class="para1" id="para1">
      <p class="red" id="red1">从明天起，做一个幸福的人</p>
      <p class="red" id="red2">喂马，劈柴，周游世界</p>
      <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
      <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
    </div>
    <br>
    <div class="para2" id="para2">
      <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
      <p class="yellow" id="yellow2">告诉他们我的幸福</p>
      <p class="green" id="green1">那幸福的闪电告诉我的</p>
      <p class="green" id="green2">我将告诉每一个人</p>
    </div>
    <br>
    <div class="para3" id="para3">
      <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
      <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
      <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
      <p class="blue" id="blue2">愿你有情人终成眷属</p>
      <p class="purple" id="purple1">愿你在尘世获得幸福</p>
      <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
    </div>
  </div>

  <a href="#para1">第一段</a>
  <a href="#para2">第二段</a>
  <a href="#para3">第三段</a>

代码语言：javascript复制

#para1:target{
  font-weight: bolder;
}
#para2:target{
  font-weight: bolder;
}
#para3:target{
  font-weight: bolder;
}

效果如下：

伪元素选择器

伪元素选择符可以根据元素中特殊位置选择元素。

结构伪类选择器

结构伪类根据元素所处的位置选择元素，通常用于序列型的元素，如列表。

e:first-child
e:last-child
nth-child(n)

选择列表的第一个元素

格式：

e:first-child（e为列表元素）

示例：选择列表的第一个元素，将其文本样式修改为红色

代码语言：javascript复制

<h1>结构伪类选择器</h1>
  
  <ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
    <li>第五项</li>
    <li>第六项</li>
  </ol>

代码语言：javascript复制

li:first-child{
  color: red;
}

效果如下：

选择列表的最后一个元素

格式：

e:last-child（e为列表元素）

示例：选择列表的最后一个元素，将其文本样式修改为绿色、加粗

代码语言：javascript复制

<h1>结构伪类选择器</h1>
  
  <ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
    <li>第五项</li>
    <li>第六项</li>
  </ol>

代码语言：javascript复制

li:last-child{
  color: green;
  font-weight: bolder;
}

效果如下：

选择列表的指定位置元素

格式：

e:nth-child(n)（e为列表元素，n为数字，即指定的列表项）

示例：选择列表的第四项元素，将其文本样式修改为蓝色、加粗

代码语言：javascript复制

<h1>结构伪类选择器</h1>
  
  <ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
    <li>第四项</li>
    <li>第五项</li>
    <li>第六项</li>
  </ol>

代码语言：javascript复制

li:nth-child(4){
  color: deepskyblue;
  font-weight: bolder;
}

效果如下：

伪元素选择器

伪元素是指元素当中的某一个位置。伪元素选择器可以选择一个位置的元素或者是位置的相对空间

e::first-letter
e::first-line
e::before
e::after

可以选择元素的第一个字符

格式：

e::first-letter（e为列表元素）

示例：选择每一行的第一个字，将其样式增大、加粗

代码语言：javascript复制

<div>
    <h2 class="title" id="title" title>面朝大海，春暖花开</h2>

    <p class="author" id="author">海子</p>
    
    <div class="para1" id="para1">
      <p class="red" id="red1">从明天起，做一个幸福的人</p>
      <p class="red" id="red2">喂马，劈柴，周游世界</p>
      <p class="orange" id="orange1">从明天起，关心粮食和蔬菜</p>
      <p class="orange" id="orange2">我有一所房子，面朝大海，春暖花开</p>
    </div>
    <br>
    <div class="para2" id="para2">
      <p class="yellow" id="yellow1">从明天起，和每一个亲人通信</p>
      <p class="yellow" id="yellow2">告诉他们我的幸福</p>
      <p class="green" id="green1">那幸福的闪电告诉我的</p>
      <p class="green" id="green2">我将告诉每一个人</p>
    </div>
    <br>
    <div class="para3" id="para3">
      <p class="cyan" id="cyan1">给每一条河每一座山取一个温暖的名字</p>
      <p class="cyan" id="cyan2">陌生人，我也为你祝福</p>
      <p class="blue" id="blue1">愿你有一个灿烂的前程</p>
      <p class="blue" id="blue2">愿你有情人终成眷属</p>
      <p class="purple" id="purple1">愿你在尘世获得幸福</p>
      <p class="purple" id="purple2">我只愿面朝大海，春暖花开</p>
    </div>
  </div>

代码语言：javascript复制

p::first-letter{
  font-size: 18px;
  font-weight: bolder;
}

效果如下：

选择元素的首行

格式：

e::first-line（e为列表元素）

示例：选择首行文字，将其样式设置为红色、斜体

代码语言：javascript复制

<div>
    <h1>CSS（层叠样式表）</h1>
    <p>
      层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或<br>
      XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，<br>
      还可以配合各种脚本语言动态地对网页各元素进行格式化。
    </p>
</div>

代码语言：javascript复制

p::first-line{
  color: red;
  font-style: italic;
}

效果如下：

可以选择元素的前面位置添加特殊内容

格式：

e::before（e为列表元素）

示例：在“25岁”前添加“年龄：”字样

代码语言：javascript复制

<div>
    <p id="age">25岁</p>
</div>

代码语言：javascript复制

p#age::before{
  content: "年龄: ";
}

效果如下：

可以选择元素的后面位置添加特殊内容

格式：

e::after（e为列表元素）

示例：在“身高：”后添加内容

代码语言：javascript复制

<div>
    <p id="height">身高：</p>
</div>

代码语言：javascript复制

p#height::after{
  content: "190cm";
}

效果如下：

后记

结束

（也许会再补充…）

class element focus line ui

0 人点赞