css3 新标准概念和选择器

模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等
CSS 用于控制网页的样式和布局。
CSS3 是最新的 CSS 标准。
CSS3 完全向后兼容，因此您不必改变现有的设计。浏览器通常支持 CSS2。

+++++++++++++++++++++++++++++++++++++++++++++++++++

IE9之后才支持css3
++++++++++++++++++++++++++++++++++++++++++++++++++

相邻兄弟选择器
li+li 选择下一个元素
span~p 选择span之后所有的同级p元素
ul>li 子选择器 只能选择亲儿子

属性选择器
[title] 选择所有title属性的元素
[title=a] 选择所有title=a的元素
[title=“1”] 值为数字或特殊字符必须加双引号
[class=“a b”] 值为多个必须加双引号
[class~=“a”] 选择用所有单词为a的元素
例：
<div class=“b a”></div> 正确
<div class=“a”></div> 正确
<div class=“ab b”></div> 错误
<div class=“aa a”></div> 正确

[class|=a] 选择要么a要么a-开头的完整单词的元素
例：
<div class=“a”></div> 正确
<div class=“a b”></div> 错误
<div class=“are”></div> 错误
<div class=“a-b”></div> 正确
[class^=a] 选择所有a开头的元素
例：
<div class=“a-b”></div> 正确
<div class=“aa”></div> 正确
<div class=“ba”></div> 错误
<div class=“b a”></div> 错误

[class$=a] 选择所有a结尾的元素
例：
<div class=“a-b”></div> 错误
<div class=“aa”></div> 正确
<div class=“ba”></div> 正确
<div class=“b a”></div> 正确
[class*=a] 选择所有带有a的元素

结构性伪类选择器(层级选择器)
:root 选择根目录 可以理解成html
:root{background:#f00;}
body{background:#00f;}
body :not(h1) 除子元素h1的所有子元素
p:empty 选择内容为空的元素(回车换行都不算空)
ul li:first-child 选择第一个(子)元素
ul li:last-child 选择最后一个(子)元素
ul li:nth-child(2) 选择第二个(子)元素
ul li:nth-last-child(2) 选择倒数第二个(子)元素
ul li:nth-child(odd) 所有正数下第奇数个(子)元素
ul li:nth-child(even) 所有正数下第偶个(子)元素
div p:nth-of-type(2) 有关这个元素的第二个(子)元素
div p:nth-last-of-type(2) 有关这个元素的倒数第二个(子)元素
div p:only-child 只有p元素是唯一一个(子)元素才有效

css3 新标准概念和选择器

原文：https://www.cnblogs.com/shiyi2009/p/14008331.html