前端 CSS的选择器 基本选择器 类选择器

 

 

 

类选择器

符号是.开头 然后类的名字

样式类名不要用数字开头（有的浏览器不认）。

所谓类就是class，.class与id非常相似，任何标签都可以加类，但是类可以重复

通过样式类选择元素：

示例：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        .c1{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div>
        <h3 class="c1">我是h3标签</h3>
    </div>
</body>
</html>

 

 class是归类的概念

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        .c1{
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div>
        <h3 class="c1">我是h3标签</h3>
        <h3 class="c1">我是h3标签</h3>
    </div>
</body>
</html>

 

 

 同一个标签可以携带多个类，用空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        .c1{
            color: red;
            font-size: 12px;
        }
        .c2{
            color: #6495ED;
        }
    </style>
</head>
<body>
    <div>
        <h3 class="c1 c2">我是h3标签</h3>
        <h3 class="c1">我是h3标签</h3>
    </div>
</body>
</html>

 

 应用了c1 c2 css样式 ， c2的css样式的颜色覆盖掉c1颜色样式，css是层叠样式表

 

 

把c2颜色样式勾掉，c1样式颜色马上应用

 

到底使用id还是用class？

尽可能的用class。除非一些特殊情况可以用id，一般页面使用class，页面尽量少用id
id一般是用在js的。也就是说 js是通过id来获取到标签

一定要有"公共类"的概念
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style type="text/css">
        .lv1{
            color: green;
        }
        .lv2{
            text-decoration: underline;
        }
        .lv3{
            font-size: 40px;
        }


    </style>
</head>
<body>
    <!-- 公共类 公有的属性 -->
    <div>
        <p class="lv1 lv3">段落1</p>
        <p class="lv2 lv1">段落2</p>
        <p class="lv2 lv3">段落3</p>
    </div>
</body>
</html

 


总结：
1.不要试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式。
2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用。
 
posted @ 2019-05-01 01:42  minger_lcm  阅读(682)  评论(0)  编辑  收藏  举报