>

应用情势介绍

- 编辑:至尊游戏网站 -

应用情势介绍

玩转CSS选择器(风度翩翩) 之 使用方法介绍

2015/08/15 · CSS · 选择器

原著出处: Alsiso   

1、给导航加分界线,左右

前言

前些天整合治理了CSS一些技艺重要字,不过因为本人的文化过于软弱,认为思虑的不丰硕有不足,随后便在sf.gg建议了这几个题材《至于CSS大旨能力首要字都有啥?》,也是为着让决心的人同台插足进去,用他们的阅历告诉大家CSS中哪一块的知识点是珍视,可能说是不可欠缺的,也照旧说是应该打好基础的。

在整治那份CSS工夫首要字的上马,首先想到的是选择器,它看成最常用的的贰个风味,差不离每一天都在运用,然而只要让您讲出20种CSS选拔器,是否足以冲口而出呢? 哎,也许我们被浏览器逼的还栖息在CSS2.1那一个选取器把?CSS4标准都要出版了,大家还在玩这多少个?

至尊游戏网站 1

带着这一个问号,决定梳理一下事先使用的知识点,最后以多元小说的不二诀要说一说作者对选择器的知道,具体满含的剧情如下:

  • 选拔器的基本功运用,主假如CSS3,也会介绍新添CSS4选取器,包涵各浏览器对选拔器的支撑意况
  • 选取器的应用工夫,使用时常现身的有的难题,扒大器晚成扒解决方案,再说一说功用和优化的局地
  • 选拔器的优先级,理大器晚成理比较胸口痛的权重主题材料,如何更自在的知情它

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

导图与源码

本人在写那篇小说的时候会梳理意气风发份思维导图,用于更直观的查阅全部的CSS选用器,並且也可能有编写制定示例代码,更便利清楚小说中的示例。

有关思维导图和演示代码,会上传至Github,当然也会随着时光的同意,不定义补充和翻新
库房地址:
记挂导图:https://github.com/Alsiso/everyday/blob/master/codes/css-selectors/css…
示范代码:

关于everyday是本人每一日记录和总计的地点,这里有代码,布局方案,移动端适配方案等等,后续会一再的补充和更新,应接一起聊代码,玩前端。至尊游戏网站 2

            content:"";

主干选拔器

            position:absolute;

通配符选拔器 *

通配符选拔器用来采撷具备的因素

JavaScript

* { marigin: 0; padding: 0; }

1
2
3
4
5
* {
    marigin: 0;
    padding: 0;
}
 

在笔者之的稿子中讨论过CSS RESET,当中里面包车型大巴宗旨代码就是行使通配符选取器定义的,来重新初始化浏览器全体因素的内边距和外边距。

实则,通配符选取器还足以接收某三个成分下的全体因素

JavaScript

#demo *{ margin:0; }

1
2
3
4
#demo *{
    margin:0;
}
 

唯独使用通配符要谨慎,并非因为通配符会带来品质难题,而是滥用通配符会产生“承袭失效”或“承继短路”的主题材料,这种景色会对开荒形成一定水准的熏陶。

            top:14px;

要素选择器 E

要素选取器使用也很简单,它用来钦命HTML文书档案申月素的体裁

CSS

ul{ list-style:none; }

1
2
3
ul{
    list-style:none;
}

▲ 这里运用要素选拔器选择ul要素并剔除列表前面包车型地铁默许圆点

            height:25px;

类选用器.className

类接受器是最常用的生龙活虎种采用器,使用时须要在HTML文书档案成分上定义类名,然后与体制中的.className相相配,它一遍定义后,在HTML文书档案元素中是足以几度复用的。

CSS

CSS

.menu { margin:0 auto; }

1
2
3
.menu {
    margin:0 auto;
}

HTML

XHTML

<div class="menu"></div>

1
<div class="menu"></div>

类选用器还足以组合成分选用器来使用,若是文书档案中有三个因素都选择了.menu类名,可是你只想选取div要素上类名字为.menu的元素

CSS

CSS

div.menu { margin:0 auto; }

1
2
3
div.menu {
    margin:0 auto;
}

HTML

XHTML

<div class="menu"></div> <ul class="menu"></ul>

1
2
<div class="menu"></div>
<ul class="menu"></ul>

类选择器支持多类名使用,比如.menu.active其后生可畏采纳器只对成分中何况含有了menuactive八个类才会起效果

CSS

CSS

.menu { margin:0 auto; } .menu.active { font-weight:bold; }

1
2
3
4
5
6
.menu {
    margin:0 auto;
}
.menu.active {
    font-weight:bold;
}

HTML

XHTML

<div class="menu active"></div>

1
<div class="menu active"></div>

不过多类采纳器.className1.className2在 IE6+以上才支撑,关于浏览器对CSS选用器的支撑会上边包车型客车从头到尾的经过统一收拾列出表格。

            width:1px; 

id选择器#id

id接受器与地点的类选用器使用很肖似,通过在HTML文书档案中加多ID名称,然后与体制中的#id相匹配,不过两岸的最大的分别在于,ID选取器是八个页面中独一无二的值,不可多次施用,而class接收器是能够频频复用的。

CSS

CSS

