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>
<!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>
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>
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。
:nth-child(n):nth-last-child(n):nth-of-type(n):nth-last-of-type(n)
在实际应用中，这个参数n可以是整数（1，2，3），关键字（even，odd），可以是公式（2n+1，-n+5），而且n值起始值为1，而不是0。换句话说，当参数n的值为0时，选择器将选择不到任何匹配的元素。
结构伪类选择器中的参数按常用的情况划分为七种情形。
参数n为具体的数值（大于0的整数）
参数n为表达式"
n * length"（选择n的倍数）参数n为表达式"
n + length"（选择大于或等于length的元素）参数n为表达式"
-n + length"（选择小于或等于length的元素）参数n为表达式"
n * length + b"（其中b是您想设置的偏移值，表示隔length个元素选中第n * length + b个元素。）参数为关键词“
odd”（选择系列中的奇数元素）参数为关键词“
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> 
页面初始果图
1. :first-child的使用
ul > li:first-child{ background-color: green; } 
:first-child效果图
2. :last-child的使用
ul > li:last-child{ background-color: blue; } 
:last-child效果图
3. :nth-child的使用
（1）nth-child(3)
ul > li:nth-child(3){ background-color: yellow; } 
:nth-child(3)效果图
（2）nth-child(n)
ul > li:nth-child(n){ background-color: orange; } 
:nth-child(n)效果图
（3）nth-child(2n)
ul > li:nth-child(2n){ background-color: blue; } 
:nth-child(2n)效果图
（4）nth-child(2n+1)
ul > li:nth-child(2n+1){ background-color: blue; } 
:nth-child(2n+1)效果图
（5）nth-child(n+5)
ul > li:nth-child(n+5){ background-color: blue; } 
:nth-child(n+5)效果图
（6）nth-child(-n+5)
ul > li:nth-child(-n+5){ background-color: blue; } 
:nth-child(-n+5)效果图
（7）nth-child(4n+1)
ul > li:nth-child(4n+1){ background-color: blue; } 
:nth-child(4n+1)效果图
4. :nth-last-child的使用
ul > li:nth-last-child(4){ background-color: blue; } 
: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
共同学习，写下你的评论
评论加载中...
作者其他优质文章
