CSS基础选择器

一、标签选择器

标签{属性：值;}

特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
           font-size: 50px;
            color: green;
            background-color: yellow;
            width: 400px;
        } 
        p{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>我是一个好人</div>
    <div>你也是个好人</div>
    <p>这是一个段落</p>
    <p>这是另外一个段落</p>
</body>
</html>

二、类选择器

.自定义类名{属性:值;  属性:值；}

特点：谁调用，谁生效。一个标签可以调用多个类选择器。多个标签可以调用同一个类选择器。

类选择器命名规则：①不能用纯数字或者数字开头来定义类名

　　　　　　　　 ②不能使用特殊符号或者特殊符号开头（_）来定义类名

　　　　　　　　 ③不建议使用汉字来定义类名

④不推荐使用属性或者属性的值来定义类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            font-size: 40px;
            color: rgba(00,255,00,0.5);
            width: 300px;
            height: 300px;
            background-color: #999;
        }
        .miss {
            text-align: center;
            text-indent: 2em;
        }
    </style>
</head>
<body>
   <div class="box">不能用纯数字或者数字开头来定义类名</div> 
   <div class="box miss">不能使用特殊符号或者特殊符号开头</div>
   <p class="box">不建议使用汉字来定义类名</p>
   <p class="miss">不推荐使用属性或者属性的值来定义类名</p>
   <p>一个标签可以调用多个类选择器。多个标签可以调用同一个类选择器</p>
</body>
</html>

三、ID选择器

#自定义名称{属性:值;}

特点：

一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。

一个标签只能调用一个ID选择器。

一个标签可以同时调用类选择器和ID选择器。

<style type="text/css">
        #box {
            font-size:20px;
            color: rgb(0,0,255);
            background-color: yellow;
            
        }
        #miss {
            text-align: center;
        }
        .box{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div id="box" class="box">一个ID选择器在一个页面只能调用一次。</div>
    <div id="miss" class="box"> 如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题。</div>
    <p class="box">一个标签可以同时调用类选择器和ID选择器。</p>
    <p>一个标签只能调用一个ID选择器。</p>
</body>

四、通配符选择器

*{属性:值;}

特点：给所有的标签都使用相同的样式。

不推荐使用，增加浏览器和服务器负担。

<style type="text/css">
        * {
            font-size: 20px;
            color: chartreuse;
        }
    </style>
</head>
<body>
    <div>给所有的标签都使用相同的样式。</div>
    <div>不推荐使用，</div>
    <p>增加浏览器和服务器负担。</p>
    <p>增加浏览器和服务器负担。</p>
    <span>增加浏览器和服务器负担。</span>
</body>