澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站:顺应初我们,中总结了何

2019-10-12 作者:澳门新萄京赌场网址   |   浏览(148)

CSS接纳器 4 中回顾了什么样新东西?

2015/02/23 · CSS · CSS, 选择器

本文由 伯乐在线 - 木木的Joanna 翻译,JustinWu 校稿。未经许可,禁绝转发!
日语出处:grack.com。款待加入翻译组。

CSS选择器4是下一代CSS选取器规范,上一个本子在起草多年后于2011年提出。

那么,这一本子的新东西有哪些呢?

1、给导航加分水岭,左右

 1、

接纳器配置文件

CSS选拔器分为两类:急迅选用器和全体选用器。快速选用器适用于动态CSS引擎。完整选取器适用于速度不占关键因素的情形,举个例子document.querySelector。

选取器上下文不相同,发挥的作用不一。一些功效强盛的采纳器特别不满太慢了,不能够切实地适应高质量景况。要做到那或多或少,须要在选用器标准里定义三个布局文件[参见]。

 .nav li::before,.nav li::after{

 

:HAS

:has选择器是第四代选择器中最有趣的部分,但它有个重要的警告,下面会描述。它能让你改变选择器的选择对象,即实际将被赋予样式的特定元素,同时它还会继续和后文中出现的元素进行匹配。它开辟了许多匹配上下文的新方法。例如,匹配一个header:

CSS

// 有叁个头成分的任何部分 section:has(h1, h2, h3, h4, h5, h6)

1
2
// 有一个头元素的任何部分
section:has(h1, h2, h3, h4, h5, h6)

可能开采职员能够相配只含有一定数额图片的段子:

CSS

// 左边栏和三个子类 div.sidebar :has(*:nth-child(5)) // 拥有第5个子类 :not(:has(*:nth-child(6))) // 但不富有第6个子类

1
2
3
4
// 侧边栏和五个子类
div.sidebar
    :has(*:nth-child(5))       // 拥有第5个子类
    :not(:has(*:nth-child(6))) // 但不具有第6个子类

居然足以相配蕴涵特定子类数量的因素(本例有5个):

CSS

// 匹配三个全部都是图像的段落 :has(img) // 具备一个图像 :not(:has(:not(img))) //全体内容均是图像

1
2
3
// 匹配一个全是图像的段落
  :has(img)             // 拥有一个图像
  :not(:has(:not(img))) //所有内容均是图像

提个醒:此时:has选拔器并从未想像中的赶快,那标记它不可能在样式表中使用。由于当下还从未人完成那几个选取器,它的个性特点还尚待研讨。若是浏览器跟得上的话,它高效就会用来日常样式了。

早先时期版本的正式会在焦点旁加多三个感慨号(!)表示警示,但是未来平素不了。

            content:"";

*:通用成分选取器

:MATCHES

:matches是:moz-andy和:webkit-any的标准化选择器,已经与浏览器前缀共存了一段时间。它允许样式表的创建人员删除重复的规则路径。

它的用处是,对多个看似笛Carl积(Cartesian-product-esque)的SCSS/SASS输出进行整治,举例上边这段:

CSS

body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4), body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard, body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) { .... }

1
2
3
4
5
6
7
8
9
10
body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard,
  body > .layout > .body > .content .post p a.image.standard:first-child:nth-last-child(4),
  body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard,
  body > .layout > .body > .content .post li a.image.standard:first-child:nth-last-child(4),
  body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4) ~ a.image.standard,
  body > .layout > .body > .content .page p a.image.standard:first-child:nth-last-child(4),
  body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) ~ a.image.standard,
  body > .layout > .body > .content .page li a.image.standard:first-child:nth-last-child(4) {
       ....
  }

能够出口为下面这种更有益于维护的体制:

CSS

body > .layout > .body > .content :matches(.post, .page) :matches(p, li) :matches(a.image.standard:first-child:nth-last-child(4), a.image.standard:first-child:nth-last-child(4) ~ a.image.standard), .... }

1
2
3
4
5
6
7
body > .layout > .body > .content
    :matches(.post, .page)
    :matches(p, li)
    :matches(a.image.standard:first-child:nth-last-child(4),
             a.image.standard:first-child:nth-last-child(4) ~ a.image.standard),
       ....
  }

