css进阶-选择器

最新推荐文章于 2024-06-14 14:36:26 发布

小袁拒绝摆烂

最新推荐文章于 2024-06-14 14:36:26 发布

阅读量54

点赞数

分类专栏： # html+css+js 文章标签： css 前端 html

本文链接：https://blog.csdn.net/y_k_j_c/article/details/129713319

版权

html+css+js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

进阶选择器

后代选择器

在这里插入图片描述
注意：用空格隔开
是div内所有的p标签都生效
不管它有多深

  <style>
    div p{
    color:red;
    }
  </style>

<body>
<p>后代选择器，单独的p</p>
<div>
  <p>
    div中的p标签经过后代选择器的渲染变红
  </p>
</div>
</body>

效果
在这里插入图片描述

子代选择器

在这里插入图片描述
用大于号隔开

<style>
    div > p{
    color:red;
    }
  </style>

<body>
<p>后代选择器，单独的p</p>
<div>
  <p>
    div中的p标签经过后代选择器的渲染变红
  </p>
    <a>
        <p>
            子代选择器效果只到子代，就是只有div包含
        </p>
    </a>
</div>
</body>

在这里插入图片描述

也就是只有div的下一级标签的p标签生效

并集选择器

就是同时选择多组标签设置一样的样式
在这里插入图片描述

  <style>
    p,div > p{
    color:red;
    }
  </style>

<body>
<p>后代选择器，单独的p</p>
<div>
  <p>
    div中的p标签经过后代选择器的渲染变红
  </p>
    <a>
        <p>
            子代选择器效果只到子代，就是只有div包含
        </p>
    </a>
</div>
</body>

在这里插入图片描述
可以发现p标签个div内的p标签都变红了，所以它们是同时生效
可以弄多个选择器
选择器1,选择器2,选择器3,…{
}

交集选择器

好像是只能
选择器选择器{
}
同时满足两个选择器的标签才会生效

  <style>
    p.box{
    color:red;
    }
  </style>

<body>
  <p>单独的p标签</p>
<span class="box">单独的span标签，类是box</span>
<p class="box">满足类为box的p标签才会被交集选择器选中生效</p>
</body>

在这里插入图片描述

hover伪类选择器

在这里插入图片描述

  <style>
    a:hover{
    background-color:red;
    }
  </style>

<a href="#">这是超链接，鼠标悬停在上面背景会变红色</a>

在这里插入图片描述
看不见鼠标悬停因为我要截图，不过截图的状态是鼠标悬停时的状态

小袁拒绝摆烂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css进阶-选择器

注意：用空格隔开是div内所有的p标签都生效不管它有多深div pcolor;
复制链接

扫一扫

专栏目录

css进阶-选择器

进阶选择器

后代选择器

子代选择器

并集选择器

交集选择器

hover伪类选择器

“相关推荐”对你有帮助么？