CSS——常见CSS选择器的写法

他咔咔咔

于 2024-07-20 10:21:33 发布

阅读量382

点赞数 23

分类专栏： html CSS HTML标签文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_64294248/article/details/140561789

版权

一、常见标签的写法

CSS是给页面设计的样式表，CSS选择器则是选择页面标签的方法，需要用选择器才能成功将要设置的属性应用到标签上。

如果把网页比作饭店，需要点菜时，对于不同的菜，需要规定好每个菜的菜名，才能点相应的菜，一道菜可能会有不同的做法，此时需要说明需要这道菜的具体做法，才能成功点单。

一、常见选择器

CSS样式的格式为：

选择器 {
     属性：属性值;
}

常见标签的写法有十种，如下：

标签选择器 div {}

类名选择器 .container {}

ID选择器 #top {}

交集选择器(组合) div.header {}

并集选择器 .header , .main , .footer { }

后代选择器 .container .header h3 {}

直接子代选择器 .container > div {}

间接后代选择器 .container h3 {}

伪类选择器 ul li:nth-child(n) {}

属性选择器 input[type="text"] {}

二、常见选择器的代码演示

标签选择器标签名称 {}

标签选择器，就是直接写某个标签作为选择器，设置它的样式，在不考虑优先级的情况下，这个标签下的所有元素都会被作用。代码如下：

<body>
    <style>
        /* 1）标签选择器 */
        div {
            width: 80px;
            height: 80px;
            border: 2px solid purple;
        }
    </style>
    <div></div>
</body>

标签选择器的写法如下：

/* 1)标签选择器(常用) */
标签 {
    属性:属性值;
}

/* 双标签 */
<标签></标签>

/* 单标签 */
<标签>

效果如下：

类名选择器 .类名 {}

类名选择器就是给标签起一个类名，并给这个类名设置样式，在不考虑优先级的情况下，标签会选中这个类名下的所有元素。

类名选择器的写法如下：

/* 2)类名选择器(常用) */
.类名 {
    属性:属性值;
}

/* 双标签 */
<标签 class="类名"></标签>

/* 单标签 */
<标签 class="类名">

代码如下：

<body>
    <style>
        /* 2)类名选择器(常用) */
        .item {
            border: 5px solid red;
        }
    </style>

    <div class="item"></div>
</body>

效果如下：

ID选择器 #ID名{}

ID选择器就是给标签起一个类名，并给这个类名设置样式，在不考虑优先级的情况下，标签会选中这个类名下的所有元素。

ID选择器的写法如下：

/* 3)ID选择器(常用) */
#ID名 {
    属性:属性值;
}

/* 双标签 */
<标签 id="类名"></标签>

/* 单标签 */
<标签 id="类名">

最低0.47元/天解锁文章

他咔咔咔

关注

23
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
CSS——常见CSS选择器的写法

CSS是给页面设计的样式表，CSS选择器则是选择页面标签的方法，需要用选择器才能成功将要设置的属性应用到标签上。
复制链接

扫一扫

专栏目录