《图解CSS3——第2章 CSS3选择器-3》

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>

lang="en-US"

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

lang="fr"

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。

  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>

页面初始果图

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ㄒ)/~~

 

posted @ 2016-12-07 17:40  白小虫  阅读(125)  评论(0)  编辑  收藏  举报