上述Mozilla的参谋页列出了关于质量的有的注意事项。既然那些采用器致力于成为正式,我们盼望能收看更加多关于质量方面包车型地铁行事,使之更省事。

            position:absolute;

 

:NTH-CHILD(AN B [OF S])

即使:nth-of-typey自世纪之交就曾经存在,但第四代接纳器在这里基础上扩大了三个过滤效果:

CSS

div :nth-child(2 of .widget)

1
div :nth-child(2 of .widget)

挑选器S用于明确索引,它独自于伪类左边包车型客车选用器。如正式中提到的,即使你提前明白了成分的的项目,就足以将:nth-of-type选拔器转化为:nth-child(… of S),如:

CSS

img:nth-of-type(2) => :nth-child(2 of img)

1
img:nth-of-type(2) => :nth-child(2 of img)

以此采用器和:nth-of-type的界别是神秘但最主要的。对于:nth-of-type,无论是不是给四个要素增添了选取器,它都会对有雷同标志的从头到尾的经过参与隐式索引。每当你使用多个新的选择器,:nth-child(n of S)就能使计数器加1.

本条选取器有神秘的劣势。因为:nth-child 伪类中的选取器是独自于其右侧的选拔器的,若是您在左臂制定二个非:nth-child中的父级选用器的话,你可能会奇异地漏掉一些东西。举个例子:

CSS

tr:nth-child(2n of [disabled])

1
tr:nth-child(2n of [disabled])

:NOT()

您大概早已用了:not一段时间,你能够通过传递八个参数来节省大小和手工业输入。

CSS

// 相当于: // :not(h1):not(h2):not(h3)... :not(h1, h2, h3, h4, h5, h6)

1
2
3
// 相当于:
//    :not(h1):not(h2):not(h3)...
:not(h1, h2, h3, h4, h5, h6)

            top:14px;

* { margin: 0; padding: 0; }

后人结合符(>>)

早期CSS中,后人选择符的功力是一段()空间,可是现在效应特别旗帜分明:

CSS

// 相当于: // p img { ... } p >> img { ... }

1
2
3
// 相当于:
//    p img { ... }
p >> img { ... }

这么做是为着联络直接后代(>)和shadow DOM(>>>)操作符。

            height:25px;

*选取器是挑选页面上的一体因素,上边的代码作用是把全体要素的margin和padding设为0,最基本的铲除默许CSS样式方法

列结合符(||)和:NTH-COLUMN

CSS4增添了列操作效用,那样开垦职员就能够更便利地在表格里对独立的列举办统一希图。近些日子设计表格供给接纳 :nth-child,如此一来就无需使用colspan 属性来协作表格的列。

通过使用新的列组合符(||),你能够用<col>标识表中的同样列,然后对该列中的单元格实行规划:

CSS

// 上边包车型大巴事例使单元格C,E,G为卡其色。 // 例子来源于CSS选用器4规范col.selected || td { background: yellow; color: white; font-weight: bold; } <table> <col span="2"> <col class="selected"> <tr><td>A <td>B <td>C <tr><td colspan="2">D <td>E <tr><td>F <td colspan="2">G </table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 下面的例子使单元格C,E,G为黄色。
// 例子来源于CSS选择器4规范
col.selected || td {
  background: yellow;
  color: white;
  font-weight: bold;
}
 
<table>
  <col span="2">
  <col class="selected">
  <tr><td>A <td>B <td>C
  <tr><td colspan="2">D <td>E
  <tr><td>F <td colspan="2">G
</table>

除此以外,样式表设计人士还足以用:nth-column和:nth-last-column来铺排单元格。

那二种处境下,假诺三个单元格横跨多列,它可以同盟这一个列中任意一个选拔器。

            width:1px; 

 

: PLACEHOLDER-SHOWN

选拔器标准里还添了二个:placeholder-shown,当且仅当placeholder 属性文本可以预知时,它将会协作三个输入的因素。

        }

*选用器也能够使用到子采取器中,举例上面包车型客车代码:

:ANY-LINK

