CSS3新添加的选择器

时间:2022-05-20 23:41:51
---条件选择器:---

.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>