复合选择器
在css中，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
常用的复合选择器：后代选择器、子选择器、并集选择器、伪类选择器
（1）后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法格式：
元素1 元素2 { 样式声明 }例1：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ol li{
color: #00BFFF;
}
</style>
</head>
<body>
<ol>
<li>我属于ol</li>
<li>我属于ol</li>
</ol>
<ul>
<li>我属于ul</li>
<li>我属于ul</li>
</ul>
</body>
</html>结果图：
例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ol li{
color: #00BFFF;
}
ol li a{
color: greenyellow;
}
</style>
</head>
<body>
<ol>
<li>我属于ol</li>
<li>我属于ol</li>
<li><a href="#">我属于ol里面的li</a></li>
</ol>
<ul>
<li>我属于ul</li>
<li>我属于ul</li>
</ul>
</body>
</html>结果图2：
（2）子选择器
子选择器只能选择作为某元素的最近一级子元素
语法格式：
元素1>元素2 { 样式声明 }元素1和元素2中间用大于号隔开
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul>li{
color: #00BFFF;
}
</style>
</head>
<body>
<ul>
<li>我属于ul</li>
<ol>
<li>我属于ul</li>
</ol>
</ul>
</body>
</html>
结果图：
（3）并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式
并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分
语法格式：
元素1，元素2 { 样式声明 }例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div,p{
color: #00BFFF;
}
ul,li{
color: brown;
}
</style>
</head>
<body>
<div>喜羊羊</div>
<p>懒羊羊</p>
<ul>
<li>灰太狼</li>
<li>红太狼</li>
<li>小灰灰</li>
</ul>
</body>
</html>结果图:
(4) 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大特点是用冒号表示，伪类选择器有很多，由链接伪类，结构伪类。
链接伪类选择器
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）为了确保生效，请按照LVHA的顺序声明:link-:visited-:hover-:active
:focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素，焦点就是光标，一般情况下<input>类表单元素才能获取。因此这个选择器也主要针对于表单元素。
input：focus {
background-color：blue
}
基础选择器
基础选择器：标签选择器，类选择器，id选择器和通配符选择器
（1）标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面某一类标签指定统一的css样式
语法：
标签名 {
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
...
}
作用：标签选择器可以把某一类标签选择出来，比如所有的<div>标签和所有的<span>标签
优点：能快速为页面中同类型的标签统一设置样式
缺点：不能设计差异化样式，只能选择全部的当前标签
（2）类选择器
单独选一个或者某几个标签，可以使用类选择器
语法：
.类名 {
属性1：属性值1；
属性2：属性值2；
...
}结构需要用class属性来调用
使用类选择器画盒子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.blue {
width: 100px;
height: 100px;
background: deepskyblue;
}
.pink{
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="blue">蓝色</div>
<div class="pink">粉色</div>
<div class="blue">蓝色</div>
</body>
</html>结果图：
类选择器---多类名：在标签class属性中写多个类名；多个类名中间必须用空格分开
如：<div class="red font20">文本</div>
(3)id选择器
HTML元素以id属性来设置id选择器，css中id选择器以”#“来定义
语法：
#id名 {
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
...
}(4)通配符选择器
在css中，通配符选择器使用”*“定义，它代表选取页面中所有元素（标签）
语法：
* {
属性1：属性值1；
属性2：属性值2；
属性3：属性值3；
...
}css三大特性：层叠性，继承性，优先级
（1）层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
原则：
样式冲突，遵循的是就近原则，那个样式离结构近，就执行哪个样式
样式不冲突，不会层叠
（2）继承性：css中的继承，子标签会会继承父标签的某些样式，如文本颜色和字号
（3）优先级：当同一个元素指定多个选择器，就会有优先级的产生
选择器相同，则执行层叠行
选择器不同，则根据选择器权重执行
| 选择器 | 选择器权重 |
| 继承 或者* | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器 伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style="" | 1，0，0，0 |
| ！important 重要的 | ∞无穷大 |
注：权重是有4组数字组成，但不会有单位
类选择器永远大于元素选择器，id选择器永远大于类选择器，一次类推
等级判断从左向右，如果某一位数值相同，则判断下一位数值
简单记忆法：通配符和继承权重为0，标签选择器为1.类（伪类）选择器为10，id选择器为100，行内样式表为1000，！important无穷大
继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
权重叠加：如果是复合选择器，则会有权重叠加，需计算权重
div ul li ---------＞ 0,0,0,3
.nav ul li ---------＞ 0,0,1,2
a:hover ---------＞ 0,0,1,1
.nav a ---------＞ 0,0,1,1
628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
