类选择器

最新推荐文章于 2023-10-17 23:31:20 发布

jwz934738949

最新推荐文章于 2023-10-17 23:31:20 发布

阅读量7.7k

点赞数 3

分类专栏： HTML与CSS

本文链接：https://blog.csdn.net/jwz934738949/article/details/88777717

版权

HTML与CSS 专栏收录该内容

73 篇文章 1 订阅

订阅专栏

与ID选择器类似，类选择器也是一种选择器。但是与ID选择器有一些差别。

1、格式

<style>

.类名{

具体属性

}

</style>

2、注意事项

与ID选择器类似，class名开头要以字母或者下划线。

class名称不能有已存在的语义。

与ID选择器不同，class名称可以重复。

在类名前面加"."。

在一个标签中，可以存在多个类名。格式为：<标签名 class="类名1 类名2 类名3……">。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .p1 {
            color: red;
        }

        .p2 {
            text-decoration: underline;
        }

        .p3 {
            text-size: 30px;
            color: deeppink;
        }

        .p4 {
            color: blue;
        }

        .p5 {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p class="p1">去年今日此门中，</p>
<p class="p2">人面桃花相映红。</p>
<p class="p3">人面不知何处去，</p>
<p class="p4 p5">桃花依旧笑春风。</p>
</body>
</html>

3、简化代码

在网页编写过程中，会出现许多不同标签同时拥有一个属性。这时如果一个一个编写，显得有些复杂，需要用到简化。

在标签中先不写类名。首先在CSS中定义好类名及其属性，再将符合条件的类加到标签中去。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .blue {
            color: blue;
        }

        .Size {
            font-size: 50px;
        }

        .ul {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p class="blue Size">去年今日此门中，</p>
<p class="ul Size">人面桃花相映红。</p>
<p class="Size ">人面不知何处去，</p>
<p class="blue ul Size">桃花依旧笑春风。</p>
</body>
</html>

jwz934738949

关注

3
点赞
踩
10

收藏

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

与ID选择器类似，类选择器也是一种选择器。但是与ID选择器有一些差别。1、格式 <style>.类名{ 具体属性} </style>2、注意事项与ID选择器类似，class名开头要以字母或者下划线。class名称不能有已存在的语义。与ID选择器不同，class名称可以重复。在类名前面加"."。在...
复制链接

扫一扫