类选择器

与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>

类选择器

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

1、格式

2、注意事项

3、简化代码

相关推荐