CSS3选择器及优先级

最新推荐文章于 2023-08-04 16:23:59 发布
最新推荐文章于 2023-08-04 16:23:59 发布
阅读量782 收藏 1
点赞数
分类专栏： CSS 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiji333/article/details/111280218
版权

文章目录

1.简单选择器

1.1元素选择器

  根据标签名来选中指定的元素，如下面的 p 、 h 2 p、h2 p、h2，语法就是：标签名 { } \{\} {}。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            p{
                color: blueviolet;
                font-size: 15px;
            }
            h2{
                color:coral;
            }
        </style>
    </head>
    <body>
        <h1>我是h1标题</h1>
        <h2>我是h2标题</h2>
        <p>我是一个段落</p>
        <p>我是第二个段落</p>
    </body>
</html>

在这里插入图片描述

1.2id选择器

  根据元素的 i d id id属性值选中某个元素。注意是某个，而不是多个，因为根据规范，元素 i d id id属性的值应该是唯一的。语法： # i d \#id #id属性值 { } \{\} {}。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            p{
                color: blueviolet;
                font-size: 15px;
            }
            h2{
                color:coral;
            }
            #red{
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>我是h1标题</h1>
        <h2>我是h2标题</h2>
        <p id="red">我是一个段落</p>
        <p>我是第二个段落</p>
    </body>
</html>

在这里插入图片描述
  如果想选中多个的话，可以使用接下来介绍的类选择器。

1.3类选择器

   c l a s s class class是一个标签的属性，他和 i d id id类似，但是值可以重复。类选择器就是根据 c l a s s class class的值选择一组元素。语法： . c l a s s .class .class属性值 { } \{\} {}。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            p{
                color: blueviolet;
                font-size: 15px;
            }
            h2{
                color:coral;
            }
            #red{
                color: red;
            }
            .blue{
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>我是h1标题</h1>
        <h2>我是h2标题</h2>
        <p id="red">我是一个段落</p>
        <p class="blue">我是第二个段落</p>
        <p class="blue">我是第三个段落</p>
        <p>我是第四个段落</p>
    </body>
</html>

在这里插入图片描述

  而且 h t m l html html元素的 c l a s s class class属性值可以同时有多个：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            p{
                color: blueviolet;
                font-size: 15px;
            }
            h2{
                color:coral;
            }
            #red{
                color: red;
            }
            .blue{
                color: blue;
            }
            .yellow{
                color: yellow;
            }
        </style>
    </head>
    <body>
        <h1>我是h1标题</h1>
        <h2>我是h2标题</h2>
        <p id="red">我是一个段落</p>
        <p class="blue">我是第二个段落</p>
        <p class="blue">我是第三个段落</p>
        <p class="blue yellow">我是第四个段落</p>
    </body>
</html>

在这里插入图片描述

  比如上面的第 4 4 4个段落，它有两个 c l a s s class class，且后面类也就是 y e l l o w yellow yellow会覆盖掉之前类也就是 b l u e blue blue。

1.4通配选择器

  可以选择页面内的所有元素。语法： ∗ { } ^*\{\} ∗{}。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            /* p{
                color: blueviolet;
                font-size: 15px;
            }
            h2{
                color:coral;
            }
            #red{
                color: red;
            }
            .blue{
                color: blue;
            }
            .yellow{
                color: yellow;
            } */
            *{
                color: green;
            }
        </style>
    </head>
    <body>
        <h1>我是h1标题</h1>
        <h2>我是h2标题</h2>
        <p id="red">我是一个段落</p>
        <p class="blue">我是第二个段落</p>
        <p class="blue">我是第三个段落</p>
        <p class="blue yellow">我是第四个段落</p>
    </body>
</html>

