首页 > 代码库 > CSS 选择器

CSS 选择器

2024-10-12 17:38:02   213人阅读

1、ID选择器

2、CLASS选器

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 选择器


联系
我们