---条件选择器：--- .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>