正文

css选择器

wzzkaifa  2022-02-09  236

关键词：

3、属性选择器
能够为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
凝视：仅仅有在规定了 !DOCTYPE 时。IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本号中，不支持属性选择。

CSS 选择器參考手冊

选择器	描写叙述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包括指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素。该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每一个元素。
[attribute$=value]	匹配属性值以指定值结尾的每一个元素。
[attribute*=value]	匹配属性值中包括指定值的每一个元素。

详细demo与语法參考：w3school

4、选择器分组

w3school

5、包括选择器（后代选择器）

w3school

6、标签指定式的选择器

假设想同一时候使用id和class，也想同一时候使用标签选择符，能够使用例如以下的方式：

        /*表示全部id为idDemo的p标签*/  
        p#idDemo {
            background: cadetblue;
            font-size: 36px;
        }
        /*表示全部class为classDemo的h1标签*/  
        p.classDemo {
            background: cadetblue;
            font-size: 36px;
        }
        /*小注：标签指定式的选择符用#或者.来连接，中间不能有空格*/

效果例如以下：

技术分享

測试代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />

    <style type="text/css">
        /** {
                            font-size: 12px;
                            line-height: 1.5;
                            color: blue;
                        }*/

        body {
            font-size: 12px;
            line-height: 1.5;
            color: blue;
        }
        /*
                    包括选择符
                    对某对象中的子对象进行样式指点定，这样选择方式就发挥了作用。

                须要注意的是，仅对此对象的子对象标签有效，对于其他单独存在或位于此对象以外的子对象，不应用此样式设置。
                这样做的长处在于，帮我们避免过多的id、class设置，直接对所需的元素进行定义。*/
        p strong {
            font-size: 36px;
            color: red;
        }
        /*注意以下这种*/
        #fi strong {
            font-size: 24px;
            color: brown;
             background: cadetblue;
        }

        /*群组选择符

        对于XHMTL对象，能够对一组同一时候进行了相同的样式指派。
        使用逗号对选择符进行了分隔。这样书写的长处在于相同的样式仅仅须要书写一次就可以，降低代码量，改善CSS代码结构。
        使用时应该注意”逗号”是在半角模式下。并不是中文全角模式。*/

        h2, h3 {
            font-weight: normal;
        }

        /*表示全部id为idDemo的p标签*/  
        p#idDemo {
            background: cadetblue;
            font-size: 36px;
        }
        /*表示全部class为classDemo的h1标签*/  
        p.classDemo {
            background: cadetblue;
            font-size: 36px;
        }
        /*小注：标签指定式的选择符用#或者.来连接，中间不能有空格*/
    </style>

</head>
<body>

    <h1> 真正的才智是刚毅的志向。
 —— 拿破仑</h1>
    <h2>
        感情有着极大的鼓励力量，因此，它是一切道德行为的重要前提，谁要是没有
        强烈的志向，也就不能够热烈地把这个志向体现于事业中。 —— 凯洛夫
    </h2>
    <div>勇敢坚毅真正之才智乃刚毅之志向。 —— 拿破仑</div>

    <p id="idDemo">
        生活赋予我们一种巨大的和无限高贵的<strong>礼品</strong>  ，这就是青春：充满着力量，充满着期待志愿。充满着求知和斗争的志向，充满着希望信心和青春。 —— 奥斯特洛夫斯基
        <br />
        志向只是是记忆的奴隶，生气勃勃地降生，但却非常难成长。 —— 莎士比亚
    </p>
    <p id="fi">人所缺乏的不是才干而是<strong>志向</strong>，不是成功的能力而是勤劳的意志。
 —— 部尔卫</p>

    <h3>
        当教师把每一个学生都理解为他是一个具有个人特点的、具有自己的志向、自己的智慧和性格结构的人的时候。这种理解才干有助于教师去热爱儿童和尊重儿童。 —— 赞科夫
    </h3>

    <p class="classDemo">

        555555555555555555555555555555555555555555
    </p>
</body>
</html>

css选择器

