一.CSS选择器

最新推荐文章于 2022-11-21 21:18:46 发布

OlalalalalaO

最新推荐文章于 2022-11-21 21:18:46 发布

阅读量124

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/qq_38914344/article/details/115608219

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS选择器

类选择器

用.class，选择所有属性设置为class="xxx"的元素。
例：将div1颜色设置为红色，代码如下：

<body>
    <div class="div1">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <style>
        .div1 {
            color: red;
        }
    </style>
</body>

浏览器显示效果如下：
在这里插入图片描述

设置多个类名

class=“xxx xxx”，两个类名之间留个空格即可。
例，使用第二个类名使div1变为红色，代码如下：

<body>
    <div class="div1 div11">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <style>
        .div11 {
            color: red;
        }
    </style>
</body>

浏览器展示效果如下：
在这里插入图片描述

调用多个类

.xxx .xxx，类名之间预留空格
例：将div1,div2设置为红色，代码如下：

<body>
    <div class="div1 div11">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <style>
        .div1,.div2 {
            color: red;
        }
    </style>
</body>

浏览器效果如下：
在这里插入图片描述

id选择器

用 #xxx，选择所有属性设置为id="xxx"的元素。

<body>
    <div class="div1" id="div1-id">div1</div>
    <div class="div2">div2</div>
    <div class="div3">div3</div>
    <style>
        #div1-id {
            color: red;
        }
    </style>
</body>

浏览器展示效果如下：
在这里插入图片描述
id只可以设置一个

元素选择器

通过选择元素的属性来选择元素。
例：将所有div元素内的文字颜色设置为红色，代码如下：

<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <span>span</span>
    <style>
        div {
            color: red;
        }
    </style>
</body>

浏览器展示如下：
在这里插入图片描述

选择器优先级

相同优先级

相同优先级时，按照代码的顺眼进行调整
例代码如下：

<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <span>span</span>
    <style>
        div {
            color: red;
        }

        div {
            color: blue;
        }
    </style>
</body>

浏览器展示效果如下：
在这里插入图片描述
设置蓝色位于红色之后，所以字体为蓝色

不同优先级

id选择器>class选择器>类选择器
例代码如下：

<body>
    <div id="div-id" class="div-class">div1</div>
    <div>div2</div>
    <div>div3</div>
    <span>span</span>
    <style>
        div {
            color: red;
        }

        .div-class {
            color: blue;
        }

        #div-id {
            color: chartreuse;
        }
    </style>
</body>

浏览器展示如下：
在这里插入图片描述

OlalalalalaO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一.CSS选择器

CSS选择器类选择器用.class，选择所有属性设置为class="xxx"的元素。例：将div1颜色设置为红色，代码如下：<body> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> <style> .div1 {
复制链接

扫一扫