css选择器

TwTang_

已于 2024-12-05 21:11:52 修改

阅读量1.8k

点赞数 65

文章标签： css html5

于 2024-12-05 21:09:26 首次发布

本文链接：https://blog.youkuaiyun.com/TwTang_/article/details/144255324

版权

css

css选择器
css复合选择器

css选择器

一、通配符选择器

定义：用于选择页面中的所有标签

语法：

 *{
            属性：值；
        }

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a.html</title>
    <style type="text/css">
      * {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>
      女排赛后想起了《阳光总在风雨后》
    </h1>
    <p>催泪！；郎平赛后与女排姑娘逐个拥抱</p>
    <p>东京奥运会催泪一幕！郎平谢幕！女排姑娘哭成一片！</p>
    <ul>
      <li>
        女排赛后想起来阳光总在风雨后
      </li>
    </ul>
    <ol>
      <li>8月2日，中国女排</li>
    </ol>
  </body>
</html>

效果：

在这里插入图片描述

二、标签选择器

定义：是通过标签名进行选择，以便于设置样式的选择器

语法：

 标签名 {
        属性:值;
      }

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a.html</title>
    <style type="text/css">
      em {
        color:  red;
      }
    </style>
  </head>
  <body>
    <p>
      催泪！郎平<em>赛后</em>与<em>女排</em>姑娘逐个拥抱现场<em>响起</em>《<em>阳光总在风雨后</em>》
    </p>
  </body>
</html>

效果：

在这里插入图片描述

三、id选择器

定义：是对html标签的id属性进行选择，设置样式的选择器具有唯一性

语法：

<!--


HTML标签中添加id属性：<标签名 id="id名"></标签名>
CSS中选择设置样式：#id名 { 属性:值；....  }


标签中添加id属性，唯一标识
“id名”遵循语法规范：
1. 只能是字母、数字、下划线（_）、连字符（-）
2. 只能以字母开头
3. 严格区分大小写
4. 最好见名知义(不要瞎起名，虽然可以瞎起名)
5. id选择器以  #  为前缀 

-->

代码：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a.html</title>
    <style type="text/css">
      #first {
        color: red;
      }
    </style>
  </head>

  <body>
    <ul>
      <li id="first">我是一个兵 | 老兵永远跟党走</li>
      <li>铭记光辉历史 续写强军新篇</li>
      <li>国际社会密集发声</li>
      <li>李雯雯多的举重女子冠军金牌</li>
    </ul>
  </body>

</html>

效果：

在这里插入图片描述

问题：
需求：我现在也想让“ 第29金！李雯雯夺得举重女子87公斤以上级金牌专题” 变红色怎么办？
解决方案：id选择器一个个设置，低效怎么办？一个页面id名不能重复

四、类选择器

定义：也称class选择器，是对html标签的属性进行选择，设置样式的选择器

语法：

HTML标签引用：
<标签1 class="类名"></标签1>
CSS中定义：     
.类名{属性:值；....  }

注意点：
1. 以 "." （点）开头
2. 命名规范与ID名一致

代码：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a.html</title>
    <style type="text/css">
      .change-color {
        color: red;
      }
    </style>
  </head>

  <body>
    <ul>
      <li class="change-color">我是一个兵 | 老兵永远跟党走</li>
      <li>铭记光辉历史 续写强军新篇</li>
      <li>国际社会密集发声</li>
      <li class="change-color">李雯雯夺得举重女子冠军金牌</li>
    </ul>
  </body>

</html>

效果：

在这里插入图片描述

五、基本选择器总结

在这里插入图片描述

六、选择器的优先级

id选择器 > 类选择器 > 标签选择器 > 全局选择器

代码：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>a.html</title>
    <style type="text/css">
      * {
        color:  red;
      }
      p {
        color:blue;
      }
      .change-color {
        color:  orange;
      }
      #update-color {
        color: green;
      }
    </style>
  </head>

  <body>
    <p class="change-color" id="update-color">最编程，创未来！</p>
    <!-- 

    id选择器 > class选择器 > 标签选择器 > 通配符选择器
    -->
  </body>

