CSS3新添加的选择器

---条件选择器：---
 
.ccc[cusid*= value]
 
{
 
 backgroud-color:#0094ff;
 
} //表示使用了class="ccc"元素自定义属性cusid的值包含value字符的即可使用如下样式。
 
 [cusid^= value]
 
{
 
 backgroud-color:#0094ff;
 
} //表示元素自定义属性cusid的值以value字符开头的即可使用如下样式。
 
 [cusid$= value]
 
{
 
 backgroud-color:#0094ff;
 
} //表示元素自定义属性cusid的值以value字符结尾的即可使用如下样式。
 
---伪选择器：---
 
p:first-line
 
{
 
backgroud-color:#0094ff;
 
}//将p的第一行内容变使用该样式。
 
p:first-letter
 
{
 
backgroud-color:#0094ff;
 
}//将p的第一个子或其第一个单词的首字母使用该样式。
 
 li:before
 
{
 
content:"a";
 
color:red;
 
}//给所有的li之前加一个字母a并且为红色（若为after则为在后面追加该内容）。
 
---结构性伪类选择器：---
 
:root
 
{
 
backgroud-color:#0094ff;
 
}//给根级元素使用样式（范围要大于body）。
 
:empty
 
{
 
backgroud-color:#0094ff;
 
}//给标签内容为空的标签设置上背景。
 
body *:not(h1)
 
{
 
backgroud-color:#0094ff;
 
}//给body元素使用样式但除了其中的h1。
 
:target
 
{
 
backgroud-color:#0094ff;
 
}//若一个超链接href绑定了一个元素（如：<a href="#A"></a>..<div id="A"></div>），当点击超链接之后该元素会使用其样式。
 
---以ul中的li为例：---
li:first-child
{
backgroud-color:#0094ff;
}//将第一个li变色
li:nth-child(3)
{
backgroud-color:#0094ff;
}//将第三个li变色
li:nth-child(even)
{
backgroud-color:#0094ff;
}//将偶数（odd为奇数）li变色
---以input，type="email"表单元素为例：---
 
input[type="email"]:invalid
{
backgroud-color:red;
 
}//如果写入的表单内容不合法则显示红色
input[type="email"]:valid
{
backgroud-color:#0094ff;
 
}//如果写入的表单内容合法则显示#0094ff
 
---选中文本区域变色---
::selection
{
backgroud-color:green;
}//选中的文本区域变为绿色
 
input[type="text"]::selection
{
backgroud-color:green;
}//所有input，text元素内选中的文本区域变为绿色
　　
---控制兄弟元素---
div~span
{
background:red;
}//所有div的span兄弟变红色
如：2,3变色，而1不变色
<div>
<span>1</span>
</div>　　
<span>2</span>
<span>3</span>
---在一个元素前后加样式（并不添加元素）---
#a:before{
/*这里写123hello前边的样式代码*/
}
#a:after{
/*在这里写123hello后边的样式代码*/
}
<div id="a">123hello</div>