CSS简单选择器

最新推荐文章于 2022-07-27 23:06:14 发布

丨Q ，Q丨

最新推荐文章于 2022-07-27 23:06:14 发布

阅读量275

点赞数

分类专栏： html+CSS

本文链接：https://blog.csdn.net/qq2071114140/article/details/90272750

版权

33 篇文章 1 订阅

订阅专栏

选择器：选中页面中的元素，并将选择器后面的样式代码应用到选中的样式。

选中所有的p元素并应用样式。

...
        p{
            font-size: 20px;
            color: skyblue;
        }
...
<body>
    <p>这是一个P标签</p>
</body>

标签可以省略，表示选择所有指定该class属性值的元素；如果不省略，表示class属性为该值得特定标签

将所有class属性的值为text的元素的颜色设为天蓝色；将class属性的值为text的p元素的字体大小设置为20px ... .text{ color: skyblue; }

        p.text{
            font-size: 20px;
        }
...
<body>
    <p class="text">这是一个P标签</p>
    <span class="text">这是一个span标签</span>
</body>

标签名可以省略。

注意：语义上，id可以唯一的确定一个元素，也就是说，两个标签不能设置一样的id。（如果多个标签设置一样的id，其实浏览器可以解析，但是这样的话和类选择器就没有任何区别了，类选择器侧重于选择一组，而id选择器则要设置整个页面中的唯一元素的样式）

所以，通常情况下，使用id选择器时，会选择唯一的元素，就不用标签名来限制了。

选中id值为id_1的唯一元素，应用样式。

...
        #id_1{
            font-size: 30px;
            color: skyblue;
        }

...
<body>
    <p id="id_1">这是一个P标签</p>
</body>

选中所有元素并应用样式。

...
        *{
            font-size: 30px;
            color: skyblue;
        }
...
<body>
    <p>这是一个P标签</p>
    <span>这是一个span标签</span>
</body>

关注

专栏目录