普通选择器/*标签选择器*/div{color:#fff;}/*类选择器*/.class{color:#fff;}/*id选择器*/#id{color:#fff;}/*通配符选择器*/*{color:#fff;} 复合选择器/*后代选择器*/选择器选择器{color：#fff；}/*子代选择器*/选择器>选择器{color：#fff；}/*并集选择... 查看详情

css选择器

css选择器基本选择器*通配符选择器div元素选择器.box类选择器.box.red复合选择器#idid选择器:pseudo伪类选择器::pseudo伪元素选择器:lang(en)语言选择器div:lang(en){color:red;}div>p子类选择器divp子集选择器div~p兄弟选择器（所有后面的元素... 查看详情

css选择器有哪几种？举例轻松理解css选择器

CSS选择器汇总（清爽版）1、元素选择器标签名{}2、id选择器 #id属性值{}3、类选择器 ·class属性值{} 4、选择器分组（并集选择器）作用：通过它可以同时选中多个选择器对应的元素（通常用于集体声明）... 查看详情

css选择器

css选择器CSS选择器回顾符号说明用法#idId选择器#id{color:red;}.class类选择器.class{//}Element标签选择器P {//}*通配符选择器配合其他选择器来使用,并集选择器div,p{} 空格后代选择器divspan{}选择div下面所有后代的span>子代选择器d... 查看详情

css选择器

...SS样式应用于特定的HTML元素，首先需要找到该目标元素。选择器是选择要添加要是的HTML标签的一种方式、模式。CSS2.1版本的七种选择器:基础选择器:标签选择器、id选择器、类选择器、通配符选择器高级选择器:后端选择器、交集... 查看详情

第七十节，css选择器

css选择器学习要点：1.选择器总汇2.基本选择器3.复合选择器4.伪元素选择器本章主要探讨HTML5中 CSS选择器，通过选择器定位到想要设置样式的元素。目前CSS选择器的版本已经升级至第三代，即 CSS3选择器。CSS3选择... 查看详情

css选择器jquery选择器异同

css选择器用$("")包起来就成了jQuery选择器 CSS选择器jQuery选择器ID选择器#myID$(‘#myID‘)类选择器.myclass$(‘.myclass‘)标签选择器p$(‘p‘)层次选择器div>strong$(‘div>strong‘)css称为伪类选择器jQuery称之为过滤选择器p:nth-child(1)$(... 查看详情

css选择器

CSS的选择器按大类分为基础选择器、层次选择器、伪类选择器、伪元素选择器；下面对前三个选择器进行说明1.基础选择器分为：元素选择器、类选择器、ID选择器及通配符选择器元素选择器：可选中批量相同标签　　代码格式... 查看详情

前端之css的属性引入方式选择器选择器优先级

目录1011前端之CSS的属性引入方式、选择器、选择器优先级一、CSS介绍二、CSS语法2.1CSS实例2.2CSS注释三、css属性的引入方式3.1行内样式3.2内部样式3.3外部样式四、CSS选择器4.1元素(标签)选择器4.2id选择器4.3类选择器4.4通用选择器4.5... 查看详情

css

...S1CSS的定义2CSS的注释3CSS的语法结构4CSS的三种引入方式5CSS选择器5.1基本选择器5.1.1id选择器5.1.2类选择器5.1.3元素(标签)选择器5.1.4通用选择器5.2组合选择器5.2.1后代选择器5.2.2儿子选择器5.2.3毗邻选择器5.2.4弟弟选择器5.3属性选择器C... 查看详情

css

css3选择器——伪类选择器

前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类选择器... 查看详情

css选择器

　　CSS选择器的准确书写，保证了元素应用样式的正确性，CSS中选择器主要包括：1、元素选择器：　　最常见的CSS选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。元素选择器又称为类型选择器（typeselector）... 查看详情

css复合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的，常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。1.... 查看详情

css选择器

...学习到CSS内容，所以做了总结。这篇博文主要介绍了CSS的选择器相关概念。二选择器类型2.1类型概述CSS选择器可以被分为以下类别:S1简单选择器??A1元素选择器??A2类选择器??A3ID选择器??A4通用选择器S2属性选择器??A1简单属性选择??A... 查看详情

css选择器

前端基础css选择器(代码片段)

css选择器css选择器1.css选择器的定义2.css选择器的种类3.标签选择器4.类选择器5.层级选择器(后代选择器)6.id选择器7.组选择器8.伪类选择器9.小结css选择器学习目标能够说出css选择器的种类1.css选择器的定义css选择器是用来选择标签... 查看详情

前端之css——css选择器

本周学习CSS的选择器。工作中最常使用的就是元素选择器，ID选择器，类选择器，后代选择器。还有一些并不常用但是功能强大的选择器容易被忽视，这次学习总结下。1.后代选择器和子代选择器后代选择器：element1 element2，&... 查看详情