CSS选择器
选择器：选择一个谁的（标签）的过程
写法:选择器{属性：值；属性：值；…；}
分类：
1.基础选择器：①标签选择器 ②类选择器 ③ID选择器 ④通配符选择器（了解）
2.复合选择器
①标签选择器
标签{属性：值；}
特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式
例：
<style>
div{font-size：50px；width：300px；}
</style></head>
<body>
<div>老严好帅啊！</div></body>
颜色显示的方法：
1.直接写颜色名称
2.十六进制显示颜色：0-9 a-f 越靠近0颜色越深，越靠近f颜色越浅
#000000：前2位代表红色，中间2位代表绿色，后边两位代表蓝色
3.rgb
color:rgb(120，120，120）；三个值相同时----深灰色
4.rgba
a代表alpha不透明度 值0（不透明）-1（透明100%）
color：rgba（102，217，239，0.5）；
②类选择器class ☆最常用
类选择器是对HTML标签中class属性进行选择，类选择器的选择符是"."
语法：.one{color：red；font-size：25px；}
.one–选择器，one–类名（自定义），color–属性，red–值，：–声明
特点：
1.谁调用，谁生效
2.一个标签可以调用多个类选择器的值，不同的值用空格分开
3.多个标签可以调用同一个类选择器
类选择器命名规则：
1.不能用纯数字或数字开头定义类名
2.不能使用特殊符号或特殊符号开头（下划线除外）来定义类名
3.不建议使用汉字来定义类名
4.不推荐使用属性或属性的值来定义类名
例：
<style>
.box{font-size：40px；color：yellow；}
.miss{text-indent:2em；}
._{font-size:60px；color:green；}
</style></head>
<body>
<div class="box miss">你很可爱</div>
<p class="_">你很漂亮</p>
<span class="box miss _">你很可爱又漂亮</span>
</body>
③ID选择器
写法：#自定义名称{属性：值；}
特点：
1.一个ID选择器在一个页面只能调用一次。如果使用2次或者2次以上，不符合W3C规范，JS调用会出问题
2.一个标签只能调用一个ID选择器
3.一个标签可以同时调用类选择器和ID选择器
例：
<style>
.p1{color:red；} #xiao{color：green；}</style></head>
<body>
<p class="p1"；id="xiao">你超级漂亮</p></body> 结果显示绿色（覆盖）
④通配符选择器
*{属性：值；}
特点：给所有的标签都使用相同样式
不推荐使用，会增加浏览器和服务器负担
例：
<style>
*{font-size：200px；color：red；}
</style></head>
<div>你很美</div>
<span>你是很牛的人</span>
2.复合选择器
概念：两个或者两个以上的基础选择器通过不同的方式连接在一起
①交集选择器
标签+类（ID）选择器{属性：值；}
特点：既要满足使用了某个标签，还要满足使用了类（ID）选择器
例：
<style>
.box{font-size：40px；}
**div.box**{color：red；}
**div#miss**{width：400px；height：300px；background-color：yellow；}
</style></head>
<body>
<div class="box">你很漂亮啊</div>
<p class="box">你很漂亮漂亮</p>
<div id="miss">我很可爱</div>
</body>
②☆☆☆后代选择器
写法：选择器+空格+选择器{属性：值；}
后代选择器首选要满足包含（嵌套）关系
父集元素在前边，子集元素在后边
特点：无限制隔代
只要能代表标签，标签、类选择器、ID选择器*结合
例：
.box{font-size：40px；color：red；}
div span{font-size：50px；}
.box span{background-color：blue；}
.box .miss{color：red；}
<style></head>
<body>
<div class="box"><p><span class="miss">你很帅气啊</span></p><div>
<div class="box"><span>你很美丽</span></div>
③子代选择器（了解）
写法：选择器>选择器{属性：值；}
选中直接下一代元素
例：
div>span{color:red；font-size：40px；}
p>span{color:green；font-size：60px；}</style></head>
<body>
<div><p><span>我可以的</span></p>
<span>无敌漂亮</span></div></body>
④并集选择器：
写法：选择器+，+选择器+，选择器{属性：值；}
例：
.box，#miss，span，h1{font-size：100px；color#fff；background-color：green；}</style>
<body>
<div class="box">可爱的女生</div>
<p id="miss">匡威，耐克</p>
<span>阿迪达斯</span>
<h1>小仙女</h1></body></html>