1.并集选择器
语法：
代码语言：javascript复制选择器1，选择器2，选择器n{共同的属性1：值1;...n;}含义：
代码语言：javascript复制将选择器1，选择器2，选择器n，共同的属性，一次性，统一设置。优点：
代码语言：javascript复制可以节省我们的代码，提高工作效率。
h1,h2,p{font-size: 18px;color: red;}
当多个标签的样式一样的时候，可以使用“，”隔开，这样这些标签定义的样式，就一模一样。代码语言：javascript复制
静夜思
作者：李白
窗前明月光
看着心发慌
2.交集选择器
既要符合选择器1的特点，也要符合选择器2的特点；
优点：
代码语言：javascript复制可以精确定位到某个网页元素。精确定位：
代码语言：javascript复制如何写这个标签；
选择器1选择器2{属性：值;}
p.yuebing{color:blueviolet;
font-weight: bolder;}
这种定义，表示：类样式是yuebing的p标签。它既符合p的样式规则，又符合yuebing的样式规则。
font-weight:课设置加粗或细；span:小区域的标签，比p段落范围小。代码语言：javascript复制
新时代.悯码农
张Sir
锄禾日当午
代码真辛苦
跟着老张学
一点不辛苦
3.子代选择器
父子关系；兄弟关系；
父元素下的子元素，如何进行修饰，进行查找定位.
格式：
代码语言：javascript复制父元素>子元素{样式声明；}子代选择器：只包含直接儿子层级
代码语言：javascript复制
孙子p
儿子p
4.后代选择器
祖代元素 后代元素的关系;
语法：
代码语言：javascript复制祖代元素 后代元素{样式声明;}注意：
代码语言：javascript复制1.祖代元素和后代元素之间是有空格的；
2.后代元素包括子级元素，孙子级元素，重孙子，玄孙子...
儿子p
儿子p
-
重孙女
代码语言：javascript复制body p {
font-size: 24px;
color: red;
border: 1px solid #f00;
}代码语言：javascript复制
儿子p
儿子p
-
重孙女
5.兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（。
选择器+标签
代码语言：javascript复制
关羽
刘备
张飞
吕布
6.属性选择器
属性选择器，可以根据元素特定的属性来选择元素，这样就不用借助类选择器或者 id选择器。
语法：
E:元素；Element; att:表示attribute 属性;
E [ att ] 匹配具有 att 属性的 E 元素 例如：input [ value ]
E [ att = ‘val’ ] 匹配具有 att 属性且属性值等于 val 的 E元素
E [ att ~= ‘val’ ] 匹配具有 att 属性且属性值包含 val词 的 E元素
E [ att ^= ‘val’ ] 匹配具有 att 属性且属性值以 val 开头的 E元素
E [ att $= ‘val’ ] 匹配具有 att 属性且属性值以 val 结尾的 E元素
E [ att *= ‘val’ ] 匹配具有 att 属性且属性值含有 val 的 E元素
注意：^以xx开头 href ^=‘www’
代码语言：javascript复制$以xx结尾
*包含xx为了更好的演示：
代码语言：javascript复制
.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.demo a {
float: left;
display: block;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
margin-right: 5px;
text-decoration: none;
}零基础学前端开发之CSS3深入选择器_html57.结构伪类选择器
1、同级别（不区分类型）
父元素 E:first-child 父元素中的第一个子元素 E
父元素 E:last-child 父元素中的最后一个子元素 E
父元素 E:nth-child( n ) 父元素中的第 N 个子元素 E
注意：
ul :first-child{ color:pink; } // 选择 ul 下的第一个子元素（ 第一个子元素可以使 div，p，span任何子元素）
ul li:first-child{ color: pink; } // 选择 ul 下的第一个元素名是 li 的子元素
nth-child( n ) 注意点：（n 可以是数字，关键字和公式）
数字：选择第 n 个子元素，里面数字从 1 开始
关键字： even 偶数，odd 奇数
ul li:nth-child( even ) // 选择 ul 中所有 偶数行的 li 子元素
公式：常见公式如下（如果 n 是公式，则从 0 开始计算，但是第 0 个元素 或者超出了元素的个数会被忽略）
ul li:nth-child( n ) // 从 0 开始 每次加1 往后计算，相当于选择了所有的孩子 这里面必须是 n 不能是其他字母
偶数：2n 奇数：2n+1 5的倍数：5n 从第5个开始（包含第5个）到最后：n+5 前5 个（包含第5 个）：-n + 5
2、同类型（区分类型）
E:first-of-type：指定类型 E 的第一个
E:last-of-type：指定类型 E 的最后一个
E:nth-of-type( n )：指定类型 E 的第 n 个
区别：（两种相反的查找模式）
nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第 n 个孩子，然后看看是否和 E 匹配
nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配 E ，然后再根据 E 找第 n 个孩子
代码语言：javascript复制
- 关羽
- 张飞
- 赵云
- 马超
- 孙尚香
- 孙茹
- 曹操
- 姜维
罗冠中
8.其他伪类选择器
选择器 描述
E:enabled 选择匹配E的所有可用UI元素。
E:disabled 选择匹配E的所有不可用UI元素。
E:checked 选择匹配E的所有可用UI元素。
:empty 选中既没文本也无子元素（空格都不能有）的指定元素
:not(x) 找到不符合当前选择器的元素
代码语言：javascript复制
锦囊
杀
我是p
内部p
内部span
9.伪元素选择器
::first-line
选择元素的第一行
::first-letter
::before和::after
这两个主要用来给元素的前面或后面插入内容。
（1）这个最常用的便是是清除浮动了，无需再添加一个空的 div 并应用 clear:both; 样式，只需如下样式即可在元素尾部自动清除浮动。
(2)与"content"配合使用，可以实现许多特效。比如下面样式，当鼠标移动到链接上方，链接左右会出现悬浮方括号。
::selection
用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性：一个就是 background,另一个就是 color 属性。
10.选择器的权重
注：一般只有选择器直接选中才会用到权重计算
!importent ------------infinity
权重计算规则
第一等：代表内联样式，如: style=””，权值为1000。第二等：代表ID选择器，如：#content，权值为0100。第三等：代表类，伪类和属性选择器，如.content，权值为0010。第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。继承的样式没有权值。
比较规则
1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。在权重相同的情况下，后面的样式会覆盖掉前面的样式。通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。
11.网址导航表格案例
零基础学前端开发之CSS3深入选择器_html5_0211.1 案例
11.2之前html样的，如何转换成css的样式，
代码语言：javascript复制
| 新闻 | 新浪 | 网易 | 腾讯 |
| 军事 | 铁血 | 中华 | 凤凰 |
代码语言：javascript复制table{text-align: center;border-collapse: collapse;
margin:0 auto;width:80%;}
td,caption{border: 1px solid #999999;line-height: 50px;}
caption{background-color: red;font-weight: bolder;border-bottom:0px;
font-size: 28px;border-bottom: 0px;}
tr.ji{background-color: antiquewhite;}
tr.ou{background-color: azure;}
td.bt{font-weight: bolder;font-size: 24px;}margin:0 auto;上下为0 左右自动适应，这样居中了。
input{border: none;width:20%}