在这里插入图片描述
  这里要把前面的部分注释掉才能显示出这个效果。原因是不同的选择器的优先级是不同的。我们稍后会讲到。
   A   ∗ A\ ^* A ∗会选中 A A A元素的所有子元素：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            div *{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>
            我是一个div 我有子元素
            <p>11111</p>
            <p>222222</p>
            <p>
                333333
                <ul>
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                </ul>
            </p>
            <p>444444</p>
        </div>
        <div>我是一个div 我没有子元素</div>
    </body>
</html>

在这里插入图片描述

2.复合选择器

2.1交集选择器

  如果我想要把 c l a s s class class为 r e d red red的 d i v div div元素的字体颜色设置为红色，该怎么写呢？之前介绍的简单选择器已经不能满足我们的需求了。我们需要交集选择器，它可以选择出满足所有条件的元素。语法： 选择器1选择器2选择器3…… { } \{\} {}。不过需要注意一点，如果使用了元素选择器的话，需要以它为开头。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            div.red{
                color:red;
            }
            .a.b.c{
                color:blue;
            }
        </style>
    </head>
    <body>
        <h1>我是h1标题</h1>
        <h2>我是h2标题</h2>
        <p>我是一个段落</p>
        <div class="red">我是div</div>
        <p class="a">我是a</p>
        <p class="a b c">我既是a 也是b 还是c</p>
    </body>
</html>

在这里插入图片描述

2.2并集选择器

  如果我想把所有的 p 、 d i v p、div p、div元素的样式设置成一样的，该怎么办呢？可以使用并集选择器，它会选中多个选择器对应的元素。语法： 选择器1,选择器2,…… { } \{\} {}。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            div,p{
                color:red;
            }
        </style>
    </head>
    <body>
        <h1>我是h1标题</h1>
        <h2>我是h2标题</h2>
        <p>我是一个段落</p>
        <div class="red">我是div</div>
        <p class="a">我是a</p>
        <p class="a b c">我既是a 也是b 还是c</p>
    </body>
</html>

在这里插入图片描述

3.关系选择器

  首先了解一下 h t m l html html中的元素关系：
在这里插入图片描述

3.1子元素选择器

  选中指定父元素的指定子元素。语法： 父元素>子元素 { } \{\} {}。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            div>span{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>
            我是一个div
            <p>
                我是div中的p元素
                <span>我是p元素中的span元素</span>
            </p>
            <span>我是div元素中的span元素</span>
        </div>
        <span>
            我是div元素的兄弟元素span
        </span>
    </body>
</html>

在这里插入图片描述

3.2后代元素选择器

  选择指定元素的指定后代元素。语法： 祖先 后代 { } \{\} {}。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            div span{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>
            我是一个div
            <p>
                我是div中的p元素
                <span>我是p元素中的span元素</span>
            </p>
            <span>我是div元素中的span元素</span>
        </div>
        <span>
            我是div元素的兄弟元素span
        </span>
    </body>
</html>

在这里插入图片描述

3.3选择下一个兄弟元素

  注意只会选择下一个。语法：自己+目标兄弟 { } \{\} {}。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            div+span{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>
            我是一个div
            <p>
                我是div中的p元素
                <span>我是p元素中的span元素</span>
            </p>
            <span>我是div元素中的span元素</span>
        </div>
        <span>我是div元素的兄弟元素span</span>
        <span>我是div元素的兄弟元素span</span>
        <span>我是div元素的兄弟元素span</span>
    </body>
</html>

在这里插入图片描述

  如果该元素的下一个元素不符合要求，那么依然不会选取。

3.4选择下面的所有兄弟元素

  语法：自己~目标兄弟 { } \{\} {}。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            div~span{
                color:red;
            }
        </style>
    </head>
    <body>
        <span>我是div元素的兄弟元素span</span>
        <div>
            我是一个div
            <p>
                我是div中的p元素
                <span>我是p元素中的span元素</span>
            </p>
            <span>我是div元素中的span元素</span>
        </div>
        <p>我是div元素的兄弟元素P</p>
        <span>我是div元素的兄弟元素span</span>
        <span>我是div元素的兄弟元素span</span>
        <span>我是div元素的兄弟元素span</span>
    </body>
</html>

在这里插入图片描述

4.属性选择器

  [属性名] 选择含有指定属性的元素：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            [title]{
                color:red;
            }
        </style>
    </head>
    <body>
        <p title>段落一</p>
        <p>段落二</p>
        <p>段落三</p>
        <p>段落四</p>
        <p>段落无</p>
    </body>
</html>

在这里插入图片描述

  [属性名=属性值] 选择含有指定属性和属性值的元素；[属性名^=属性值] 选择含有指定属性，且属性值以指定值开头的元素；[属性名$=属性值] 选择含有指定属性，且属性值以指定值结尾的元素：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            [title=abc]{
                color:red;
            }
            [title^=cde]{
                color:blue;
            }
            [title$=cde]{
                color:green;
            }
        </style>
    </head>
    <body>
        <p title>段落一</p>
        <p title="abc">段落二</p>
        <p title="cdef">段落三</p>
        <p title="bcde">段落四</p>
        <p>段落无</p>
    </body>
</html>

在这里插入图片描述

  [属性名*=属性值] 选择含有指定属性，且属性值含有指定值的元素：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            [title=abc]{
                color:red;
            }
            [title*=cde]{
                color:blue;
            }
        </style>
    </head>
    <body>
        <p title>段落一</p>
        <p title="abc">段落二</p>
        <p title="cdef">段落三</p>
        <p title="bcde">段落四</p>
        <p>段落无</p>
    </body>
</html>

在这里插入图片描述

5.伪类选择器

  伪类可以理解成不存在的类、特殊的类，它用来描述一个元素的特殊状态，比如第一个元素、被点击的元素、鼠标移入移出的元素等。伪类一般情况下使用:开头，详情可以看这个链接。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            ul>:first-child{
                color:red;
            }
            ul>li:first-of-type{
                color:blue;
            }
            ul>li:last-child{
                color:green;
            }
        </style>
    </head>
    <body>
        <ul>
            <span>test</span>
            <li>第一个</li>
            <li>第二个</li>
            <li>第三个</li>
            <li>第四个</li>
            <li>第五个</li>
        </ul>
    </body>
</html>

在这里插入图片描述

  再举一个超链接的例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            /*
                未访问过的链接
            */
            a:link{
                color:red;
            }
            /*
                访问过的链接
            */
            a:visited{
                color:orange;
            }
            /*
                鼠标移到链接上时
            */
            a:hover{
                color:blue;
            }
            /*
                鼠标点击链接时
            */
            a:active{
                color:green;
            }
        </style>
    </head>
    <body>
        <a href="https://mp.csdn.net/console/article?spm=1011.2124.3001.5114">这是一个超链接</a>
    </body>
</html>

在这里插入图片描述

6.伪元素选择器

  伪元素表示页面中一些特殊的并不真实存在的元素，比如第一个字母、第一行等等。它一般使用::开头。在第5节中，我提供了一个网址，里面有更加详细的介绍。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            p::first-letter{
                font-size: 30px;
            }
            p::first-line{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>暖国的雨，向来没有变过冰冷的坚硬的灿烂的雪花。博识的人们觉得他单调，他自己也以为bai不幸否耶？江南的雪，
            可是滋润美艳之至了；那是还在隐约着的青春的消息，是极壮健的处子的皮肤。雪野中有血红的宝珠山茶，白中隐青
            的单瓣梅花，深黄的磬口的腊梅花；雪下面还有冷绿的杂草。</p>
        
        <p>胡蝶确乎没有；蜜蜂是否来采山茶花和梅花的蜜，我可记不真切了。但我的眼前仿佛看见冬花开在雪野中，有许多蜜
            蜂们忙碌地飞着，也听得他们嗡嗡地闹着。</p>

        <p>孩子们呵着冻得通红，像紫芽姜一般的小手，七八个一齐来塑雪罗汉。因为不成功，谁的父亲也来帮忙了。罗汉就塑得
            比孩子们高得多，虽然不过是上小下大的一堆，终于分不清是壶卢还是罗汉；然而很洁白，很明艳，以自身的滋润相
            粘结，整个地闪闪地生光。</p>

        <p>第二天还有几个孩子来访问他；对了他拍手，点头，嘻笑。但他终于独自坐着了。晴天又来消释他的皮肤，寒夜又使他
            结一层冰，化作不透明的模样；连续的晴天又使他成为不知道算什么，而嘴上的胭脂也褪尽了。</p>

        <p>是的，那是孤独的雪，是死掉的雨，是雨的精魂。</p>

    </body>
</html>

在这里插入图片描述

7.继承

  样式是可以继承的。我们为一个元素设置的样式，同时也会应用到它的后代元素中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            p{
                color:red;
            }
        </style>
    </head>
    <body>
        <p>
            我是p元素
            <span>我是p元素内的span元素</span>
        </p>
    </body>
</html>

在这里插入图片描述

  但是不是所有的样式都会被继承，背景、布局相关的等等就不会被继承。可以通过查阅文档来确定：
在这里插入图片描述

8.选择器的权重

  当我们通过不同的选择器，选中了一个相同的元素时，就可能会出现样式冲突。如果发生了冲突，就要通过选择器的权重来决定最终应用哪个样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            div{
                color:red;
            }
            .blue{
                color:blue;
            }
        </style>
    </head>
    <body>
        <div class="blue">一个div</div>
    </body>
</html>

在这里插入图片描述

  关于优先级的相关介绍可以看这篇文章。这里直接给出结论：
在这里插入图片描述

  权重相同怎么办？就近原则(靠下的，也就是后出现的)：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            .blue{
                color:blue;
            }
            .green{
                color:green;
            }
        </style>
    </head>
    <body>
        <div class="blue green">一个div</div>
    </body>
</html>

在这里插入图片描述

  或者使用 i m p o r t a n t important important：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第一个网页</title>
        <style>
            .blue{
                color:blue !important;
            }
            .green{
                color:green;
            }
        </style>
    </head>
    <body>
        <div class="blue green">一个div</div>
    </body>
</html>

在这里插入图片描述

  不过尽量不要使用这个……

csu_xiji
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解CSS中的选择器优先级顺序
09-24
CSS在使用选择器对元素施加属性的时候会有先后顺序,包括特殊性和重要性等概念在内,这里我们就来详解CSS中的选择器优先级顺序,需要的朋友可以参考下
2020-09-11
weixin_50753646的博客
09-11 135
#垂直居中 1 父元素：display：flex; 子元素：align-self：center; 2 父元素：display: flex; align-items: center; 这样做会使text-algin:center;失效 解决方法： 子元素：margin: auto;
CSS / CSS3（新增）选择器及优先级原则
Erya Programming learning
06-29 787
一、CSS基本选择器 1.元素（标签）选择器 2.类选择器 3.ID选择器 二、CSS3新增选择器
CSS中的三大基础选择器以及优先级（萌新必看）
qq_45623543的博客
10-18 1940
《个人学习笔记 十》 三大选择器是哪三个？ id选择器、类选择器、标签选择器 优先级 id选择器>类选择器>标签选择器 标签选择器： 标签选择器又称元素选择器 作用：根据标签名来选中指定的元素 语法：标签名{} 例子：p{}     h1{}     div{} 示范代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
css3 选择器总结 以及他们之间的优先级
业余前端的职业经历
04-05 582
首先今天是一个特殊日子。我辈当自强啊。好了 开始今天的主题内容。 前段时间我去面试一家挺好的公司，面试问的就是 请说出css3中你知道的几种选择器以及他们之间优先级 我就从我工作中常用性进行书写 1.类式选择器 .className{ // . 类名 // 样式声明 } //例子 选择所有class="parent"的元素 <div class="parent">&lt...
css的三大选择器和使用方式及其优先级
weixin_45980070的博客
07-09 176
优先级：内联样式>内部样式>外部样式，就近原则。注意：内部样式和外部样式的位置。 基本选择器的优先级从高到低:id >class >标签
CSS选择器权重计算及优先级
04-16
介绍CSS中，单个选择器，以及复合选择器的权重计算规则，比如： .box #mydiv ul li.txt。通过计算选择器的权重，区别其优先级，判 断最终样式的覆盖效果。
css选择器优先级深入理解
09-25
css基础选择器有标签选择器、类选择器、id选择器、通用选择器,本文将深入介绍css选择器优先级,这会给正在解决优先级问题的朋友，带来些许帮助
CSS选择器种类、优先级与匹配原理详解
09-25
作为一个Web开发者，掌握必要的前台技术也是很重要的特别是CSS选择器的优先级问题，为了广大web爱好者可以更好的解决问题，这里就CSS选择器的优先级问题做了一些总结
深入理解CSS选择器优先级
09-27
主要帮助大家深入理解CSS选择器优先级的相关内容，通过八个小例子分析比较CSS选择器优先级，感兴趣的小伙伴们可以参考一下
【面试题-CSS】什么是BFC ？如何创建 BFC ？BFC 有什么用？
ZMN0057的博客
11-17 602
什么是BFC ？如何创建 BFC ？BFC 有什么用？
CSS篇-CSS3 选择器总结 及优先级
qq_42828458的博客
08-06 320
css3 选择器总结 及他们的优先级优先级问题常用的选择器总结1. 通用选择器2. 元素选择器 （以下以element来指代元素标签名3. 类式选择器4. id选择器5. 组合选择器6. 后代选择器7. 子类选择器8. 兄弟选择器9. 属性选择器 暂时记录以下三种10. 伪类选择器11. 否定伪类选择器 :not(selector) 优先级问题 浏览器初始继承样式 优先级 最低 0 是出生的时候带的 选择器 优先级 权重 标签选择器 低 1 类 , 伪类选择器 , 属性选择器 低 10
前端CSS理解 —— BFC(块级格式化上下文)
最新发布
upgrade_bro的博客
08-04 113
BFC即 Block Formatting Contexts (块级格式化上下文)，BFC是指浏览器中创建了一个独立的渲染区域（内部元素的渲染不会影响边界以外的元素）。应用BFC可以避免margin折叠、清除浮动……
CSS中的BFC详解
weixin_30951389的博客
08-22 136
一 常见定位方案 普通流 默认，从上而下，行内元素水平排列，行满换行，块级元素渲染成一个新行。 浮动 先按普通流位置出现，然后根据浮动方向偏移。 绝对定位 元素具体位置由绝对定位坐标组成。 一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CS...
CSS3-三大特性-继承性、层叠性、优先级
weixin_54021642的博客
06-20 1734
CSS三大特性之继承性、层叠性和优先级
C++——map 和 multimap
qwjy的博客
04-03 2951
  文章目录结构构造操作非更易型操作查找操作赋值元素访问迭代器相关操作插入和移除       Map 和 multimap 将 key/value pair 当作元素进行管理。它们可根据 key 的排序准则自动为元素排序。Multimap 允许重复元素，map 不允许，如下图所示。 map 和 multimap 包含在头文件中： #include <map> 在其中，map 和 multimap 被定义为命名空间 std 内的 class template：
CSS3选择器及其优先级
qq_43128157的博客
05-02 892
文章目录选择器优先级规则分类基本选择器层次选择器伪类选择器动态伪类选择器目标伪类选择器语言伪类选择器UI元素伪类选择器结构伪类选择器否定伪类选择器伪元素属性选择器 选择器 优先级规则 最近的祖先样式比其他祖先样式优先级高 内联样式比祖先样式优先级高 内联样式>ID选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器 优先级计算：按abcd的顺序依次比较大小，大的优先级高，相等则比较下一个。最后都相等，按照“就近原则”判断 abcd（级别） 计算方式
css选择器的优先级，以及用法
热门推荐
hellow_tommer的博客
11-27 1万+
前言 本篇主要是css的选择器，及用法 总结 提示：这里对文章进行总结： 以上就是今天要分享的内容，如有错误，欢迎大家指出，我会及时修改的。 ...
css选择器及优先级
07-27
CSS选择器的优先级表示了当多个选择器同时应用于同一个元素时，哪个选择器的样式规则会被应用。通常，优先级的计算规则如下： 1. ID选择器的优先级最高，为100。 2. 类选择器、属性选择器和伪类选择器的优先级为10...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值