</html>

css复合选择器

一、交集选择器

定义：是由多个选择器直接连接构成的，其结果是选中俩个各自作用范围的交集

并集：把A与B合并在一起组成的集合
交集：由所有属于集合A且属于集合B的元素所组成的集合

语法：

tagName.className {
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 必须是p标签且class为box的颜色为红色 */
      p.box{
          color: red;
      }
    </style>
</head>

<body>
    <div class="box">hello</div>
    <p class="box">hi</p>
</body>

</html

效果：

在这里插入图片描述

二、多个选择器

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p.box#zh{
        color: red;
    }
    </style>
</head>

<body>
    <div class="box">hello</div>
    <p class="box">hi</p>
    <p class="box" id="zh">你好</p>
</body>

</html>

效果：

在这里插入图片描述

.box后面添加id选择器是没有意义的因为id选择器本身就是唯一的，在html中使用的时候我们完全可以直接把p标签上面的box类去掉，只留下id="zh"更为简洁

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p.box#zh{
        color: red;
    }
    #zh {
      color:red;
    }
    </style>
</head>

<body>
    <div class="box">hello</div>
    <p class="box">hi</p>
    <p  id="zh">你好</p>
</body>

</html>

效果：

在这里插入图片描述

还有就是你把p.box#zh中的#zh换成新的class类名同样没有意义，单单增加了CSS选择器的复杂度

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    p.box.box1{
        color: red;
    }
   
    </style>
</head>

<body>
    <div class="box">hello</div>
    <p class="box">hi</p>
    <p class="box box1">你好</p>
</body>

</html>

效果：

在这里插入图片描述

你需要“你好”颜色为红色，直接写一个box1不是更加简洁么？

注意：
1、标签选择器必须写在最前面
2、标签选择器只能有一个，不可能即是p标签又是div标签

三、并集选择器

定义：对多个选择器进行集体声明，多个选择器之间用逗号隔开每一个选择器可以是任何类型的选择器，是或者的关系

语法：

.className,.className... {
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box1{
      color: red;
    }
    .box2 {
      color: orange;
    }
    .box3 {
      color: hotpink;
    }
    .box1, .box2, .box3 {
      width: 300px;
      background: lightgray;
      margin: 10px 0;
    }
    </style>
</head>

<body>
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <div class="box3">盒子3</div>
</body>

</html>

效果：

在这里插入图片描述

除了使用class作为并集选择器，标签，id等等任何形式的选择器也都可以作为并集选择器使用

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box1{
      color: red;
    }
    .box2 {
      color: orange;
    }
    .box3 {
      color: hotpink;
    }
    .box1, .box2, .box3, p, #box5 {
      width: 300px;
      background: lightgray;
      margin: 10px 0;
    }
    </style>
</head>

<body>
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <div class="box3">盒子3</div>
    <p>盒子4</p>
    <div id="box5">盒子5</div>
</body>

</html>

效果：

在这里插入图片描述

四、标签之间的关系

4.1父子关系

<div><!-- 父标签 -->
  <ul></ul><!-- 子标签 -->
</div>

4.2父子孙关系

<div><!-- 父标签 -->
  <ul><!-- 子标签 -->
    <li></li><!-- 相对于div来说是孙子标签；相对于ul来说是子标签 -->
  </ul>
</div>

4.3兄弟关系

<div></div>
<p></p>
<!-- div和p标签就是兄弟的关系 -->

4.4后代关系

<div><!-- 相对于div来说ul、li、span都是div的后代标签 -->
  <ul><!-- 相对于ul来说li、span都是ul的后代标签 -->
    <li><!-- 相对于li来说span是li的后代标签当然span也是li的字标签同时也是ul的孙子标签 -->
      <span></span>
    </li>
  </ul>
</div>

五、后代选择器

5.1基本用法

语法：

