css结构性伪类选择器

最新推荐文章于 2024-03-28 23:22:23 发布

ajianshi3728

最新推荐文章于 2024-03-28 23:22:23 发布

阅读量180

点赞数

原文链接：http://www.cnblogs.com/shineda/p/5140493.html

版权

一：结构性伪类选择器----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”选择器就可以选中这个元素中的唯一一个类型子元素。

转载于:https://www.cnblogs.com/shineda/p/5140493.html

ajianshi3728

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css结构性伪类选择器

一：结构性伪类选择器----root ：root选择器，跟选择器，匹配元素E所在文档的根元素<div>:root选择器的演示</div>:root { background:orange;}演示结果：“：root”选择器等同于<html>元素:root{background:orange...
复制链接

扫一扫