另贰个一点都不大更动便是:any-link,它的职能正是非常任何:link和:visited可非常的开始和结果。

CSS

// 相当于: // a:link, a:visited { ... } a:any-link { ... }

1
2
3
// 相当于:
//    a:link, a:visited { ... }
a:any-link { ... }

     

 

结论

CSS4中的选取器尚在钻探之中,可是大家看来,已有众多卓有功效的选取器为开垦人士提供了新的格局和工具,方便他们的统一准备。标准中也是有此外新的采纳器,他们的会见、有效性核查和体裁范围限制等概念文中并未涉及。

固然你想试验弹指间那个接纳器,你得等到可相当的浏览器现身,或是尝试一下初期的版本,如:moz-any和:webkit-any的效果和:matches就同一,WebKit中期就帮助:nth-child选择器。

因为那是小编的草案,伪类的名字或者会发生转移。要收获更加多内容,请小心CSS 4选拔器标准。

如有提议可在Instagram 上 @mmastrac让自己清楚。

2015年1月11日

        .nav li::before{

#container * { border: 1px solid black; }

连锁小说

  • 应用CSS3的:nth-child发明新的选拔器 2015年1月9日
  • 大家怎么满足AppEngine(而非其他)  2010年11月23日
  • PubSubHubbub vs. rssCloud 2009年9月7日
  • Fedora Core 3:在chroot软禁条件下运作CVS 2004年11月14日

    赞 1 收藏 评论

            left:0;

这么ID为container 的保有子标签成分都被入选了,何况安装了border。

有关作者:木木的乔Anna

澳门新萄京官方网站 1

简要介绍还没来得及写 :) 个人主页 · 作者的稿子 · 10

澳门新萄京官方网站 2

            background:-webkit-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

 

            background:-moz-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

2

            background:-o-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

 

            background:-ms-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

#ID:ID选择器

            background:linear-gradient(to bottom,#f06254,#ffffff,#f06254);

 

        }

