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>