选择器1 选择器1中的选择器2 选择器1中的选择器2中的选择器3 ... {} /* 什么选择器里面的什么选择器... */

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul li {
      color: red;
    }
    ol li {
      color: orange;
    }
  </style>
</head>
<body>
  <ul>
    <li>乐迪</li>
    <li>小爱</li>
    <li>多多</li>
  </ul>
  <hr />
  <ol>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li>
  </ol>
</body>
</html>

效果：

在这里插入图片描述

5.2多级后代

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul li {
      color: red;
    }
    ol li {
      color: orange;
    }
  </style>
</head>
<body>
  <ul>
    <li>乐迪</li>
    <li>小爱</li>
    <li>多多</li>
    <div>
      <li>金小子</li>
    </div>
  </ul>
  <hr />
  <ol>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li>
  </ol>
</body>
</html>

效果：

在这里插入图片描述

后代选择器可以写很多层级

5.3类名后代

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul li a {
      color: red;
    }
    ol li a {
      color: orange;
    }
    .subject li {
      color:blue;
    }
  </style>
</head>
<body>
  <ul>
    <li>乐迪</li>
    <li>小爱</li>
    <li>多多</li>
   
  </ul>
  <hr />
  <ol>
    <li>熊大</li>
    <li>熊二</li>
    <li>光头强</li>
  </ol>
  <ol class="subject">
    <li>html5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
  </ol>
</body>
</html>

效果：

在这里插入图片描述

除了类名、标签、当然id选择器也是可以的，可以灵活的把各种选择器混合使用

5.4混合使用

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .subject li {
      color:blue;
    }
    .subject li.html {
      color:skyblue;
    }
  </style>
</head>
<body>
  <ol class="subject">
    <li class="html">html5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
  </ol>
</body>
</html>

效果：

在这里插入图片描述

当然也可以和并集选择器组合使用，你就灵活组合使用就好

5.5注意

p标签不能嵌套h标题标签（不能违反嵌套原则）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p h2 {
      color: red;
    }
  </style>
</head>
<body>
  
  <p>
    <h1>hello</h1>
  </p>
</body>
</html>

效果：

六、子代选择器

语法：

