为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 第2章 CSS3选择器-3

第2章 CSS3选择器-3

2018.09.04 16:42 671浏览

2.6 语言伪类选择器

使用语言伪类选择器来匹配使用语言的元素是非常有用的,特别是用于多语言版本的网站,其作用更是明显。可以使用它来根据不用语言版本设置页面的字体风格。

2.6.1 语言伪类选择器语法

语言伪类选择器是根据元素的语言编码匹配元素。这种语言信息必须包含在文档中,或者与文档关联,不能从CSS指定。为文档指定语言,有两种方法可以表示。如果使用HTML5,直接可以设置文档的语言。例如:

<!DOCTYPE html> <html lang="en-US">

另一种方法就是手工在文档中指定lang属性,并设置对应的语言值。例如:

<body lang="fr">

语言伪类选择器允许为不同的语言定义特殊的规则,这在多语言版本的网站用起来是特别方便的。
E.lang(language)表示选择匹配E的所以元素,且匹配元素指定了lang属性,而且其值为language

2.6.2 浏览器兼容性

语言伪类选择器在IE7及以下版本中还不被支持。

2.6.3 实战体验:定制不用语言版本引文风格

<!DOCTYPE html> <html lang="en-US"> <head>     <meta charset="UTF-8">     <title>语言伪类选择器运用</title> </head> <body>     <p>WWF's goal is to:     <q cite="http://www.wwwf.org">         build a future where people live in harmony with nature     </q>we hope they succeed.     </p> </body> </html>

   webp  

<!DOCTYPE html> <html lang="fr"> <head>     <meta charset="UTF-8">     <title>语言伪类选择器运用</title> </head> <body>     <p>WWF's goal is to:     <q cite="http://www.wwwf.org">         build a future where people live in harmony with nature     </q>we hope they succeed.     </p> </body> </html>

   webp  

2.7 UI元素状态伪类选择器

UI元素状态伪类选择器也是CSS3选择器模块组中的一部分,主要用于form 表单元素上,以提高网页的人机交互、操作逻辑以及页面的整体美观,使表单页面更具个性与品位,而且使用户操作页面表单更便利和简单。

2.7.1 UI元素状态伪类选择器语法

UI元素的状态一般包括:启用、禁用、选中、未选中、获得焦点、失去焦点、锁定和待机等。在HTML元素中有可用和不可用状态,例如表单中的文本输入框;HTML元素中海油选中和未选中状态,例如表单中的复选按钮和单选按钮。这几种状态都是CSS3选择器中常用的状态伪类选择器。详细说明如下所示:

选择器类型功能描述
E:cheched选中状态伪类选择器匹配选中的复选按钮或单选按钮表单元素
E:enabled启用状态伪类选择器匹配所有启用的表单元素
E:disabled不可用状态伪类选择器匹配所有禁用的表单元素

2.7.2 浏览器兼容性

除了IE浏览器外,各主流浏览器对UI元素状态选择器的支持都非常好,但IE9页开始全面支持这些UI元素状态伪类选择器。

2.7.3 实战体验:Bootstrap的表单元素UI状态

略(p37-p41)  太长了/(ㄒoㄒ)/~~

2.8 结构伪类选择器

伪类可以将一段并不存在的HTML当作独立元素来定位,或是找到无法使用其他简单选择器就能定位到的切实存在的元素。因此CSS3给伪类选择器引入一种“结构伪类选择器”。这种选择器可以根据元素在文档树中的某些特性(如相对位置)定位到它们。也就是说,通过文档树结构的相互关系来匹配特定的元素,从而减少HTML文档对ID或类名的定义, 帮助你保持干净和整洁。

2.8.1 重温HTML的DOM树

所有的结构伪类都是基于HTML文档树的,也称作文档对象模型(DOM)。文档树是HTML页面的层级结构。它由元素、属性和文本组成,它们都是一个节点,就像公司的组织结构图一样。下面看一个简单的HTML文档。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>HTML DOM树形结构图</title> </head> <body>     <div>         <ul>             <li>one</li>             <li>two</li>             <li>three</li>         </ul>         <div>abc</div>         <p>para</p>         <div>def</div>         <p>para</p>         <b>ghi</b>     </div> </body> </html>

   webp  HTML DOM树形结构

2.8.2 结构伪类选择器语法