#menu{ margin:0 auto; }

1
2
3
#menu{
    margin:0 auto;
}

HTML

XHTML

<div id="menu"></div>

1
<div id="menu"></div>

        }

群组采纳器s1,s2,...,sN

群组采取器在付出中也是很常用的,它用来将雷同样式的成分分组在联合,然后用逗号实行分割。

CSS

CSS

a:active,a:hover { outline: 0; }

1
2
3
a:active,a:hover {
  outline: 0;
}

▲ 这里统一去掉了a链接在点击和浮动时的虚线核心框。

     

子孙接收器E F

后人选用器是最常使用的选用器之生机勃勃,它也被称作包罗接受器,用于相称全体被E要素包罗的F元素,这里F要素不管是E要素的子成分恐怕是孙元素只怕是更加深等级次序的关联,都将被选中。

CSS

CSS

.menu li{ padding:0 ; }

1
2
3
.menu li{
    padding:0 ;
}

HTML

XHTML

<ul id="menu"> <li> <ul> <li></li> </ul> </li> </ul>

1
2
3
4
5
6
7
<ul id="menu">
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
</ul>

▲ 这里.menu下的li要素和嵌套的ul要素下的li的成分都会被增选,进行明白内边距。

        .nav li::before{

子成分选拔器E > F

子成分采纳器只好接收某成分的子成分,这里的F要素仅仅是E要素的子成分技能够被入选

CSS

CSS

.menu > li{ padding:0 ; }

1
2
3
.menu > li{
    padding:0 ;
}

HTML

XHTML

<ul id="menu"> <li> <ul> <li></li> </ul> </li> </ul>

1
2
3
4
5
6
7
<ul id="menu">
    <li>
        <ul>
            <li></li>
        </ul>
    </li>
</ul>

▲ 将会对.menu下的li子成分选中,但会忽略内部嵌套的li元素

            left:0;

周边兄弟成分选拔器E + F

隔壁兄弟选取器能够挑选紧接在另一成分后的要素,可是他们必得有贰个等同的父成分。比方E元素和F要素具备三个平等的父元素,而且F元素在E要素前面,那样我们就足以采纳相邻兄弟成分选拔器来采摘F元素。

CSS

CSS

h1 + p { margin-top:5px; }

1
2
3
h1 + p {
    margin-top:5px;
}

HTML

XHTML

<div> <h1>标题</h1> <p>内容</p> </div>

1
2
3
4
<div>
    <h1>标题</h1>
    <p>内容</p>
</div>

▲ 将会采取h1要素前边的弟兄成分p

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

通用兄弟选拔器E ~ F

通用兄弟成分选取器是CSS3新添生机勃勃种选拔器,用于选用某成分前面包车型大巴兼具兄弟成分。它和周边兄弟成分选取器用法相仿,但差别于后边贰个只是选拔相邻的后三个要素,而通用兄弟成分选择器是选拔享有因素

CSS

CSS

h1 ~ p { margin-top:5px; }

1
2
3
h1 ~ p {
    margin-top:5px;
}

HTML

XHTML

<div> <h1>标题</h1> <p>内容</p> <p>内容</p> <p>内容</p> </div>

1
2
3
4
5
6
<div>
    <h1>标题</h1>
    <p>内容</p>
    <p>内容</p>
    <p>内容</p>
</div>

▲ 将会筛选h1要素前面包车型大巴有所的男子成分p

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

属性接纳器

选择器 描述 CSS版本
E[attr] 匹配所有具有attr属性的E元素 2.1
E[attr=value] 匹配所有attr属性等于“value”的E元素 2.1
E[attr~=value] 匹配所有attr属性具有多个空格分隔的值、其中一个值等于“value”的E元素 2.1
E[attr^=value] 匹配所有attr属性值是以val开头的E元素 2.1
E[attr$=value] 匹配所有attr属性值是以val结束的E元素 3
E[attr*=value] 匹配所有attr属性值包含有“value”的E元素 3

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

E[attr]

E[attr]本性采用器是CSS3属性采取器最简便的风流罗曼蒂克种,用于选用具备att属性的E元素。

CSS

CSS

img[alt] { margin: 10px; }

1
2
3
img[alt] {
    margin: 10px;
}

HTML

XHTML

<img src="url" alt="" /> <img src="url" />

1
2
<img src="url" alt="" />
<img src="url" />

▲ 将会选取到第一张图纸,因为门当户对到了alt属性,你也能够利用多属性的艺术接受成分

CSS

img[src][alt] { margin: 10px; }

1
2
3
img[src][alt] {
    margin: 10px;
}

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

E[attr=value]

E[attr="value"]是内定了属性值value,进而减少了节制能够尤其可信的搜索到本人想要的要素。

CSS

CSS

input[type="text"] { border: 2px solid #000; }

1
2
3
input[type="text"] {
    border: 2px solid #000;
}

HTML

XHTML

<input type="text" /> <input type="submit" />

1
2
<input type="text" />
<input type="submit" />

▲ 将会筛选到type="text"表单成分。

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

E[attr~=value]

即使您要凭仗属性值中的词列表的某些词来开展精选成分,那么就供给运用这种性质接受器:E[attr~="value"],你会意识它和E[attr="value"]颇为的貌似,不过两岸的分别是,属性采取器中有浪头(~)时属性值有value时就相相称,未有波浪(~)时属性值要统统是value时才匹配。

CSS

CSS

div[class~="a"] { border: 2px solid #000; }

1
2
3
div[class~="a"] {
    border: 2px solid #000;
}

HTML

XHTML

<div class="a">1</div> <div class="b">2</div> <div class="a b">3</div>

1
2
3
<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>

▲ 将会筛选到第1、3个div要素,因为门户大概到了class品质,且属性值中有二个值为a

        }

E[attr^=value]

E[attr^=”value”]属性选用器,指的是筛选attr属性值以“value”千帆竞发的兼具因素

CSS

CSS

div[class^="a"] { border: 2px solid #000; }

1
2
3
div[class^="a"] {
    border: 2px solid #000;
}

HTML

XHTML

<div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div>

1
2
3
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

▲ 将会接纳到第1、2个div要素,因为门户十分到了class品质,且属性值以a开头

        .nav li::after{

E[attr$=value]

E[attr$="value"]属性接收器刚好与E[attr^="value"]至尊游戏网站,选拔器相反,这里是接受attr属性值以”value”结尾的拥有因素。

CSS

CSS

div[class$="c"] { border: 2px solid #000; }

1
2
3
div[class$="c"] {
    border: 2px solid #000;
}

HTML

XHTML

<div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div>

1
2
3
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

▲ 将会采取到第1、3个div要素,因为极度到了class天性,且属性值以c结尾

            right:0;

E[attr*=value]

E[attr*="value"]质量选用器表示的是筛选attr属性值中含有"value"字符串的具备因素。

CSS

CSS

div[class*="b"] { border: 2px solid #000; }

1
2
3
div[class*="b"] {
    border: 2px solid #000;
}

HTML

XHTML

<div class="abc">1</div> <div class="acb">2</div> <div class="bac">3</div>

1
2
3
<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

▲ 将会选拔到具备的因素,因为门户大概到了class品质,且属性值都包涵了b

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

E[attr|=”val”]

E[attr|="val"]是性质选取器中的最后风姿浪漫种,它被称作为特定属性选用器,那一个选项器会选拔attr属性值等于value或以value-始发的全部因素。

CSS

CSS

div[class|="a"] { border: 2px solid #000; }

1
2
3
div[class|="a"] {
    border: 2px solid #000;
}

HTML

XHTML

<div class="a-test">1</div> <div class="b-test">2</div> <div class="c-test">3</div>

1
2
3
<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>

▲ 将会选取第2个div要素,因为卓越到了class品质,且属性值以紧跟着"a-"的开头

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

伪类选拔器

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

动态伪类

常常动态伪类是在顾客操作体验时接触的,最普及的正是超链接,它具有访问前,鼠标悬停,被点击,已拜访4种伪类效果。

  • E:link 设置超链接a在未被访谈前的体裁
  • E:visited 设置超链接a已被访问过时的体制
  • E:hover 设置成分在其鼠标悬停时的体制
  • E:active 设置成分在被客商激活时的样式

而是在接受时的时候,应当要留意书写的依次,不然在分裂的浏览器中会带来一些竟然的失实。

CSS

a:link {} a:visited {} a:hover {} a:active {}

1
2
3
4
a:link {}
a:visited {}
a:hover {}
a:active {}

最可相信的记得顺序就是根据爱恨原则:l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)四个词来回顾。

再有贰个客商作为的动态伪类:focus,常用于表单元素(触发onfocus事件产生)时的体制。

CSS

input[type="text"]:focus{ border: 2px solid #000; }

1
2
3
input[type="text"]:focus{
    border: 2px solid #000;
}

▲ 当客户集中到输入框内,会给输入框加多二个边框颜色。

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

表单状态伪类

我们把以下3种情状称为表单状态伪类,你会意识那个重大字便是HTML表单成分的特性,checked用于type="radio"type="checkbox"够选中状态,disabled用于type="text"剥夺的意况,而enabled此间表示type="text"可用的事态。

  • E:checked 相称客商分界面上远在选中情景的成分E
  • E:enabled 相配客商界面上远在可用气象的成分E
  • E:disabled 相称客商分界面上居于禁用状态的成分E

CSS

CSS

input[type="text"]:enabled { background: #fff; } input[type="text"]:disabled{ background: #eee; } input:checked + span { background: red; }

1
2
3
4
5
6
7
8
9
input[type="text"]:enabled {
    background: #fff;
}
input[type="text"]:disabled{
    background: #eee;
}
input:checked + span {
    background: red;
}

HTML

XHTML

<input type="text" value="可用状态" /> <input type="text" value="可用状态" /> <input type="text" value="禁止使用状态" disabled="disabled" /> <input type="text" value="禁止使用状态" disabled="disabled" /> <label><input type="radio" name="radio" /><span>淡紫</span></label>

1
2
3
4
5
<input type="text" value="可用状态" />
<input type="text" value="可用状态" />
<input type="text" value="禁用状态" disabled="disabled" />
<input type="text" value="禁用状态" disabled="disabled" />
<label><input type="radio" name="radio" /><span>黑色</span></label>

▲ 将会给可用状态的文本框设置为深绿(#fff)背景,禁止使用状态设置为中蓝(#eee)背景,如果你选中了radio,它兄弟成分span的文本会产生莲红

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

结构伪类

  • E:first-child 相称父成分的第二个子成分E
  • E:last-child 相配父成分的末段叁个子成分E
  • E:nth-child(n) 匹配父成分的第n个子成分E,若是该子成分不是E,则接受符无效
  • E:nth-last-child(n) 相称父成分的倒数第n个子成分E,倘诺该子成分不是E,则接纳符无效
  • E:first-of-type 相称同类型中的第二个同级兄弟成分E
  • E:last-of-type 相配同类型中的最后一个同级兄弟元素E
  • E:nth-of-type(n) 相配同类型中的第n个同级兄弟成分E
  • E:nth-last-of-type(n) 相配同类型中的尾数第n个同级兄弟元素E
  • E:only-child 匹配父元素唯有的一个子元素E
  • E:only-of-type 相配同类型中的唯生龙活虎的一个同级兄弟成分E
  • E:empty 相配未有此外子成分(富含text节点)的成分E

E:first-child 和 E:last-child
E:first-child是用来接受父成分的第四个子成分E,不过它必需为父成分的第三个子成分,不然会失灵,比如表达

CSS

CSS

p:first-child { color:red; }

1
2
3
p:first-child {
    color:red;
}

HTML

XHTML

<div> <h1>标题</h1> <p>段落</p> </div>

1
2
3
4
<div>
    <h1>标题</h1>
    <p>段落</p>
</div>

▲ 你会发觉p要素的书体并从未成为淡紫灰,因为p要素前面还会有个h1,它并非父成分下的率先个子成分。

XHTML

<div> <p>段落</p> </div>

1
2
3
<div>
    <p>段落</p>
</div>

▲ 此时急需更改结构,效果才会平常。

E:last-childE:first-child采用器的法力近似,不一致的是E:last-child分选是的因素的末梢三个子成分。

CSS

CSS

p:last-child { color:red; }

1
2
3
p:last-child {
    color:red;
}

HTML

XHTML

<div> <h1>标题</h1> <p>段落</p> </div>

1
2
3
4
<div>
    <h1>标题</h1>
    <p>段落</p>
</div>

▲ 将p要素的字体设置为革命

E:nth-child(n) 和 E:nth-last-child(n)
E:nth-child(n)用以相称父元素的第n个子成分E,假如该子成分不是E,则选择符无效。
该选用符允许行使多个乘法因子(n)来作为换算情势,如下:

CSS

li:nth-child(2) { background:#fff}

1
li:nth-child(2) { background:#fff}

▲ 选用第多少个标签,“2足以是您想要的数字,最小从0起初”

CSS

li:nth-child(n+4) { background:#fff}

1
li:nth-child(n+4) { background:#fff}

▲ 选取大于等于4标签,“n”表示从整数

CSS

li:nth-child(-n+4) { background:#fff}

1
li:nth-child(-n+4) { background:#fff}

▲ 选取小于等于4标签

CSS

li:nth-child(2n) { background:#fff} li:nth-child(even) { background:#fff}

1
2
li:nth-child(2n) { background:#fff}
li:nth-child(even) { background:#fff}

▲ 接受偶数标签,2n也足以是even

CSS

li:nth-child(2n-1) { background:#fff} li:nth-child(odd) { background:#fff}

1
2
li:nth-child(2n-1) { background:#fff}
li:nth-child(odd) { background:#fff}

▲ 选用奇数标签,2n-1也足以是odd

CSS

li:nth-child(3n+1) { background:#fff}

1
li:nth-child(3n+1) { background:#fff}

▲ 自定义选拔标签,3n+1代表“隔二取大器晚成”

E:nth-last-child(n)又要从头反着来了,CSS3选拔器有正就有反

CSS

li:nth-last-child(3) { background:#fff}

1
li:nth-last-child(3) { background:#fff}

▲ 选拔倒数首个标签

E:first-of-type 和 E:last-of-type
E:first-of-type的行使办法相符于我们地点讲过的E:first-child,可是分裂在于该采纳器只会接受同类别的首先个因素,并不是父成分的首先个因素,举个例子表达:

CSS

CSS

p:first-of-type { color:red; } p:last-of-type { color:green; }

1
2
3
4
5
6
p:first-of-type {
    color:red;
}
p:last-of-type {
    color:green;
}

HTML

XHTML

<div> <h1>标题</h1> <p>段落</p> <p>段落</p> <div></div> </div>

1
2
3
4
5
6
<div>
    <h1>标题</h1>
    <p>段落</p>
    <p>段落</p>
    <div></div>
</div>

▲ 你会发觉第三个p要素的书体被安装为玛瑙红,第4个p要素的字体被安装为藏青,那正是E:first-of-typeE:first-child分裂之处。

E:nth-of-type(n) 和 E:nth-last-of-type(n)
那多少个选取器的用法形似于:nth-child(n)E:nth-last-child(n),关于界别也是选用器只会筛选同品种的小伙子成分,举个栗子

XHTML

<div> <p>第1个p</p> <p>第2个p</p> <span>第1个span</span> <p>第3个p</p> <span>第2个span</span> <p>第4个p</p> <p>第5个p</p> </div>

1
2
3
4
5
6
7
8
9
<div>
    <p>第1个p</p>
    <p>第2个p</p>
    <span>第1个span</span>
    <p>第3个p</p>
    <span>第2个span</span>
    <p>第4个p</p>
    <p>第5个p</p>
</div>

CSS

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

1
2
3
p:nth-child(3) {
    color:red;
}

▲ 假如采纳:nth-child(3)您会意识第三个p要素文本并从未成为奶油色。犹如我们前边说的,倘若第n个子成分不是E,则是对事情没有什么益处采纳符,但n会依次增加。

CSS

p:nth-of-type(3) { color:red; }

1
2
3
p:nth-of-type(3) {
    color:red;
}

▲ 不过利用:nth-of-type(3)后会发现第一个p要素文本棉被服装置为深红。

E:only-child 和 E:only-of-type
E:only-child用来协作父成分只有的一个子成分E,而E:only-of-type是代表一个要素它有无数个子成分,不过只会合营个中独有叁个子成分的因素,提及来有一点点绕口,来个栗子

HTML

XHTML

<div> <p>段落</p> </div> <div> <div>容器</div> <p>段落</p> <div>容器</div> </div>

1
2
3
4
5
6
7
8
<div>
    <p>段落</p>
</div>
<div>
    <div>容器</div>
    <p>段落</p>
    <div>容器</div>
</div>

CSS

p:only-child { color: red; }

1
2
3
p:only-child {
    color: red;
}

▲ 将会对第4个div要素下的p要素文本设置成粉青。

CSS

p:only-of-type { color: red; }

1
2
3
p:only-of-type {
    color: red;
}

▲ 不唯有会第2个div要素下的p要素文本设置成蟹青,也会对第二个div要素下的p要素文本设置成水绿,因为它是p成分中天下第一的三个同级兄弟成分。

<iframe width=”100%” height=”300″ src=”//jsfiddle.net/Alsiso/15h4ozee/embedded/” allowfullscreen=”allowfullscreen” frameborder=”0″></iframe>

E:empty
E:empty是用来采撷未有其余内容的因素,包括text节点,也正是象征连几个空格都不能够有

HTML

XHTML

<div> <p> </p> <p></p> </div>

1
2
3
4
<div>
    <p> </p>
    <p></p>
</div>

CSS

CSS

p:empty { height: 100px; }

1
2
3
p:empty {
    height: 100px;
}

▲ 将会对第三个空成分p设置二个惊人,为啥第二个会失效呢,因为该容器里面有一个空格。

        }

否定类

E:not(s)用以相称不含有s选用符的成分E,说到来不好通晓,那么说三个最常用的开销情况,就算大家要对ul要素下的有所li都抬高多个上边框用于内容分割,不过末了四个无需,如下:

HTML

XHTML

<ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> </ul>

1
2
3
4
5
6
<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>

CSS

CSS

ul li:not(:last-child) { border-bottom: 1px solid #ddd; }

1
2
3
ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

▲ 将会对列表中除最终豆蔻年华项外的具备列表项增添一条上边框

        

伪元素接收器

  • E:first-letter 选取文本块的第叁个字母
  • E:first-line 选择成分的率先行
  • E:before 在要素前面插入内容,协作”content”使用
  • E:after 在要素前面插入内容,协作”content”使用

如上多个伪成分采用器在CSS2.1都已经被帮忙,但在CSS3准将伪成分接受符前边的单个冒号(:)改进为双冒号(::),如E::first-letterE::first-lineE::beforeE::after,然而以前的单冒号写法也是可行的。

        

E::first-letter 和 E::first-line

CSS

p::first-letter { font-weight:bold; }

1
2
3
p::first-letter {
    font-weight:bold;    
}

▲ 将会对文本块的率先个字母进行加粗

CSS

p::first-line { font-weight:bold; }

1
2
3
p::first-line {
    font-weight:bold;    
}

▲ 将会对段落的首先行文本举办加粗

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

E::before 和 E::after

E::beforeE::after是用来给成分的前头和前边差入内容,合营”content”使用,但它必需有值才干立见功效。

HTML

XHTML

<div>me</div>

1
<div>me</div>

CSS

CSS

div:before{ content:'you before'; color:red; } div:after{ content:'you after'; color:green; }

1
2
3
4
5
6
7
8
div:before{
    content:'you before';
    color:red;
}
div:after{
    content:'you after';
    color:green;
}

▲ 将会在div容器中的文本me加多增添后的情节并设置其颜色

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

E::placeholder和 E::selection

  • E::placeholder 选用文本块的首先个假名
  • E::selection 接收文本块的第七个假名

E::placeholder用以安装对象文字占位符的体裁,不过各样浏览器的CSS选拔器都负有差别,必要针对种种浏览器做单独的设定,举个例证看代码

CSS

::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; }

1
2
3
4
5
6
7
8
9
10
11
12
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

E::selection用于安装文本被筛选时的样式,被定义的样式属性有3个,况且动用时索要对火狐浏览器单独设置。

CSS

p::-moz-selection{ background:#000; color:#f00; text-shadow:1px 1px rgba(0,0,0,.3); } p::selection{ background:#000; color:#f00; text-shadow:1px 1px rgba(0,0,0,.3); }

1
2
3
4
5
6
7
8
9
10
p::-moz-selection{
    background:#000;
    color:#f00;
    text-shadow:1px 1px rgba(0,0,0,.3);
}
p::selection{
    background:#000;
    color:#f00;
    text-shadow:1px 1px rgba(0,0,0,.3);
}

 

第四代采纳器

2、

前行历史

自从哈坤·利提议CSS建议到一九九七年CSS1.0出版,间隔前些天早本来就有二十一个新春。
而是CSS的升高平昔在相连,1998年公司了特意管CSS的专门的职业组,并在1999年公布了CSS2.0,之后揭橥了修正版本的CSS2.1。

CSS2.1 是大家平素再用的,也是浏览器扶植比较完整的贰个版本。

CSS3 的开销工作早在2001年早先就运行了,不过发展到今日,大超多的现世浏览器对CSS3属性和选取器接济美好,除了部分微软IE浏览器的较老版本。

历史提高的步子并不会告生龙活虎段落的,新的CSS4也正由W3C编辑团队研究开发中。在CSS4中推荐了超多的新转变,可是基本选取器是不会有浮动的,越多的依旧拉长一些伪类,那么接下去一同看看扩张的开始和结果。

提醒:一时那些代码效率大概还在试验标准阶段,浏览器并从未拿走帮忙,所以并不可能投入使用 !

 

升迁内容

否定类 E:not(s,s,s..)
E:not其实在选择器已经出今后CSS3了,它用来相配不带有s选拔符的成分E,上边大家讲过它的利用情势,不过它只可以用于轻巧选拔器,伪类,标签,id,类和类接受器参数。可是在CSS4中拿走了提拔,具体分歧

CSS

p:not(.header) { font-weight: normal; }

1
2
3
p:not(.header) {
    font-weight: normal;
}

▲ CSS3将会对除了.header类以外的文书加粗

CSS

p:not(.header, .footer) { font-weight: normal; }

1
2
3
p:not(.header, .footer) {
    font-weight: normal;
}

▲ CSS4由此传播一个用逗号,将会对除了.header.footer类以外的文本加粗

关联类 E:has(s)
那个选用器通过一个参数(选取符),去相配与某朝气蓬勃因素对应的自由选拔器,比如

CSS

a:has(>img) { border: 1px solid #000; }

1
2
3
a:has(>img) {  
    border: 1px solid #000;
}

▲ 将会对拥有带有img元素的a要素加个天灰的边框

相配任何伪类E:matches
本条伪类接纳器能够准则运用在装有的选项器组中,它能帮大家简写多组采用器的中规中矩,例子表达,

XHTML

<section> <h1>标题</h1> </section> <nav> <h1>标题</h1> </nav>

1
2
3
4
5
6
<section>
    <h1>标题</h1>
</section>
<nav>
    <h1>标题</h1>
</nav>

▲ 上边的三个容器都有叁个h1标题元素,如何对容器下的h1`字体进行字体颜色设置呢

CSS

section h1,nav h1{ color:red; } :matches(section, nav) h1 { color: red; }

1
2
3
4
5
6
7
section h1,nav h1{
    color:red;
}
 
:matches(section, nav) h1 {
    color: red;
}

▲ 那生龙活虎种是价值观的法子,第二种正是:matches方法。

职位伪类E:local-linkE:local-link(n)

岗位伪类是访员在您网址上的义务

  • :local-link(0) 代表贰个超连接成分,其target和文书档案的UXC60L是在同二个源中。
  • :local-link(1) 代表二个超连接成分,其target和文书档案的ULacrosseL是在同多少个源中。
  • :local-link(2) 代表一个超连接成分,其target和文档的UPAJEROL是在同三个源中。
CSS

/* 将会匹配 http://example.com/ link(s) */ :local-link(0) { color:
red; } /* 将会匹配 http://example.com/year/ link(s) */
:local-link(1) { color: red; } /* 将会匹配
http://example.com/year/month/ link(s) */ :local-link(2) { color:
red; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a025160512778-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a025160512778-14">
14
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b937a025160512778-1" class="crayon-line">
/* 将会匹配 http://example.com/ link(s) */
</div>
<div id="crayon-5b8f6b937a025160512778-2" class="crayon-line crayon-striped-line">
:local-link(0) {
</div>
<div id="crayon-5b8f6b937a025160512778-3" class="crayon-line">
    color: red;
</div>
<div id="crayon-5b8f6b937a025160512778-4" class="crayon-line crayon-striped-line">
}
</div>
<div id="crayon-5b8f6b937a025160512778-5" class="crayon-line">
 
</div>
<div id="crayon-5b8f6b937a025160512778-6" class="crayon-line crayon-striped-line">
/* 将会匹配 http://example.com/year/ link(s) */
</div>
<div id="crayon-5b8f6b937a025160512778-7" class="crayon-line">
:local-link(1) {
</div>
<div id="crayon-5b8f6b937a025160512778-8" class="crayon-line crayon-striped-line">
    color: red;
</div>
<div id="crayon-5b8f6b937a025160512778-9" class="crayon-line">
}
</div>
<div id="crayon-5b8f6b937a025160512778-10" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6b937a025160512778-11" class="crayon-line">
/* 将会匹配 http://example.com/year/month/ link(s) */
</div>
<div id="crayon-5b8f6b937a025160512778-12" class="crayon-line crayon-striped-line">
:local-link(2) {
</div>
<div id="crayon-5b8f6b937a025160512778-13" class="crayon-line">
    color: red;
</div>
<div id="crayon-5b8f6b937a025160512778-14" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>


**表单状态伪类 `E:indeterminate`**  
`checkbox`中的`indeterminate`属性用于展示半选择状态,这个属性只是改变`checkbox`的外观,不对它的`checked`属性产生影响,CSS4选择器中也增加了半选择状态的伪类。  



CSS

:indeterminate { opacity: 0.6; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b937a028060570052-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a028060570052-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a028060570052-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b937a028060570052-1" class="crayon-line">
:indeterminate {
</div>
<div id="crayon-5b8f6b937a028060570052-2" class="crayon-line crayon-striped-line">
    opacity: 0.6;
</div>
<div id="crayon-5b8f6b937a028060570052-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>


**表单状态伪类 `E:required`**和 `E:optional`  
`required`属性是HTML5新添加的,用于规定必需在提交之前填写输入字段  



CSS

:required { border: 1px solid red; } :optional { border: 1px solid
gray; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b937a02f199693580-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a02f199693580-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a02f199693580-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a02f199693580-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a02f199693580-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a02f199693580-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b937a02f199693580-1" class="crayon-line">
:required {
</div>
<div id="crayon-5b8f6b937a02f199693580-2" class="crayon-line crayon-striped-line">
    border: 1px solid red;
</div>
<div id="crayon-5b8f6b937a02f199693580-3" class="crayon-line">
}
</div>
<div id="crayon-5b8f6b937a02f199693580-4" class="crayon-line crayon-striped-line">
:optional {
</div>
<div id="crayon-5b8f6b937a02f199693580-5" class="crayon-line">
    border: 1px solid gray;
</div>
<div id="crayon-5b8f6b937a02f199693580-6" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>





XHTML

&lt;input type="text" required="required" /&gt; &lt;input
type="text" /&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b937a033702718706-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a033702718706-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b937a033702718706-1" class="crayon-line">
&lt;input type=&quot;text&quot; required=&quot;required&quot; /&gt;
</div>
<div id="crayon-5b8f6b937a033702718706-2" class="crayon-line crayon-striped-line">
&lt;input type=&quot;text&quot; /&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


▲
第一个设置了`required`属性的表单元素将会设置一个红色边框,而第二个没有设置该属性的,将会设置一个灰色边框。

**范围限制伪类`E:in-range`和`E:out-of-range`**  
用于表单字段值范围的限制,取决于表单的`min`和`max`属性



CSS

:in-range { background-color:green; } :out-of-range {
background-color:red; }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b937a036881452652-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a036881452652-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a036881452652-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a036881452652-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a036881452652-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6b937a036881452652-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6b937a036881452652-7">
7
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b937a036881452652-1" class="crayon-line">
:in-range {
</div>
<div id="crayon-5b8f6b937a036881452652-2" class="crayon-line crayon-striped-line">
    background-color:green;
</div>
<div id="crayon-5b8f6b937a036881452652-3" class="crayon-line">
}
</div>
<div id="crayon-5b8f6b937a036881452652-4" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f6b937a036881452652-5" class="crayon-line">
:out-of-range {
</div>
<div id="crayon-5b8f6b937a036881452652-6" class="crayon-line crayon-striped-line">
    background-color:red;
</div>
<div id="crayon-5b8f6b937a036881452652-7" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>



XHTML

&lt;input type="number" value="5" max="10" min="1" /&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6b937a039710993412-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6b937a039710993412-1" class="crayon-line">
&lt;input type=&quot;number&quot; value=&quot;5&quot; max=&quot;10&quot; min=&quot;1&quot;  /&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

▲
如果你输入的值在设置的最小和最大值范围内,那么表单背景会呈现为绿色,如果超出了限制,那么会呈现为红色。

关于更多的CSS4选择器,可参考这里的 [示例介绍](http://css4-selectors.com/selectors/)。

2 赞 5 收藏 评论

至尊游戏网站 3

html代码:

 

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

<a href="#" class="icon">小编类名是icon</a>

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

 

css代码  

 

a[class^=icon]{

  background: green;

  color:#fff;//定义以icon起头的别样字符串

}

a[href$=pdf]{

  background: orange;

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

}

a[title*=more]{

  background: blue;

  color: #fff;定义有title的的其他字符串

}

例如:<style>

    a[class^=column]{

        background:#fc0001;

        }

    a[href$=doc]{

        background:#007d02;

    }

    a[title*=box]{

        background:#0000fe;

    }

</style>

<a href="##" class="columnNews">笔者的背景想产生猩红</a>

<a href="##" class="columnVideo">作者的背景想产生卡其灰</a>

<a href="##" class="columnAboutUs">作者的背景想形成嫩黄</a><br/>

<a href="1.doc">作者的背景想形成玫瑰红</a>

<a href="2.doc">作者的背景想形成深黄</a><br/>

<a href="##" title="this is a box">小编的背景想产生铁黄</a>

<a href="##" title="box1">笔者的背景想形成湖蓝</a>

<a href="##" title="there is two boxs">小编的背景想成为石榴红</a>

 

 

3、

结构性伪类选取器root

:root接纳器,从字面上我们就足以很了解的接头是根选取器,

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

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

:root{background:orange}

 

html {background:orange;}

 

得到的效应等同。

 

提出利用:root方法。

 

其他在IE9以下还是能注重“:root”达成hack功效。)

 

 

4、

结构性伪类选拔器—not

:not选取器称为否定选取器,和jQuery中的:not接收器大同小异,能够选择除某些成分之外的有着因素。就拿form成分来讲,比方说你想给表单中除submit按钮之外的input成分增多银灰边框,CSS代码能够写成:form {

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

  border:1px solid red;

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

 

 

 

5、结构性伪类接收器—empty

:empty选取器表示的正是空。用来选取未有别的内容的要素,这里没有内容指的是某个剧情都还没,哪怕是一个空格。

诸如,你的文书档案中有多少个段落p成分,你想把未有任何内容的P成分隐蔽起来。我们就足以动用“:empty”接受器来支配。

HTML代码:

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

<p> </p>

<p></p>​

CSS代码:

p{

 background: orange;

 min-height: 30px;

}

p:empty {

  display: none;

}​

6、结构性伪类选拔器—target

:target接纳器称为对象接受器,用来合营文书档案(页面)的url的某部标识符的指标成分。

例:

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

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

  content for Brand

</div>

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

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

 content for jake

</div>

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

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

    content for aron

</div>

 

css代码:

#brand:target {

  background: orange;

  color: #fff;

}

#jake:target {

  background: blue;

  color: #fff;

}

#aron:target{

  background: red;

  color: #fff;

}

 

 

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

“:first-child”采取器表示的是采取父成分的率先个子成分的成分E。轻巧点清楚正是选项元素中的第一个子成分,记住是子成分,实际不是儿孙成分。

HTML代码:

<ol>

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

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

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

</ol>

CSS代码:

 

 

ol > li:first-child{

  color: red;

}//讲html的队列号第三个形成青白,假若是冬天列表则是前面三个的连串Logo变色

First-child与last-child刚好相反

 

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

“:nth-child(n)”选取器用来牢固有个别父成分的一个或七个特定的子成分。在那之中“n”是其参数,何况能够是整数值(1,2,3,4),也得以是表明式(2n+1、-n+5)和紧要性词(odd、even),但参数n的初阶值始终是1,实际不是0。也正是说,参数n的值为0时,选择器将挑选不到其余相称的要素。

HTML代码:

<ol>

  <li>item1</li>

  <li>item2</li>

  <li>item3</li>

  <li>item4</li>

</ol>​

CSS代码:

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

  background: orange;

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

 

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

“:nth-last-child(n)”采用器和后边的“:nth-child(n)”接收器极其的貌似,只是这里多了一个“last”,所起的功力和“:nth-child(n)”选取器有所不同,从某父成分的末尾贰个子成分开首推断,来接纳特定的元素

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

  background: orange;

}//选用列表中尾数第七个列表项,将其背景设置为豆灰。

10、first-of-type选择器

“:first-of-type”选择器近似于“:first-child”接纳器,区别的地方就是点名了成分的体系,其首要用于定位三个父成分下的某部项指标率先个子成分。

由此“:first-of-type”接受器,定位div容器中的首个p元素(p不一定是容器中的第三个子成分),并设置其背景观为土红。

.wrapper > p:first-of-type {

  background: orange;

//last-of-type选择器

“:last-of-type”接纳器和“:first-of-type”选拔器效能是同意气风发的,区别的是他接受是父成分下的某部项目标末段八个子成分。

 

 

 

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

“: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){

  background: orange;

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

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

“:nth-last-of-type(n)”采纳器和“:nth-of-type(n)”选拔器是大同小异的,选拔父成分中钦定的某种子成分类型,但它的苗子方向是从最终八个子元素领头,何况它的行使办法相似于上节中介绍的“:nth-last-child(n)”选拔器同样。

由此“:nth-last-of-type(n)”采纳器将容器“div.wrapper”中的倒数第3个段子背景设置为银灰。

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

  background: orange;

}

 

12、only-child选择器

“:only-child”选取器选拔的是父成分中独有八个子成分,并且独有唯后生可畏的三个子成分。也正是说,相称的元素的父成分中唯有八个子成分,并且是二个唯生机勃勃的子元素。

演示演示

经过“:only-child”选择器,来支配只有叁个子成分的背景样式,为了越来越好的知情,大家以此示例通过相比较的章程来向大家演示。

HTML代码:

<div class="post">

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

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

</div>

<div class="post">

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

</div>

CSS代码:

.post p {

  background: green;

  color: #fff;

  padding: 10px;

}

.post p:only-child {

  background: orange;

}

 

 

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;

}

本文由硬件数码发布,转载请注明来源:应用情势介绍