选择器>选择器 { <!-- >代表的仅仅是儿子选择器 -->
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div>a {
      color: red;
    }
  </style>
</head>
<body>
  <div>
    <a href="">熊大</a>
    <a href="">熊二</a>
    <a href="">熊三</a>
    <p>
      <a href="">光头强</a>
    </p>
  </div>
</body>
</html>

效果：

在这里插入图片描述

七、相邻兄弟选择器

语法：

选择器+选择器 { <!-- +代表仅仅相邻的兄弟元素 并且只向下看 -->
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   div+p {
    color: red;
   }
  </style>
</head>
<body>
  <div>鸿蒙开发</div>
  <p>html5</p>
  <p>CSS3</p>
</body>
</html>

效果：

在这里插入图片描述

只向下看

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div+p {
        color: red;
    }
    </style>
</head>

<body>
    <p>html5</p>
    <div>鸿蒙开发</div>
    <p>CSS3</p>
</body>

</html>

在这里插入图片描述

仅仅相邻

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div+p { /* +代表的是兄弟、向下、仅仅相邻 */
        color: red;
    }
    </style>
</head>

<body>
    <p>html5</p>
    <div>鸿蒙开发</div>
    <h3>JavaScript</h3>
    <p>CSS3</p>
</body>

</html>

在这里插入图片描述

八、所有兄弟选择器

语法：

选择器~选择器 { <!-- ~代表所有兄弟元素并且只向下看 -->
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div~p {
        color: red;
    }
    </style>
</head>

<body>
    <p>html5</p>
    <div>鸿蒙开发</div>
    <h3>JavaScript</h3>
    <p>CSS3</p>
    <p>Vue</p>
</body>

</html>

效果：

在这里插入图片描述

九、属性选择器

语法：

[属性] { /* 选中具有该属性的元素 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    [title] { /* 选中标签上具有title属性的标签 */
      color: orange;
    }
    </style>
</head>

<body>
   <div title="zuibiancheng">最编程1</div>
   <div>最编程2</div>
   <div>最编程3</div>
</body>

</html>

效果：

在这里插入图片描述

十、属性&值选择器

10.1基本用法

语法：

[属性="值"] { /* 选中具有该属性和该值的标签 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    [title="zuibiancheng"] {
      color: orange;
    }
    </style>
</head>

<body>
   <div title="zuibiancheng">最编程1</div>
   <div title="zuibiancheng1">最编程2</div>
   <div>最编程3</div>
</body>

</html>

效果：

在这里插入图片描述

10.2以什么开头的属性值^

语法：

[属性^="值"] { /* 选中具有该属性且以什么开头的属性值的标签 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    [title^="z"] {
      color: orange;
    }
    </style>
</head>

<body>
   <div title="zuibiancheng">最编程1</div>
   <div title="zuibiancheng1">最编程2</div>
   <div title="biancheng">最编程3</div>
</body>

</html>

效果：

在这里插入图片描述

10.3以什么结尾的属性值$

语法：

[属性$="值"] { /* 选中具有该属性且以什么结尾的属性值的元素 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    [title$="1"] {
      color: orange;
    }
    </style>
</head>

<body>
   <div title="zuibiancheng">最编程1</div>
   <div title="zuibiancheng1">最编程2</div>
   <div title="biancheng">最编程3</div>
</body>

</html>

效果：

在这里插入图片描述

10.4属性值只要有*就行

语法：

[属性*="值"] { /* 选中具有该属性且属性值中包含某个值的元素 */
  property: value;
}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    [title*="b"] {
      color: orange;
    }
    </style>
</head>

<body>
   <div title="zuibiancheng">最编程1</div>
   <div title="zuibiancheng1">最编程2</div>
   <div title="biancheng">最编程3</div>
</body>

</html>

效果：

在这里插入图片描述

十一、has伪类选择器

定义：CSS 的:has选择器可帮助您选择包含与您传递给:has()函数的选择器匹配的元素的元素。

:has 伪类在 CSS 中是相对较新的功能，可能不被所有浏览器支持。在使用之前，建议检查浏览器的兼容性。
:has 伪类不能与 * 选择器一起使用，它只能与类型选择器（如 div、span 等）或类选择器一起使用。

语法：

:has(<relative-selector-list>) {
  /* ... */
}

11.1 与兄弟选择器使用

语法：

h1:has(+ h2) { /* 选择h2元素的相邻的前一个h1的兄弟元素 */ 
 background: red;
 }

代码：

<section>
  <article>
      <h1>狗熊岭</h1>
      <p>
          狗熊岭是《熊出没》中的丛林，位于东北地区的大兴安岭中，常驻角色有熊大、熊二、光头强、蹦蹦、吉吉、毛毛、萝卜头、涂涂等；狗熊岭有白熊山、蝴蝶山洞等著名地点，此外，狗熊岭附近有不夜城、狂野大陆和振兴岛等
      </p>
  </article>
  <article>
      <h1>狗熊岭遇险</h1>
      <h2>《熊出没》中的丛林，东北地区的大兴安岭中，有一座狗熊岭</h2>
  </article>
</section>

效果：

在这里插入图片描述

11.2与子代选择器使用

代码：

img {
  width: 100px;
}

a:has(>img) {
  display: block;
}

<a href="">狗熊岭</a>
<a href="">
  <img src="imgs/weixin.png" alt="">
</a>
<a href="">
  <img src="imgs/2.webp" alt="">
</a>

效果：

在这里插入图片描述

display:block;生效，独占一行

匹配子元素是元素的元素会被匹配，而关系更远的后代元素则不考虑

代码：

img {
  width: 100px;
}

a:has(>img) {
  display: block;
}

<a href="">狗熊岭</a>
<a href="">
  <img src="imgs/weixin.png" alt="">
</a>
<a href="">
  <img src="imgs/2.webp" alt="">
</a>
<a href="">
  <span>
      <img src="imgs/1.webp" alt="">
  </span>
</a>
<span>hello</span>

效果：

在这里插入图片描述

span中的hello和最后一张图在一行证明他们是行内元素
注意上面代码中 :has 伪类的参数，选择符>直接写在了参数的最前面，而不是 a:has(a > img) 这样的写法。你可以理解为 :has() 伪类的参数的最前面有一个看不见的 :scope伪类，因此，a:has(a > img)这样的写法是不合法的。

11.3与后代选择器使用

要想选中后代img中的a标签，我们可以这么改

代码：

 img {
  width: 100px;
}

a:has(img) {
  display: block;
}

<a href="">狗熊岭</a>
<a href="">
    <img src="imgs/weixin.png" alt="">
</a>
<a href="">
    <img src="imgs/2.webp" alt="">
</a>
<a href="">
    <p>
        <img src="imgs/1.webp" alt="">
    </p>
</a>
<span>hello</span>

效果：

在这里插入图片描述

11.4复杂选择器

代码：

article:has(h1) { 
 color: red;
 }

<article>
  <h1>狗熊岭</h1>
  <h2>有点漂亮</h2>
  <p>熊大</p>
</article>

效果：

在这里插入图片描述

11.5其他伪类混用

:has()伪类还可以和其他伪类混用，例如 :checked、:enabled 等，甚至还可以和其他逻辑伪类混用

代码：

section:not(:has(h1)) { 
 color: red;
 }

<section>
  <h1>狗熊岭</h1>
</section>
<section>
  <h2>真美丽</h2>
</section>

效果：

在这里插入图片描述

选择器表示没有包含< h1 >元素的< section >元素有内容是红色

代码：

section:has(:not(h1)) { 
 color: deepskyblue;
 }

<section>
  <h1>狗熊岭</h1>
</section>
<section>
  <h2>真美丽</h2>
</section>

效果：

在这里插入图片描述

十二、动态伪类

12.1基本使用

需求：访问过的超链接是灰色，没访问过的超链接是橙色

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* link默认状态 */
      a:link {
        color: orange;
      }
      /* 被访问过的状态 */
      a:visited {
        color: gray;
      }
    </style>
</head>

<body>
   <a href="https://www.baidu.com" target="_blank">去百度</a>
   <a href="https://www.xiaomi.com" target="_blank">去小米</a>
</body>

</html>

效果：

在这里插入图片描述

12.2注意

超链接一般四种状态，书写的时候要注意顺序，否则的话有的效果就会失效了

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* L(link默认的)V(visited访问过的)H(hover鼠标悬浮)A(active点击瞬间的)*/
      a:link {
        color: orange;
      }
      a:visited {
        color: gray;
      }
      /*  悬浮状态 */
      a:hover {
        color:skyblue;

      }
      /* 点击时候的状态 */
      a:active {
        color: red;
      }
    </style>
</head>

<body>
   <a href="https://www.baidu.com" target="_blank">去百度</a>
   <a href="https://www.xiaomi.com" target="_blank">去小米</a>
</body>

</html>

在这里插入图片描述

link和vistited是a标签独有的状态
hover和active是所有标签都具备的状态

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      p:link, a:link {
        color: orange;
      }
      p:visited, a:visited {
        color: gray;
      }
      p:hover, a:hover {
        color:skyblue;

      }
      p:active, a:active {
        color: red;
      }
    </style>
</head>

<body>
   <a href="https://www.baidu.com" target="_blank">去百度</a>
   <a href="https://www.xiaomi.com" target="_blank">去小米</a>
   <p>hello</p>
</body>

</html>

效果：

在这里插入图片描述

12.3扩展focus

focus获取焦点伪类

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     input:focus {
      color: orange;
      background: gray;
     }
    </style>
</head>

<body>
  <input type="text"><br>
  <input type="text">
</body>

</html>