CSS复合选择器

最新推荐文章于 2022-02-03 17:54:49 发布

溯琳

最新推荐文章于 2022-02-03 17:54:49 发布

阅读量140

点赞数 3

分类专栏： web #css选择器文章标签： html css

本文链接：https://blog.csdn.net/m0_56787796/article/details/115561186

版权

web 同时被 2 个专栏收录

23 篇文章 1 订阅

订阅专栏

#css选择器

3 篇文章 0 订阅

订阅专栏

CSS复合选择器

后代选择器
子代选择器
并集选择器
伪类选择器
- 链接伪类选择器
- :focus 伪类选择器

后代选择器

<!DOCTYPE html>
<html lang="en">
  <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>后代选择器</title>
    <style>
      /* 包含在ol里的都可以 */
      ol li {
        color: red;
      }
      ol a {
        color: royalblue;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>我是ol的孩子</li>
      <li>我是ol的孩子</li>
      <li>我是ol的孩子</li>
      <a href="#">我是a</a>
    </ol>
    <ul>
      <li>我是ul的孩子</li>
      <li>我是ul的孩子</li>
      <li>我是ul的孩子</li>
    </ul>
  </body>
</html>

后代选择器

子代选择器

<!DOCTYPE html>
<html lang="en">
  <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>子代选择器</title>
    <style>
      /* 选出的是亲儿子 */
      div > a {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <a href="#">儿子</a>
      <p>
        <a href="#">孙子</a>
      </p>
    </div>
  </body>
</html>

子代选择器

并集选择器

<!DOCTYPE html>
<html lang="en">
  <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>并集选择器</title>
    <style>
      /* 将溯琳和琳玉变红 */
      /* div,
      p {
        color: red;
      } */
      /* 全部变成红色 */
      div,
      p,
      .pin li {
        color: red;
      }
      /* 并集选择器一般竖着写 */
    </style>
  </head>
  <body>
    <div>溯琳</div>
    <p>琳玉</p>
    <span>溯鱼</span>
    <ul class="pin">
      <li>小溯琳</li>
      <li>小琳玉</li>
      <li>小溯鱼</li>
    </ul>
  </body>
</html>

并集选择器

伪类选择器

链接伪类选择器

<!DOCTYPE html>
<html lang="en">
  <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>链接伪类选择器</title>
    <style>
      /* a:link      选择所有未被访问的链接
         a:visited   选择所有已被访问的链接
         a:hover     选择鼠标指针位于其上的链接
         a:active    选择活动链接(鼠标按下未弹起的链接)
         按照顺序写
         */
      a {
        text-decoration: none;
      }
      a:link {
        color: red;
      }
      a:visited {
        color: green;
      }
      a:hover {
        color: blue;
      }
      a:active {
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <a href="#">溯琳</a>
  </body>
</html>

a:link 前
伪类1
a:visited 后
伪类2
a:hover 划入
伪类3
a:active 点击不松
伪类4

:focus 伪类选择器

<!DOCTYPE html>
<html lang="en">
  <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>:focus 伪类选择器</title>
    <style>
      /* 
      :focus 伪类选择器用于选取获得焦点的表单元素
      一般只用于input元素
         */
      input:focus {
        background: red;
      }
    </style>
  </head>
  <body>
    <input type="text" />
    <input type="text" />
    <input type="text" />
  </body>
</html>