#container { width: 960px; margin: auto; }

        .nav li::after{

ID选用器是CSS中效能最高的选取器,使用的时候要确定保障ID的独一性。

            right:0;

 

            background:-webkit-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

3

            background:-moz-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

 

            background:-o-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

.class:类选取器

            background:-ms-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

 

            background:linear-gradient(to bottom,#f06254,#bf554c,#f06254);

.error { color: red; }

        }

类采取器成效低于ID采用器,一个页面能够有多少个class,并且class能够放在分歧的标签中央银行使。

        

 

        

4

         .nav li:first-child::before{ background:none;}

 

         .nav li:last-child::after{ background:none;}

X Y:标签组合选取器

 

 

2、

li a { text-decoration: none; }

 

标签组合选拔器也是常用的选用器。

html代码:

 

 

5

<a href="xxx.pdf">笔者链接的是PDF文件</a>

 

<a href="#" class="icon">作者类名是icon</a>

X:标签接纳器

<a href="#" title="我的title是more">我的title是more</a>

 

 

a { color: red; } ul { margin-left: 0; }

css代码  

设若您只是想要页面中的某个标签样式改造,能够接纳使用标签选取器。

 

 

a[class^=icon]{

6

  background: green;

 

  color:#fff;//定义以icon起先的其余字符串

X:visited and X:link

}

 

a[href$=pdf]{

a:link { color: red; } a:visted { color: purple; }

  background: orange;

伪类选用器,最常用的为A标签

  color: #fff;定义href以pdf结尾任何字符串

 

}

7

a[title*=more]{

 

  background: blue;

X Y:毗邻元素选拔器

  color: #fff;定义有title的的此外字符串

 

}

ul p { color: red; }

例如:<style>

交界成分选拔器,相称的是富有紧随X元素之后的同级成分Y

    a[class^=column]{

 

        background:#fc0001;

8

        }

 

    a[href$=doc]{

X > Y:子元素采取器

        background:#007d02;

 

    }

div#container > ul { border: 1px solid black; }

    a[title*=box]{

匹配#container下的有所子成分。

        background:#0000fe;

有关X>Y和X Y的分别请看上面包车型客车html实例:

    }

澳门新萄京官方网站:顺应初我们,中总结了何等新东西。 

</style>

<div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

<a href="##" class="columnNews">作者的背景想成为深藕红</a>

选择器#container > ul只会合作到第贰个UL,也便是#container的子成分UL,并非li里面的ul,不过div ul则可以协作到持有DIV里面包车型客车ul。

<a href="##" class="columnVideo">小编的背景想成为浅青</a>

 

<a href="##" class="columnAboutUs">笔者的背景想变成土灰</a><br/>

9

<a href="1.doc">作者的背景想成为肉色</a>

 

<a href="2.doc">小编的背景想造成钴蓝</a><br/>

X ~ Y:

<a href="##" title="this is a box">我的背景想形成莲灰</a>

 

<a href="##" title="box1">小编的背景想产生森林绿</a>

ul ~ p { color: red; }

<a href="##" title="there is two boxs">笔者的背景想成为浅灰褐</a>

相称任何在X成分之后的同级P成分。也便是挑选了UL之后的同级全部的成分。

 

 

 

10

3、

 

结构性伪类选拔器root

X[title]:属性接纳器

:root选用器,从字面上大家就足以很明亮的领会是根选用器,

 

他的意趣正是相配成分E所在文档的根成分。在HTML文书档案中,根成分始终是<html>

a[title] { color: green; }

(“:root”选拔器等同于<html>成分,简单题说:

十三分具有某属性的竹签,例如实例中是相配具备title属性的a标签。

:root{background:orange}

 

 

11

html {background:orange;}

 

 

X[href="foo"]

获得的效应等同。

 

 

a[href="] { color: #1f6053; /* nettuts green */ }

提出利用:root方法。

也属于属性选用器,匹配属性中为有些值的竹签。比如实例中分外的为href="

 

 

除此以外在IE9以下仍是能够依靠“:root”落成hack作用。)

12

 

 

 

X[href*="nettuts"]

4、

 

结构性伪类选用器—not

a[href*="tuts"] { color: #1f6053; /* nettuts green */ }

:not选取器称为否定选用器,和jQuery中的:not选用器一模二样,能够选用除有些成分之外的有着因素。就拿form成分来讲,举例说你想给表单中除submit按键之外的input成分加多墨蓝边框,CSS代码能够写成:form {

属于属性选用器,相配href中颇负含有tuts的标签。正则相配

input:not([type="submit"]){

 

  border:1px solid red;

13

}//意思是除了type=submit意外的input边框为革命

 

 

X[href^="http"]

 

 

 

a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }

5、结构性伪类选择器—empty

与地点的属相选拔标签类似,不过相称的以http早先的A标签,正则相称

:empty采用器表示的正是空。用来挑选未有其余内容的成分,这里未有内容指的是少数内容都未曾,哪怕是三个空格。

 

比如说,你的文书档案中有四个段落p成分,你想把尚未另外内容的P元素隐蔽起来。大家就能够使用“:empty”选用器来决定。

澳门新萄京官方网站:顺应初我们,中总结了何等新东西。14

HTML代码:

 

<p>作者是几个段落</p>

X[href$=".jpg"]

<p> </p>

 

<p></p>​

a[href$=".jpg"] { color: red; }

CSS代码:

相配属性中以.jpg结尾的价签,正则相配,也是性质选取器的一种

p{

 

 background: orange;

15

 min-height: 30px;

 

}

X[data-*="foo"]

p:empty {

 

  display: none;

假诺你要协作全体的图片链接,你能够由此下边包车型客车CSS来促成:

}​

 

6、结构性伪类采纳器—target

a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; }

:target选拔器称为目的选用器,用来合作文书档案(页面)的url的有些标记符的对象成分。

不过一旦大家给a标签增添三个data-filetype属性,大家就可以动用上面包车型客车CSS来一点也不慢的选料我们需求相配的标签了。

例:

 

<h2><a href="#brand">Brand</a></h2>

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a> </html> <pre lang="css">a[data-filetype="image"] { color: red; }

<div class="menuSection" id="brand">

16

  content for Brand

 

</div>

X[foo~="bar"]

<h2><a href="#jake">Brand</a></h2>

 

<div class="menuSection" id="jake">

a[data-info~="external"] { color: red; }   a[data-info~="image"] { border: 1px solid black; }

 content for jake

相称属性中具备多个空格分隔的值、个中一个值格外“bar”的X成分,举例上面包车型地铁例证:

</div>

 

<h2><a href="#aron">Brand</a></h2>

17

<div class="menuSection" id="aron">

 

    content for aron

X:checked

</div>

 

 

input[type=radio]:checked { border: 1px solid black; }

css代码:

本条选择器首要用以checkbox,选拔checkbox为方今入选的老大标签。

#brand:target {

 

  background: orange;

18

  color: #fff;

 

}

X:after

#jake:target {

 

  background: blue;

.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; }   .clearfix { *display: inline-block; _height: 1%; }

  color: #fff;

