CSS Pseudo-classes & Pseudo-elements

来源：互联网发布：linux启动nginx服务编辑：程序博客网时间：2024/06/15 20:00

Pseudo-classes

A Pseudo-class is used to define a special state of an element.

CSS伪类是用于给一个元素定义一个特殊的状态。

语法：

selector:pseudo-class {  property:value;}

常见的如 <a> 元素的四种状态。具体说明参看 CSS Links 章节

a:link {color:#FF0000;}      /* unvisited link */a:visited {color:#00FF00;}   /* visited link */a:hover {color:#FF00FF;}     /* mouse over link */a:active {color:#0000FF;}    /* selected link */

Note: Pseudo-class names arenot case-sensitive.

伪类名称大小写不敏感。

Pseudo-classes 可以与CSS classes结合使用。

a.highlight:hover {    color: #ff0000;}

The :first-child

The :first-child pseudo-class matches a specified element that is the first child of another element.

selector:first-child 将匹配一个特定的元素，它是另一个元素的第一个孩子元素。

如下例，将匹配任何一个元素下第一个 元素。

<html><head><style>p:first-child{color:blue;} </style></head><body><p>I am a strong man.</p><p>I am a strong man.</p></body></html>

Note: For :first-child to work in IE8 and earlier, a !DOCTYPE must be declared.

Examples：

1. Match the first element in all elements

p i:first-child{color:blue; /*p可以有很多子孙元素i，此处选第一个子孙i,且对所有p执行此操作*/}

2. Match all elements in all first child elements

p:first-child i{color:blue;/*页面中第一个p元素下匹配所有它的后代i元素*/}

The :lang(language)

使用这个伪类实现针对不同语言设定不同规则。

在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型

<html><head><style>q:lang(no) {quotes: "~" "~";}</style></head><body><p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p></body></html>

Note: IE8 supports the :lang pseudo-class only if a !DOCTYP is specified.

The :focus

The :focus selector is used to select the element that has focus and is allowed on elements that accept keyboard events or other user inputs.

选择那些有焦点的元素，允许在那些可以接受键盘事件或其他用户输入的元素上使用。

如下例，点击输入框，它的背景色将变成黄色。

input:focus{background-color:yellow;}

Note:For :focus to work in IE8, a !DOCTYPE must be declared.

Pseudo-element

伪元素是用来给一个元素指定的部分样式化。

语法：

selector::pseudo-element {  property:value;}

The double colon replaced the single-colon notation forpseudo-elements in CSS3.

This was an attempt from W3C to distinguish between pseudo-classes and pseudo-elements.

在CSS3中用于伪元素的notation，双冒号取代了单个冒号，这是用来区别伪类和伪元素。

The single-colon syntax was used for both pseudo-classes and pseudo-elements in CSS2 and CSS1.

For backward compatibility, the single-colon syntax is acceptable for CSS2 and CSS1 pseudo-elements.

The ::first-line

This is used to add a special style to the first line of a text and can only be applied to block-level elements.

用于给一段文本中的第一行文字添加特殊效果。只能用于块级元素。

The following properties apply to the ::first-line pseudo-element 可应用到该伪元素的性质有：

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

The ::first-letter

用于给一段文本中第一个字母添加特效，同样只适用于块级元素。

The following properties apply to the ::first-letter pseudo- element 可应用到该伪元素的性质有

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

Tip： Several pseudo-elements can also be combined. 几个伪元素可以结合起来用，即可以对 同时使用以上两个伪元素。

The ::before

Used to insert some content before the content of an element.

用于在一个元素的内容前面插入一些内容，类似 js 数组的 unshift() 操作。

如下例在每一个<h1>元素前添加一张图片。

h1::before {content:url(smiley.gif);}

The ::after

Used to insert some content after the content of an element.

顾名思义，在一个元素的内容后面插入一些内容，类似 js 数组的 push() 操作。

p::after{ content:"- Remember this";}

还可在content后继续添加 css declaration 丰富效果。

Note: 使以上两个伪元素可以在 IE8下工作, a <!DOCTYPE> must be declared.

The ::selection

该伪元素匹配用户用鼠标所选择的一个元素的一部分。可以用户该伪元素的 CSS 性质有：color，background，cursor 和 outline。

::selection {  color: red;  background: yellow;}

上面的例子使得所选择的文字显示为红色，背景色为黄色。

使用时注意浏览器支持情况！

0 0