CSS3中31种挑选器应用方式实例教程

日期:2021-03-09 类型:科技新闻 

关键词:h5小游戏,h5如何制作,免费h5在线制作,h5页面在线制作,测一测h5

原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发布于 2012 年 6 月,详细介绍了 30 种最常见的 CSS 挑选器用法,多加了1种,变为了铭记 31 种挑选器用法。别的 CSS3 挑选器用法请查询 CSS3 selectors explained 这篇文章内容,另外,W3C CSS3 挑选人体器官方文本文档 Selectors Level 3 W3C Recommendation 29 September 2011 纪录在这里留待有疑惑的情况下查询。

1. *
* {  margin: 0;  padding: 0;}

 

星号挑选器用于选择网页页面中的全部元素,能用于迅速消除全部元素的 margin 与 padding,但最好是只在检测的情况下应用,而不必宣布用在 CSS 文档中,不然会大大加剧访问器压力。另外,星号挑选器还可以给父层的全部子元素设置款式,反复1遍,尽可能少用这类方法:

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

适配 IE6+

2. #X
#container {  width: 960px;  margin: auto;}

id 挑选器,最多见的挑选器用法之1,不能反复应用。

适配 IE6+

3. .X
.error {  color: red;}

class 挑选器,也是最多见的挑选器用法之1,与 id 挑选器不一样的是 class 挑选器可另外选择好几个元素,而 id 挑选器只能给1个唯一无2的元素设置款式。

适配 IE6+

4. X Y
li a {  text-decoration: none;}

子孙后代挑选器 (descendant selector),选择 X 元素内的全部 Y 元素,例如上面这段编码将选择 li 标识内的全部连接。

适配 IE6+

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

标识挑选器 (type selector),用于选择 HTML 标识 (tag)。

适配 IE6+

6. X:visited and X:link
a:link { color: red; }a:visted { color: purple; }

:link 伪类挑选器 (pseudo class selector) 用于选择全部未点一下过的连接,而 :visited 则用于选择全部已浏览过的连接。

适配 IE6+

7. X + Y
ul + p {  color: red;}

邻近挑选器 (adjacent selector),选择相邻在 X 元素后边出現的第1个元素,例如上面这段编码将选择 ul 元素后出現的第1个元素,也便是 p 元素。

适配性 IE6+

8. X > Y
div#container > ul {  border: 1px solid black;}

在第 4 条中,子孙后代挑选器 X Y 选择父层 X 内的全部 Y 元素;子挑选器 X > Y 则只选择立即出現在父层 X 内的 Y 元素。例如下面的 HTML 构造中,#container > ul 选择立即出現在 div#container 内的 ul 元素,不包括嵌套循环在 li 内的 ul 元素:

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

适配 IE6+

9. X ~ Y
ul ~ p {  color: red;}

一样也是邻近挑选器,前面第 7 条 X + Y 选择相邻在 X 后出現的第1个元素,而 X ~ Y 将选择 X 元素后出現的全部同级元素。上面这段编码将选择 ul 元素后出現的全部同级 p 元素,而并不是像 ul + p 这样选择第1个出現的 p 元素。

适配 IE7+

10. X[title]
a[title] {  color: green;}

特性挑选器 (attributes selector),依据元素应用的特性进1步变小选择范畴,上面这段编码将选择全部应用了 title 特性的连接,或 a[title="title content"]{color:green} 再进1步变小选择范畴。

适配 IE7+

