css中元素的几种选择方式

最新推荐文章于 2023-10-16 14:58:40 发布

咖啡杯里的茶1

最新推荐文章于 2023-10-16 14:58:40 发布

阅读量835

点赞数

分类专栏： # css 文章标签： css 选择方式

本文链接：https://blog.csdn.net/weixin_44600908/article/details/88384665

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

选择方式

通用选择符

通过 * 号可以选择所有的元素，使用通用选择符时一般去去除所有元素的margin和padding默认值

* {
    margin: 0;
    padding: 0;
}

并集选择器

所谓的并集选择是选择的多个属性通过逗号隔开，此时所选择的元素样式都会被改变

h1, h2, p {
    color : red;
}

比如上面的样式中h1,h2与p标签都会被选择出来其颜色被改为red

后代选择器

通用后代选择器

后代选择是通过空格来选择后代选择器，比如下面的样式

ul li {
    text-align:center;
}

这是先选择了ul标签，然后选择ul标签里面的li来改变其样式。通过这种后代选择器其后代不一定是要其直接后代。

直接子选择器

这种直接选择器使用的符号是 标签1>标签2，也即是标签2必须是标签1的直接子元素才可以。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .top>p {
            color: red;
        }
        /*.top p {
            color: green;
        }*/
    </style>
</head>
<body>
<div class="top">
    <p>这是外部p</p>
    <div class="inner">
        <p class="in">这是内部p</p>
    </div>
</div>
</body>
</html>

在上面的例子中外部的p是class为top的div的直接子元素所以.top>p选择的就是外部的p，内部的p不会被选择，而.top p则是两个p标签都会被选择，因为这是通用的后代选择器，由于两个p都是在class为top的div里面，所以都是会被选择。

兄弟选择器

紧邻兄弟选择器

通过选择符符 + 来选择，即是 标签1+标签2。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p + .inner {
            color: red;
        }
    </style>
</head>
<body>
<div class="top">
    <p>这是外部p</p>
    <div class="inner">
        <p class="in">这是内部p</p>
    </div>
</div>
</body>
</html>

比如上面的例子中使用 p + .inner选择的就是内部的div，如果是使用p + .in则该选择器无效，因为外部的p标签的兄弟只有内部的div，而内部的p标签没有兄弟标签。

一般兄弟选择器

使用语法是 标签1 ~ 标签2，标签2必须是与标签1处在同一级，但是不一定是需要刚好就挨着标签1，中间可以隔着其余的兄弟标签。

交集选择器

并集选择器是选择的标签直接连接起来即可(中间没有空格)

div.top {
    color:green;
}

比如上面的例子中就是通过交集选择选出了div标签中class属性为top的标签，就是类似下面这样的div标签

<div class="top">这里用的的交集选择器</div>

咖啡杯里的茶1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中元素的几种选择方式

选择方式通用选择符通过 * 号可以选择所有的元素，使用通用选择符时一般去去除所有元素的margin和padding默认值* { margin: 0; padding: 0;}并集选择器所谓的并集选择是选择的多个属性通过逗号隔开，此时所选择的元素样式都会被改变h1, h2, p { color : red;}比如上面的样式中h1,h2与p标签都会被选择出...
复制链接

扫一扫