选择器功能描述
E:first-child作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
E:last-child作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同
E:root选择匹配元素E所在文档的根元素。在HTML文档中,根元素始终是html,此时该选择器与html类型选择器匹配的内容相同
E F:nth-child(n)选择父元素E的第n个子元素F。其中n可以是整数(1,2,3),关键字(even,odd),可以是公式(2n+1,-n+5),而且n值起始值为1,而不是0
E F:nth-last-child(n)选择元素E的倒数第n个子元素F。此选择器与E F:nth-child(n)选择器计算顺序刚好相反,但使用方法都是一样的,其中nth-last-child(1)始终匹配的是最后一个元素,与last-child等同
E:nth-of-type(n)选择父元素内具有指定类型的第n个E元素
E:nth-last-of-type(n)选择父元素内具有指定类型的倒数第n个E元素
E:first-of-type选择父元素内具有指定类型的第一个E元素,与E:nth-of-type(1)等同
E:last-of-type选择父元素内具有指定类型的倒数第一个E元素,与E:nth-last-of-type(1)等同
E:only-child选择父元素只包含一个子元素,且该子元素匹配E元素
E:only-of-type选择父元素只包含一个同类型的子元素,且该子元素匹配E元素
E:empty选择没有子元素的元素,而且该元素也不包含任何文本节点

2.8.3 浏览器兼容性

CSS3结构伪类选择器在主流浏览器下运行都非常的完美,只是在IE9及以下版本的浏览器中无法正常运行。

2.8.4 结构伪类选择器中的n是什么

在结构伪类选择器中,有4个伪类选择器接受参数n。

  1. :nth-child(n)

  2. :nth-last-child(n)

  3. :nth-of-type(n)

  4. :nth-last-of-type(n)

在实际应用中,这个参数n可以是整数(1,2,3),关键字(even,odd),可以是公式(2n+1,-n+5),而且n值起始值为1,而不是0。换句话说,当参数n的值为0时,选择器将选择不到任何匹配的元素。

结构伪类选择器中的参数按常用的情况划分为七种情形。

  1. 参数n为具体的数值(大于0的整数)

  2. 参数n为表达式"n * length"(选择n的倍数)

  3. 参数n为表达式"n + length"(选择大于或等于length的元素)

  4. 参数n为表达式"-n + length"(选择小于或等于length的元素)

  5. 参数n为表达式"n * length + b"(其中b是您想设置的偏移值,表示隔length个元素选中第 n * length + b个元素。)

  6. 参数为关键词“odd”(选择系列中的奇数元素)

  7. 参数为关键词“even”(选择系列中的偶数元素)

2.8.5 结构伪类选择器的使用方法详解

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>结构伪类选择器的使用</title>     <style>         *{             margin: 0;             padding: 0;         }         ul{             margin: 50px auto;             width: 400px;             list-style-type: none outside none;         }         li{             display: inline-block;             margin: 5px;             padding: 5px;             width: 50px;             height: 50px;             font: bold 30px/50px arial;             background: #000;             color: #fff;             border-radius: 50px;             text-align: center;         }     </style> </head> <body>     <ul>         <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li>/ul> </body> </html>

   webp  页面初始果图

1. :first-child的使用
ul > li:first-child{     background-color: green; }

   webp  :first-child效果图

2. :last-child的使用
ul > li:last-child{     background-color: blue; }

   webp  :last-child效果图

3. :nth-child的使用

(1)nth-child(3)

ul > li:nth-child(3){     background-color: yellow; }

   webp  :nth-child(3)效果图

(2)nth-child(n)

ul > li:nth-child(n){     background-color: orange; }

   webp  :nth-child(n)效果图

(3)nth-child(2n)

ul > li:nth-child(2n){     background-color: blue; }

   webp  :nth-child(2n)效果图

(4)nth-child(2n+1)

ul > li:nth-child(2n+1){     background-color: blue; }

   webp  :nth-child(2n+1)效果图

(5)nth-child(n+5)

ul > li:nth-child(n+5){     background-color: blue; }

   webp  :nth-child(n+5)效果图

(6)nth-child(-n+5)

ul > li:nth-child(-n+5){     background-color: blue; }

   webp  :nth-child(-n+5)效果图

(7)nth-child(4n+1)

ul > li:nth-child(4n+1){     background-color: blue; }

   webp  :nth-child(4n+1)效果图

4. :nth-last-child的使用
ul > li:nth-last-child(4){     background-color: blue; }

   webp  :nth-last-child效果

5. :nth-of-type的使用【略】
6. :nth-last-of-type的使用【略】
7. :first-of-type:last-of-type的使用【略】
8. :only-child的使用【略】
9. :only-of-child的使用【略】
10. :empty的使用【略】

2.8.6 实战体验:CSS3美化表格

略(p61-p66)  太长了/(ㄒoㄒ)/~~



作者:白小虫
链接:https://www.jianshu.com/p/ba4cd3a733bf


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
90
获赞与收藏
581

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消