---条件选择器：---
.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 ></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 >123hello</div>