before 和after是在选用的标签在此之前依然现在插入内容,平常用来破除浮动,可是对于IE6、IE7是不可用的。

}

 

#aron:target{

19

  background: red;

 

  color: #fff;

X:hover

}

 

 

div:hover { background: #e3e3e3; }

 

最常用的正是A标签了,不过在IE6浏览器下除了A标签之外,别的标签div:hover不相称。

7、结构性伪类选用器—first-child

 

“:first-child”选用器表示的是选拔父成分的率先个子成分的成分E。简单点清楚正是选择成分中的第二个子成分,记住是子成分,并非后人成分。

20

HTML代码:

 

<ol>

X:not(selector)

  <li><a href="##">Link1</a></li>

 

  <li><a href="##">Link2</a></li>

*:not(p) { color: green; }

  <li><a href="##">link3</a></li>

挑选除了()中选用器之外的价签成分。

</ol>

 

CSS代码:

21

 

 

 

X::pseudoElement

ol > li:first-child{

 

  color: red;

p::first-line { font-weight: bold; font-size: 1.2em; } p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }

}//讲html的队列号第一个变成土灰,若是是冬辰列表则是前者的体系图标变色

分级用于相称成分的第一行和第八个假名。看实例:

First-child与last-child刚好相反

 

 

22

8、结构性伪类选拔器—nth-child(n)

 

“:nth-child(n)”选取器用来定位有些父成分的三个或四个特定的子成分。在那之中“n”是其参数,况且能够是整数值(1,2,3,4),也得以是表明式(2n 1、-n 5)和器重词(odd、even),但参数n的初叶值始终是1,而不是0。也等于说,参数n的值为0时,选取器将精选不到任何相称的成分。

X:nth-child(n)

HTML代码:

 

<ol>

li:nth-child(3) { color: red; }

  <li>item1</li>

相配X成分中从头数第几个标签,譬如地点的代码是相配的是第七个li标签。

  <li>item2</li>

 

  <li>item3</li>

23

  <li>item4</li>

 

</ol>​

X:nth-last-child(n)

CSS代码:

 

ol > li:nth-child(2n){

li:nth-last-child(2) { color: red; }

  background: orange;

与上贰个采纳器相反,那个采取器是倒序相称第几个标签,上面的代码的意思是相称尾数第一个li标签

}//通过“:nth-child(n)”选拔器,并且参数使用表明式“2n”,将偶数行列表背景观设置为鹅黄。

 

 

24

9、结构性伪类选取器—nth-last-child(n)

 

“:nth-last-child(n)”选用器和后面包车型客车“:nth-child(n)”选用器特别的平日,只是这里多了二个“last”,所起的功效和“:nth-child(n)”选用器有所不一致,从某父成分的结尾二个子成分初阶企图,来抉择特定的成分

X:nth-of-type(n)

ol > li:nth-last-child(5){

 

  background: orange;

ul:nth-of-type(3) { border: 1px solid black; }

}//选取列表中尾数第多少个列表项,将其背景设置为淡紫白。

与:nth-child()作用类似,可是仅特别使用同种标签的要素

10、first-of-type选择器

 

“:first-of-type”选用器类似于“:first-child”采用器,不一致之处正是钦赐了成分的品种,其关键用于定位贰个父成分下的某部项指标率先个子成分。

25

通过“:first-of-type”选用器,定位div容器中的第二个p成分(p不一定是容器中的第二个子成分),并安装其背景观为暗红。

 

