css选择器

css选择器
1.标签选择器
标签选择器的格式

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: slategrey;
        }
    </style>

  <div>
        <p>标签选择器</p>
    </div>

标签选择器即选择器为标签名，在需要对html中的一个标签的所有位置设置同种样式时使用。
2.类选择器
相对于标签选择器，使用类选择器可以设定不同的样式，实现差异化样式的设置，比较方便，在实际的开发中也比较常用。并且对于一个标签可以指定多个类名。有点类似于一个人可以有身份证上的名字，可以有昵称，可以有绰号，不同的名称对应不同的身份但统统都指向你这个人，类选择器真好。

 <style>
        .red {
            width: 200px;
            height:200px;
            background-color: red;
        }
        .green {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>

	<div class="red">123</div>
    <div class="green">456</div>
    <div class="red">789</div>

类名过长的话，可以在中间加上“-”，比如“text-color”这样。

3.ID选择器
id选择器和类选择器有一点点像，但是又有区别。一个类选择器可以应用于多个标签，但是一个id选择器能应用于一个标签。如果把人比作标签的话，id选择器就像是你的身份证号，一个人只能有一个，你只能用自己的。ID选择器一般用于页面中单一的标签，经常和JavaScript搭配使用。
样式是通过 #id来定义的 结构中用id="id"来调用

 #color {
            background-color: seagreen;
        }

4.通配符选择器
就是对页面中所有的标签统一设置样式。
样式定义： * { }
不需要进行调用。 在盒模型中使用比较多