一:结构性伪类选择器----root
:root选择器,跟选择器,匹配元素E所在文档的根元素
<div>:root选择器的演示</div>
:root { background:orange; }
演示结果:
“:root”选择器等同于<html>元素
:root{background:orange} /*等同于*/ html {background:orange;}
<!------------------------------------------------------------------------------------------------------------------------->
二:结构性伪类选择器-----not
:not选择器称为否定选择器,可以选择除了某个元素之外的所有元素
例如:想给表单中除了submit之外的input元素添加红色边框
css:
form { width: 200px; margin: 20px auto; } div { margin-bottom: 20px; } input:not([type="submit"]){ border:1px solid red; }
<form action="#"> <div> <label for="name">Text Input:</label> <input type="text" name="name" id="name" placeholder="John Smith" /> </div> <div> <label for="name">Password Input:</label> <input type="text" name="name" id="name" placeholder="John Smith" /> </div> <div> <input type="submit" value="Submit" /> </div> </form>
演示结果:
<!---------------------------------------------------------------------------------------------------------------------->
三:结构性伪类选择器------empty
:empty选择器表示为空,用来选择没有任何内容的元素
<p>我是一个段落</p> <p> </p> <p></p>
p{ background: orange; min-height: 30px; } p:empty { display: none; }
演示结果:
<!---------------------------------------------------------------------------------------------------------------------->
四:结构性伪类选择器------target
:target称为目标选择器,用来匹配文档的url的某个标签符的目标元素。
css
.menuSection{ display: none; } brand:target{/*这里的:target就是指id="brand"的div对象*/ display:block; }
HTML
<h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div>
<!---------------------------------------------------------------------------------------------------------------------->
五:结构性伪类选择器-------first-child
“:first-child”选择父类元素中的第一个子元素,
ol > li:first-child{ color: red; }
说明:将列表第一个元素字体颜色设置为红色
<!---------------------------------------------------------------------------------------------------------------------->
六:结构性伪类选择器----------last-child
“last-child”与“first-child”相对应,选择父类元素中的最后一个元素
<!---------------------------------------------------------------------------------------------------------------------->
七:结构性伪类选择器----------nth-child(n)
":nth-child(n)"选择器用来定位某个父元素的一个或多个特定的子元素,其中n可以是具体数字亦可以是表达式(2n或2n+1)
ol > li:nth-child(2n){ background: orange; }
注:通过“:nth-child(2n)”选择器,将偶数行列表背景色设置为橙色,顺序为从上到下
<!---------------------------------------------------------------------------------------------------------------------->
八:结构性伪类选择器---------nth-last-child(n)
":nth-last-child"选择器也是用来定位某父类元素中的一个或多个特定子元素,但是顺序为倒序,从最后一个元素算;
ol > li:nth-last-child(5){ background: orange; }
注:例子为设置倒数第五个元素背景为橘色
<!---------------------------------------------------------------------------------------------------------------------->
九:结构性伪类选择器---------first-of-type
”:first-of-type“选择器类似于”:first-child“选择器,不同之处为”:first-of-type“指定了元素类型
/*设置第一个p的背景为橘色*/ p:first-of-type { background: orange; }
<!---------------------------------------------------------------------------------------------------------------------->
十:结构性伪类选择器-------nth-of-type(n)
":nth-of-type(n)"选择器与":nth-child(n)"选择器类似;但是":nth-of-type(n)"选择器只计算父元素中指定的某种类型子元素
/*将p标签的偶数航的背景设置为橘色*/ p:nth-of-type(2n){ background: orange; }
<!---------------------------------------------------------------------------------------------------------------------->
十一:结构性伪类选择器--------last-of-type
":last-of-type"选择器和":first-of-type"选择器功能一样;只是他选择某父类元素的最后一个元素
/*最后一个p元素设置为橘色*/ p:last-of-type{ background: orange; }
<!---------------------------------------------------------------------------------------------------------------------->
十二:结构性伪类选择器---------nth-last-of-type(n)
“:nth-last-of-type(n)
”选择器和“:nth-of-type(n)
”选择器是一样的,选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始,而且它的使用方法类似于上节中介绍的“:nth-last-child(n)
”选择器一样。
/*倒数第三个p元素背景设置为橘色*/ p:nth-last-of-type(3){ background: orange; }
<!---------------------------------------------------------------------------------------------------------------------->
十三:结构性伪类选择器-------only-child
“:only-child
”选择器选择的是父元素中只有一个子元素,而且只有唯一的一个子元素。也就是说,匹配的元素的父元素中仅有一个子元素,而且是一个唯一的子元素。
/*当某个父类中只包含一个《p》元素,设置<p>元素背景为橘色*/ .post p:only-child { background: orange; }
<!---------------------------------------------------------------------------------------------------------------------->
十四:结构性伪类选择器-----------only-of-type
“:only-of-type”
是表示一个元素他有很多个子元素,而其中只有一种类型的子元素是唯一的,使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。
<!---------------------------------------------------------------------------------------------------------------------->