关于前端的一些学习记录（8）

最新推荐文章于 2022-07-11 13:53:12 发布

高数摆不了摆代码

最新推荐文章于 2022-07-11 13:53:12 发布

阅读量90

点赞数 2

分类专栏：前端学习文章标签：学习前端 css

本文链接：https://blog.csdn.net/m0_61529679/article/details/123584182

版权

前端学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

接上回文本样式，继续原先的选择器，来一个进阶...

1.后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中的所有子元素。

选择器语法：选择器1 选择器2 {CSS语句}

最终能满足和类选择器一样的效果，注意父子级关系要搭建标准，前后对应！

2.子代选择器：>

作用：根据HTML标签的嵌套关系，只选择某一级的子元素。

选择器语法：选择器1>选择器2 {CSS语句}

3.并集选择器：，

作用：同时选择多组标签，设置成一样的样式。

选择器语法：选择器1 ，选择器2 {CSS语句}

注意：并集选择器中的每组选择器通常一行写一个，提高代码可读性。

4.交集选择器：

作用：选择页面当中同时满足多个选择器的标签。

选择器语法：标签选择器.类选择器 {CSS语法}

效果：选的更精确

5.hover 伪类选择器（任何标签都可加这个选择器）

作用：选中鼠标在元素上的状态，设置样式

选择器语法：选择器： hover {CSS语句}

比如：一个链接平常是灰色的，而当鼠标悬停时变成红色，这个红色就是用hover选择器设置的。

下面放上演示结果，可复制后演示学习：

<!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>Document</title>
    <style>
      div > p > a {
        color: brown;
      }
      a:hover {
        color: rgb(42, 165, 63);
      }
    </style>
  </head>
  <body>
    <div>
      父级
      <p>
        子级1
        <a href="#">子级二</a>
      </p>
    </div>
  </body>
</html>