11. X[href="foo"]
a[href="http://net.tutsplus.com"] {  color: #1f6053; /* nettuts green */}

上面这段编码将选择全部自动跳转到 http://net.tutsplus.com 的连接,这些连接将显示信息为翠绿色,别的连接不会受到危害。

只是这类方法很严苛不可以相差1个标识符,下面可能逐1详细介绍更灵便的用法。

适配 IE7+

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

* 表明要是特性值中包括双引号内的內容就考虑选择规定,这段编码将选择自动跳转到 nettuts.comnet.tutsplus.com,或 tutsplus.com 等连接。

适配 IE7+

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

^ 表明要是特性值以双引号内的內容开始就考虑选择规定,这段编码也常见来给网页页面中全部外界接设置款式。

适配 IE7+

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

$ 表明要是特性值以双引号内的內容末尾就考虑选择规定,这段编码将选择全部自动跳转到 jpg 照片的连接。

适配 IE7+

15. X[data-*="foo"]

上面第 14 条提到了怎样选择全部自动跳转到 jpg 照片的连接,若要选择自动跳转到照片的全部连接能够用下面的方式:

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

或,先给照片连接加上 data- 特性(注:HTML5 Custom Data Attributes)

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

随后再根据特性挑选器选择:

a[data-filetype="image"] {  color: red;}

适配 IE7+

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

假如特性值中有效空格隔开的1连串特性值,~ 能够选择在其中1个特性值,例如:

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

依靠 ~ 选择包括 external 或 image 特性值的元素:

/* Target data-info attr that contains the value "external" */a[data-info~="external"] {  color: red;}/* And which contain the value "image" */a[data-info~="image"] {  border: 1px solid black;}

适配 IE7+

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

:checked 伪类挑选器用于选择全部标识为 checked 的元素,例如单选框 (radio button) 或复选框 (checkbox)。

适配 IE9+

18. X:after

:before 与 :after 是两个让人激动的伪类挑选器,基本上每日都有人创造发明出1些新用法,这里简易详细介绍1下怎样用它消除波动:

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

这类方法根据 :after 在元素后边加上1块地区,随后将其掩藏,能够填补 overflow: hidden; 的缺点。

依据 CSS3 挑选器规范,基础理论上伪类挑选器应当应用双冒号,但具体上访问器也适用单冒号的方式,因此能够再次应用单冒号。

适配 IE8+

19. X:hover
div:hover {  background: #e3e3e3;}

最常见的伪类挑选器,很少解释了,只是必须留意 IE6 不适用将 :hover 功效于除 a 连接外的别的元素。

a:hover { border-bottom: 1px solid black;}

此外提示1点:border-bottom: 1px solid black; 的实际效果要比 text-decoration: underline; 漂亮1些。

适配 IE6+ (在 IE6 中 :hover 只能功效于连接)

20. X:not(selector)
div:not(#container) {  color: blue;}

:not 伪类挑选器有时会起到很关键的功效,假定如今要选择除 #contaienr 外的全部 div 元素,便可以用上面的编码完成。

适配 IE9+

21. X::pseudoElement
p::first-line {  font-weight: bold;  font-size: 1.2em;}

根据伪元素(应用双冒号 ::)能够给元素的某1一部分设置款式,例如第1行、或第1个字母。必须留意的是,这只对块级元素 (block level elements) 起效。

提醒:伪元素 (pseudo element) 应用双冒号 ::

选择段落的第1个字母
p::first-letter {  float: left;  font-size: 2em;  font-weight: bold;  font-family: cursive;  padding-right: 2px;}

这段编码将选择网页页面中全部 p 元素,随后再选择在其中的第1个字母。

选择段落的第1行
p::first-line {  font-weight: bold;  font-size: 1.2em;}

与上面的事例相近,根据 ::first-line 选择网页页面的第1行。

以便适配 CSS1 与 CSS2 中的伪元素(例如 :first-line:first-letter:before 和 :after),访问器接纳单冒号与双冒号两种文件格式,但针对 CSS3 中全新引进的伪元素,务必应用双冒号。

适配 IE6+

22. X:nth-child(n)
li:nth-child(3) {  color: red;}

:nth-child(n) 用于选择 stack 中的某1个元素,只接纳整数金额作主要参数(主要参数从 1 刚开始计数),假如你想选择第2个 li 元素,只需这样写 li:nth-child(2)

还可以设置可变的主要参数,例如 li:nth-child(4n) 将选择第 4, 8 , 12… 个元素(4*n, n=1, n++)。

适配 IE9+

23. X:nth-last-child(n)
li:nth-last-child(2) {  color: red;}

除正序(从上往下)挑选,还可以应用 :nth-last-child(n) 倒序(从下往上)挑选第几个元素,别的用法与第 22 条彻底1样。

适配 IE9+

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

:nth-of-type(n) 的功效并不是选择子元素 (child element),而是选择同类元素 (type of element)。想像1下 HTML 文档中包括 5 个 ul 元素,如今要选择第3个,只需应用上面的编码,而无需再独立这个 ul 加上 id

有关 :nth-child 与 :nth-of-type 的差别,实际请查询 CSS-Tricks 网站的解释,简易来讲,假如父层内只包括1种元素(例如全是 p 元素)那两种用法是等效的,假如父层包括多种多样元素(例如 p 元素与同级的别的元素),必须选择第几个 p 元素时应当用 :nth-of-type

适配 IE9+

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

与第 24 条用法同样,倒序选择同类元素。

适配 IE9+

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

选择父层内的第1个子元素。

适配 IE7+

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

与第 26 条用法同样,差别在于 :last-child 选择父层元素内的最终1个子元素。

:first-child 与 :last-child 一般用来消除边框 (border),例如 <ul></ul> 内每一个 <li></li> 都应用了 border-top 与 border-bottom 边框,結果是,第1个元素的上方与最终1个元素的正下方会是单侧框实际效果。这类状况能够用 :first-child 与 :last-child 消除左右的边框,而无需给第1个元素加上id="first" 或给最终1个元素加上 id="last"

适配 IE9+

28. X:only-child
div p:only-child {  color: red;}

这个伪类挑选器不常见,它能够选择包括唯1特定子元素的父层。例如上面的编码中将选择下面第1个 div 元素,而并不是第2个 div 中的 p 元素。

<div><p> My paragraph here. </p></div><div>  <p> Two paragraphs total. </p>  <p> Two paragraphs total. </p></div>

适配 IE9+

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

这个挑选器会选择某个元素,而且这个元素在其父层内沒有别的同级同类元素(不1定是唯1元素)。例如,要选择全部只包括1个 li 元素的 ul 元素该如何做呢?假如应用 ul li 将选择全部 li 元素,应当应用 only-of-type

适配 IE9+

30. X:first-of-type

first-of-type 伪类能够选择某种元素的第1个同类元素。

以便更好自然地理解它的用法,如今思索1下怎样在下面的 HTML 构造选中取 List Item 2 ?

<div>  <p> My paragraph here. </p>  <ul>    <li> List Item 1 </li>    <li> List Item 2 </li>  </ul>  <ul>    <li> List Item 3 </li>    <li> List Item 4 </li>  </ul></div>
方式1
ul:first-of-type > li:nth-child(2) {  font-weight: bold;}

这段编码的意思是:最先选择第1个 ul 元素;随后选择在其中的全部立即子元素,也便是 li;最终选择第2个子元素。

方式2
p + ul li:last-child {  font-weight: bold;}

寻找 p 元素后第1个出現的 ul 元素,随后选择在其中的最终1个子元素。

方式3
ul:first-of-type li:nth-last-child(1) {  font-weight: bold;}

寻找第1个 ul 元素,随后从上往下选择第1个子元素。

适配 IE9+

31. 伪类挑选器叠用

一些伪类挑选器或伪元素是能够叠用的,比如:

#post p:nth-of-type(2):first-letter {  float: left;  margin: 0 5px 0 1em;  width: 1em;  height: 1em;  font-size: 2em;}

目测适配 IE9+,听闻 IE10 有个小 bug