css选择器

最新推荐文章于 2024-09-23 09:20:50 发布

长安古意

最新推荐文章于 2024-09-23 09:20:50 发布

阅读量263

点赞数

分类专栏： css基础

本文链接：https://blog.youkuaiyun.com/aiyishengyishi/article/details/54895124

版权

css基础专栏收录该内容

3 篇文章

订阅专栏

css选择器分为以下几类：
元素选择器、关系选择器、属性选择器、伪类选择器、伪元素选择器，类选择器，ID选择器

一.元素选择器

最常见的css选择器就是元素选择器，平时构建html页面用到的p、h1、div等元素选择器

p{
    font-size:15px;
}
div{
    color:#e0e0e0;
}

这里写图片描述

二.关系选择器

关系选择器包括后代选择器，子元素选择器，相邻兄弟选择器
1.后代选择器

//意味着被class名为part1的元素包裹着的所有span元素的字体颜色设置为红色
.part1 span{
    color:red;
}
<div class="part1">
    sdsdsdsd
    <span>make a world</span>
    <div>
        我不会变红
        <span>i want to make a world</span>
    </div>
</div>
<div>
    sdsdsdsd
    <span>make a world</span>
    <div>
        我不会变红
        <span>i want to make a world</span>
    </div>
</div>

这里写图片描述
2.子元素选择器

//只有class名为part1的子元素span标签的字体颜色被设置
.part1 span{
    color:red;
}
<div class="part1">
    sdsdsdsd
    <span>make a world</span>
    <div>
        我不会变红
        <span>i want to make a world</span>
    </div>
</div>
<div>
    sdsdsdsd
    <span>make a world</span>
    <div>
        我不会变红
        <span>i want to make a world</span>
    </div>
</div>

这里写图片描述
3.相邻兄弟选择器

//h1的相邻元素上边距设置为5px
h1 + p {
    margin-top:50px;
}
<body>
    <h1>This is a heading.</h1>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
</body>

这里写图片描述

三.属性选择器

这里写图片描述
注：图片来自w3cschool官网，详细内容如下：http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp

<style type="text/css">
[userId="2"]{
    color:red;
}
</style>

这里写图片描述

四.伪类选择器和伪元素选择器

伪类选择器和伪元素选择器

五.选择器优先级

优先级由上往下
！important（权重：10000）
直接在标签内设置样式（权重：1000） <span style="color:red;"></span>
ID选择器（权重：0100）
类选择器和伪类选择器（权重：0010）
元素选择器和伪元素选择器（权重：0001）
通配选择器*对特殊性没有贡献（权重：0000）

子元素选择器优先级（权重+权重）.firstDiv p{}的值为（10+1=11）