《HTML5权威指南》之使用CSS选择器(2)

说明：这部分主要是记录伪类选择器的使用，伪类跟伪元素一样，并不是直接针对文档元素的。

1.使用结构性伪类选择器

说明：使用结构性选择器能够根据元素在文档中的位置选择元素，这类选择器都有一个冒号符前缀(:)，例如:empty,他们可以单独使用，也可以和其他元素结合使用，如p:empty。

1.1.使用根元素选择器

1.选择器： :root
2.说明：选择文档中的根元素，总是选中html元素
3.示例代码结构：

header内结构:<style>    :root {        样式设置    }</style>

1.2.使用子元素选择器

1.选择器： :first-child,:last-child,:only-child,:only-of-type
2.说明：

• :first-child 选择元素第一个子元素
• :last-child 选择元素最后一个子元素
• :only-child 选择元素的唯一子元素
• :only-of-type 选择元素指定类型的唯一子元素

3.示例代码结构：

header内结构：<style>    <!--匹配任意元素的第一个子元素-->    :first-child {        样式设置    }    <!--匹配作为p元素的第一个子元素的任意span元素，而不是作为p元素的第一个子元素的任意span元素的子元素,这里first-child起修饰作用-->    p > span:first-child {        样式设置    }</style>

4.示例代码结构：

header内的结构：<style>    <!--匹配父元素包含的唯一子元素-->    :only-child {        样式设置    }</style>body内结构：    <a href="http://www.baidu.com">content1</a>    <p>content2</p>    <a href="http://www.google.com">content3</a>

上面的代码会选中p元素，因为对于body元素来说,p元素在body元素内只出现一次，而a元素出现了两次。

1.3.使用:nth-child选择器

1.选择器： :nth-child(n) :nth-last-child(n) :nth-of-type(n)
2.说明：

• :nth-child(n) 选择父元素的第n个子元素
• :nth-last-child(n) 选择父元素的倒数第n个子元素
• :nth-of-type(n) 选择父元素定义类型的第n个子元素
• :nth-last-of-type(n) 选择父元素定义类型的倒数第n个子元素

3.示例代码结构:

header内的结构：<style>    body > :nth-child(2) {        样式设置    }</style>body内的结构：<a href="http://www.baidu.com">content1</a><p>content2</a><a href="http://www.baidu.com">content3</a>     

上述代码会选中p元素

2.使用UI伪类选择器

说明：使用UI伪类选择器可以根据元素的状态匹配元素。

2.1.选择启用或者禁用元素

1.选择器： :enabled :disabled
2.说明：这俩个选择器不会匹配没有禁用状态的元素，只会匹配具有启用和禁用属性的元素。
3.示例代码结构：

header内的结构：<style>    <!--选择定义了enabled属性的元素-->    :enabled {        设置样式    }</style>body内的结构：<textarea> content1 </textarea><textarea disabled> content2 </textarea>

上述代码会选择没有disabled属性的元素。

2.2.选择已勾选的元素

1.选择器： :checked
2.说明: 选择被选中的input元素(只用于单选和复选框)
3.示例代码结构：

header内的结构：<style>    <!--选择选中复选框后面的span元素-->    :checked + span {        样式设置    }</style>body内的结构：<input type="checkbox" id="apples" name="apples" /><span>the content </span>

上述代码会选中span元素。

2.3.选择默认元素

1.选择器： :default
2.说明:从一组类似的元素中选择默认元素
3.示例代码结构：

header内的结构：<style>    :default {        样式设置    }</style>body内结构：<button type="submit"> submint </button><button type="reset">  reset </button>

因为默认是选择submit属性，所以带有type=”submit”的button元素会被选中。

2.4.选择有效和无效的元素

1.选择器： :valid和:invalid
2.说明：匹配符合或者不符合验证输入要求的input元素。
3.示例代码结构：

header内的结构：<style>    :valid {        样式设置    }    ：invalid {        样式设置    }</style>body内结构：<p>    <label for="name">Name: <input required id="name" name="name" /> </label></p>    <p>    <label for="name">City: <input required id="city" name="city" /></label></p>

上面的代码中，如果两个输入框中的内容为空，那么状态视为invalid，这时会被:invalid选择器选中。

2.5.选择限定范围

1.选择器： :in-range :out-of-range
2.说明：

• :in-range 选择指定范围之内的input元素
• :out-of-range 选择指定范围之外的input元素

3.使用动态伪类选择器

说明:之所以选择动态伪类选择器，是因为它们根据条件的改变匹配元素，是相对文档的固定状态来说的。

3.1.使用:link和:visited选择器

1.选择器: :link 和 :visited
2.说明：

• :link 选择链接元素
• :visited 选择用户已经访问的超级链接元素

3.示例代码结构：

header内的结构：<style>    :link {        样式设置    }    :visited {        样式设置    }</style>body内结构：<a href="http://www.baidu.com">content1</a>

上述代码中如果该链接元素未被访问，会显示:link设置的样式，如果该元素已被访问，那么会显示:visited设置的样式。

3.2.使用:hover选择器

1.选择器： :hover
2.说明：该选择器匹配用户鼠标悬停在其上的任意元素

3.3.使用:active选择器

1.选择器: :active
2.说明：当前被用户激活的元素，通常意味着用户即将点击(或者按压)该元素
3.示例代码结构：

header内结构：<style>    :active {        样式设置    }</style>body内结构：<p>content1</p><a href="http://www.baidu.com">content2</a>

如果鼠标按压某个元素将会被选中。

3.4.使用:focus选择器

1.选择器： :focus
2.说明：匹配当前获得焦点的元素
3.示例代码结构：

header内结构：<style>    :focus {        样式设置    }</style>body内结构：<form>    <p>    Name: <input type="text" name="name" />    </p>    <p>    City: <input type="text" name="city" />    </p>    <input type="submit" />             </form>

如果鼠标点击上面的控价，样式会应用到每个元素。