CSS3 pseudo class selector

Article Directory

This article is mainly for pseudo-class selectors will be described, pseudo-class selectors can dynamically on the page content to style, there are 16 powerful new pseudo-class selectors are included in the latest W3C specifications.

Early pseudo class selector

CSS1 period (1996) was incorporated into the pseudo-class selectors specification, but also our most commonly used selectors These selectors are most commonly used "a" tag.

: Link to the link status normal.
: State visited after the link was accessed.
: Hover the mouse on the state of the link.
: Active mouse is pressed, the state not yet release the mouse.

CSS2 introduced during pseudo class selector

It CSS2 specification released in May 1998.

1 2	: just :first-child

: Lang indicates the language used in a document. Similar to

1	<html lang= "en">

: First-child specifies a first set of sibling element of the parent element.

CSS3 era

Pseudo class structure

root

: Root pseudo-class selector element represents the root of the page. I.e., <html & rt; element.

1	:nth-child(n)

nth-child(n)

: Nth-child (n) represents a pseudo-class selector n th element.

      
      
       
       <ul>
      
      
      
      
       
       	<li>1</li> ------- li:nth-child(1)
      
      
      
      
       
       	<li>2</li> ------- li:nth-child(2)
      
      
      
      
       
       	<li>3</li> ------- li:nth-child(3)
      
      
      
      
       
       	<li>4</li> ------- li:nth-child(4)
      
      
      
      
       
       	<li>5</li> ------- li:nth-child(5)
      
      
      
      
       
       </ul>

li:nth-child(even) 代表代码中偶数行，也可以用 li:nth-child(2n)
li:nth-child(odd) 代表代码中奇数行，也可以用 li:nth-child(2n+1)

列表第1行
列表第2行
列表第3行
列表第4行
列表第5行

可以看出，偶数行与奇数行表现的颜色不同。

代码如下:

html代码

      
      
       
       <ul class=
       
       "myli_nth">
      
      
      
      
       
       	<li>列表第1行</li>
      
      
      
      
       
       	<li>列表第2行</li>
      
      
      
      
       
       	<li>列表第3行</li>
      
      
      
      
       
       	<li>列表第4行</li>
      
      
      
      
       
       	<li>列表第5行</li>
      
      
      
      
       
       </ul>

CSS代码

      
      
       
       .myli_nth li:nth-child(odd){
      
      
      
      
       
       	background: 
      
      
      
      
       
       }
      
      
      
      
      
      
       
       .myli_nth li:nth-child(even){
      
      
      
      
       
       	background: 
       
       #BFEFFF;
      
      
      
      
       
       }

假如要选中一个列表的前3项，我们可以写

1	li:nth-child(-n+3)

nth-last-child(n)

:nth-last-child(n) 和 nth-child(n) 用法完全相同，唯一不同的就是 nth-child(n) 是从第一个开始往下算。而 :nth-last-child(n)是从最后一个往前倒着算。

      
      
       
       <ul>
      
      
      
      
       
       	<li>1</li> ------- li:nth-last-child(5)
      
      
      
      
       
       	<li>2</li> ------- li:nth-last-child(4)
      
      
      
      
       
       	<li>3</li> ------- li:nth-last-child(3)
      
      
      
      
       
       	<li>4</li> ------- li:nth-last-child(2)
      
      
      
      
       
       	<li>5</li> ------- li:nth-last-child(1)
      
      
      
      
       
       </ul>

nth-of-type(n)

:nth-of-type(n) 只针对特定类型的元素应用样式。

例如：我们需要使用更大的字体来表示文章的第一个段落：

1	article p:nth-of-type(1) {font-size: 1.5em;}

nth-last-of-type(n)

同 :nth-of-type(n) 原理一样，唯一不同的就是 :nth-last-of-type(n) 是从后往前倒序工作。

first-of-type

相当于 :nth-of-type(1)

last-of-type

相当于 :nth-last-of-type(1)

only-of-type

这个伪类用来选择父元素下只有唯一一个某种类型的元素。

      
      
       
       <div>
      
      
      
      
       
       	<p>第1个段落</p>
      
      
      
      
       
       	<p>第2个段落</p>
      
      
      
      
       
       </div>
      
      
      
      
       
       <div>
      
      
      
      
       
       	<p>第3个段落</p>
      
      
      
      
       
       </div>

如果上面一段代码有这样一个css：

1	p:only-of-type{color: red;}

那么结果是只有第三个段落的字体颜色会变红。因为只有第三个段落的父元素div有唯一的一个p元素。

last-child

:first-child 代表的是第一个子元素。
:last-child 代表的是最后一个子元素。

only-child

如果一个元素是它父元素下的唯一子元素，就可以使用 :only-child 来选中该元素。

empty

:empty 这个伪类选择器用来选择没有子元素和内容的元素。

      
      
       
       #result:empty{
      
      
      
      
       
       	background-color: 
       
       #f00;
      
      
      
      
       
       }

我们可以使用上边的CSS代码来表示用户搜索结果为空的情况。

目标伪类

target

:target 这个伪类允许我们基于url对页面上的元素设置样式。如果url中有一个标识符(即以’#’开头的字符串)，那么 :target 就可以对以该标识符为id的元素进行样式设置。

如果有这样一个url：

1	http://www.test.com/ test #summary

id属性为summary的区域可以这样来写

      
      
       
       :target{
      
      
      
      
       
       	background-color: 
       
       #f00;
      
      
      
      
       
       }

元素状态伪类

enabled

: Enabled Represents the style of the time element editable. E.g:

      
      
       
       input:enabled{
      
      
      
      
       
       	background-color: green;
      
      
      
      
       
       }

It denotes the input at the input box editable green background.

disabled

: Disabled represents an element of style in the non-editable state. E.g:

      
      
       
       input:disabled{
      
      
      
      
       
       	background-color: red;
      
      
      
      
       
       }

It denotes the input at the input box editable red background.

checked

: Checked Represents the style when the check box or boxes at selected.

      
      
       
       input[
       
       type=checkbox]:checked{
      
      
      
      
       
       	font-weight: bold;
      
      
      
      
       
       }

It represents the checkbox under the selected state, bold.

Negative pseudo class selector

not

: Not selector represents all elements other than the specified elements.

      
      
       
       :not(header){
      
      
      
      
       
       	background-color: blue;
      
      
      
      
       
       }

It represents all elements on the page in addition to the header element.

to sum up

General projects, we may use pseudo-class selectors had a few, but not other commonly used selectors still need to find out a little, if at the time of use, and will not not remember.

Original: Large column CSS3 pseudo class selector