الصفات الزائفة في CSS

CSS pseudo-class selectors match components based on other conditions, not necessarily defined by the document tree. CSS pseudo-classes are keywords added to selectors that specify the special state of the elements to be selected. For example, :hover can be used to change the color of a button when the user hovers over it with the mouse.

What is a pseudo-class

CSS pseudo-classes allow you to set the style of an element's dynamic state, such as hover, active state, and focus state, as well as elements that exist in the document tree but cannot be targeted by other selectors without adding any selectors for their ID or class, such as the first or last child element.

Pseudo-classes start with a colon (:). Their syntax can be given in the following way:

The following section describes the most commonly used pseudo-classes.

Anchor pseudo-classes

UsingAnchorPseudo-class links can be displayed in different ways:

These pseudo-classes allow you to style unvisited links and visited links. The most common styling technique is to remove the underline from visited links.

a:link {
　　　　color: blue;
}
a:visited {
　　　　text-decoration: none;
}

Some anchor pseudo-classes are dynamic - they are applied due to user interaction with the document (such as hover or focus, etc.).

a:hover {
　　　　color: red;
}
a:active {
　　　　color: gray;
}
a:focus {
　　　　color: none;
}

These pseudo-classes change the way links respond to user actions.

• :hover is applied when the user places the cursor on the element but does not select it.

• :active is applicable when the element is activated or clicked.

• :focus is applicable when the element has keyboard focus.

:first-child pseudo-class

:first-child pseudo-class matches the element that is the first child of some other elements. In the following ol li:first-child example, the selector selects the first list item from the ordered list and removes the border from the top of it.

ol li:first-child {
　　　　border-top: none;
}

:last-seudo pseudo-class

:last-child pseudo-class matches the element that is the last child of some other elements. In the following ul li:last-child example, the selector selects the last list item from the unordered list and removes the right border from it.

ul li:last-child {
　　　　border-right: none;
}

：nth-child伪类

CSS3引入了一个新的:nth-child伪类，使您可以将给定父元素的一个或多个特定子对象作为目标。此选择的基本语法可以与给予:nth-child(N)，其中N是一个参数，其可以是一个数字，一个关键字（even或odd），或形式的表达xn+y，其中x和y是整数（例如1n，2n，2n+1，...）。

table　tr:nth-child(2n)　td　{
　　　　background:　#eee;
}

上面示例中的样式规则仅突出显示了代替表行，而没有向元素添加任何ID或类。

：lang伪类

语言伪类:lang允许根据特定标记的语言设置来构造选择器。:lang以下示例中的伪类为明确赋予语言值的元素定义了引号no。

q:lang(no)　{
　　　　quotes:　"~"　"~";
}
/*　HTML　code　snippet　*/Some　text　A　quote　in　a　paragraph　Some　text.

伪类和CSS类

伪类可以与CSS类结合使用。

class="red"在下面的示例中，带有的链接将显示为红色。

a.red:link　{　　　　/*　style　rule　*/
　　　　color:　#ff0000;
}
Click　me　　　　/*　HTML　code　snippet　*/