.wrapper > p:first-of-type {

X:nth-last-of-type(n)

  background: orange;

 

//last-of-type选择器

ul:nth-last-of-type(3) { border: 1px solid black; }

“:last-of-type”选择器和“:first-of-type”采纳器作用是均等的,区别的是他挑选是父成分下的有个别项指标最终八个子成分。

与:nth-last-child() 功用类似,不过仅极其使用同种标签的要素

 

 

 

26

 

 

11、nth-of-type(n)选择器

X:first-child

“:nth-of-type(n)”选择器和“:nth-child(n)”选取器非常周围,分化的是它只总括父成分中钦定的某系列型的子成分。当有个别元素中的子成分不单单是同一连串型的子成分时,使用“:nth-of-type(n)”选取器来定位于父元素中某连串型的子元素是特别便于和有效性的。在“:nth-of-type(n)”选用器中的“n”和“:nth-child(n)”接纳器中的“n”参数也同样,能够是现实的偏分头,也得以是说明式,还能是首要词。

 

例:.wrapper > p:nth-of-type(2n){

ul li:first-child { border-top: none; }

  background: orange;

相配其父成分的第n个子成分,第三个号码为1

}通过“:nth-of-type(2n)”采取器,将容器“div.wrapper”中偶数段数的背景设置为灰湖绿。

 

18、nth-last-of-type(n)选择器

27

“:nth-last-of-type(n)”选取器和“:nth-of-type(n)”选用器是均等的,接纳父成分中钦赐的某种子元素类型,但它的初叶方向是从尾数子元素伊始,并且它的应用办法类似于上节中介绍的“:nth-last-child(n)”选取器同样。

 

透过“:nth-last-of-type(n)”采纳器将容器“div.wrapper”中的倒数第多个段子背景设置为天青。

X:last-child

.wrapper > p:nth-last-of-type(3){

 

  background: orange;

ul > li:last-child { color: green; }

}

协作其父成分的尾数第n个子成分,第多个号码为1

 

 

12、only-child选择器

28

“:only-child”选拔器采纳的是父成分中独有叁个子成分,何况唯有独一的一个子元素。也正是说,相配的要素的父成分中唯有一个子成分,而且是贰个独一的子元素。

 

演示演示

X:only-child

因而“:only-child”选取器,来支配只有三个子成分的背景样式,为了更加好的明白,我们以此示例通过对照的办法来向大家演示。

 

HTML代码:

div p:only-child { color: red; }

<div class="post">

卓殊父成分下仅局地三个子成分,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)

  <p>笔者是叁个段落</p>

 

  <p>我是一个段落</p>

29

</div>

 

<div class="post">

X:only-of-type

  <p>我是二个段落</p>

 

</div>

li:only-of-type { font-weight: bold; }

CSS代码:

相称父成分下行使同种标签的并世无两贰个子成分,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)

.post p {

 

  background: green;

30

  color: #fff;

 

  padding: 10px;

X:first-of-type

}

 

.post p:only-child {

li:only-of-type { font-weight: bold; }

  background: orange;

合作父成分下采纳同种标签的第一个子成分,等同于:nth-of-type(1)

}

 

 

 

13、only-of-type选择器

“:only-of-type”选拔器用来选取一个成分是它的父成分的唯一二个同样类其余子成分。那样说大概不太好理解,换一种说法。“:only-of-type”是表示五个元素他有那个个子成分,而里边唯有一种档次的子成分是独步天下的,使用“:only-of-type”选取器就能够选中那一个成分中的独一三个类型子成分。

演示演示

经过“:only-of-type”选拔器来修改容器中独有一个div成分的背景象为碧绿。

HTML代码:

<div class="wrapper">

  <p>笔者是三个段落</p>

  <p>作者是贰个段落</p>

  <p>作者是一个段落</p>

  <div>小编是三个Div元素</div>

</div>

<div class="wrapper">

  <div>小编是三个Div</div>

  <ul>

    <li>小编是一个列表项</li>

  </ul>

  <p>作者是三个段落</p>

</div>

CSS代码:

.wrapper > div:only-of-type {

  background: orange;

}

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站:顺应初我们,中总结了何

关键词: