2021-06-13 CSS复合选择器-CSDN博客

本文链接：https://blog.csdn.net/qq_36141958/article/details/117859236

这篇博客详细介绍了CSS中的各种选择器，包括后代选择器、子选择器、类选择器、伪类选择器以及并集选择器，并通过实例展示了它们在网页样式控制中的应用。内容涵盖了颜色、链接状态、焦点元素的样式设置，帮助理解CSS选择器的工作原理和实践技巧。

摘要由CSDN通过智能技术生成

CSS复合选择器

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      ul li {
        color: red;
      }
      /* 后代选择器，有多个同样的标签时可以选择其子标签，用空格隔开每个标签名，
      格式 父标签 子标签 子标签 ... */
      ol li a {
        color: green;
      }
      .test li a {
        color: yellow;
      }
      /* 当有同样标签名的标签时，不适用使用标签名，使用类名代替父标签选择子标签，
      格式 .类名 子标签 子标签 ... */

      div > a {
        color: red;
      }
      /* 子选择器，只选择距离父标签最近的子标签，其他深度标签不算，用>隔开 */

      p,
      span,
      .test1 p {
        color: blueviolet;
      }
      /* 并集选择器，同时选择多个标签，其中可以含其他选择器，每个标签用,隔开，
      最后一个标签不需要, */

      a:link {
        color: #333;
        text-decoration: none;
      }
      /* 伪类选择器，用于向某些选择器添加特殊的效果，用:隔开，链接伪类选择器
      需要按照LVHA顺序声明：link visited hover active
      未浏览过的超链接用黑色显示 */
      a:visited {
        color: red;
      }
      /* 已经浏览过的超链接显示为红色 */
      a:hover {
        color: skyblue;
      }
      /* 鼠标经过超链接时用天蓝色显示 */
      a:active {
        color: yellow;
      }
      /* 当鼠标在超链接按下未弹起时用黄色显示 */

      input:focus {
        background-color: yellow;
      }
      /* :focus 伪类选择器，用于选取获得鼠标焦点的表单元素，一般<input>类表单元素
      才能获取，主要针对表单元素使用
      当表单元素文本框被鼠标选中时，设置背景色为黄色 */
    </style>
  </head>
  <body>
    <ul>
      <li>后代选择器1</li>
      <li>后代选择器2</li>
      <li>后代选择器3</li>
    </ul>
    <ol>
      <li>干扰1</li>
      <li>干扰2 <a href="#">练习</a></li>
    </ol>
    <ol class="test">
      <li>测试1</li>
      <li>测试2</li>
      <li>测试3 <a href="#">ceshi</a></li>
    </ol>
    <div>
      <a href="#">子</a>
      <p><a href="#">孙</a></p>
    </div>
    <p>123</p>
    <span>1234</span>
    <div class="test1">
      <p>234</p>
    </div>
    <a href="#">小猪佩奇</a>
    <input type="text" /><input type="text" /><input type="text" />
  </body>
</html>