css pseudo-selector learning pseudo-class selector analysis

In the previous article "css pseudo-selector learning: Pseudo-element selector analysis", we learned about pseudo-element selectors, and today we learn more about pseudo-class selectors. I hope it will be useful to everyone. Helps!

Pseudo-class selector

Pseudo-class selectoris a type of selector that allows passing code that is not included in HTML Element state information to locate the usage of HTML elements.Pseudo-class selectorThe specific usage is to add keywords to the existing selector to represent the status information of the positioned HTML element. [Recommended learning:css video tutorial]

Through pseudo-classes, developers can set the dynamic state of elements, such as hover (hover), click (active), and other elements that cannot be passed in the document. The elements selected by the selector (these elements have no ID or class attributes), such as the first child element (first-child) or the last child element (last-child).

For example:hoverThe pseudo-class selector can be used to change the color of the button when the user hovers the mouse over the button. As shown in the following sample code:

/* 所有用户指针悬停的按钮 */ button:hover { color: blue; }

The name of the pseudo-class is not case-sensitive, but needs to start with a colon:. In addition, pseudo-classes need to be used in conjunction with selectors in CSS. The syntax format is as follows:

选择器:伪类 { 属性 : 属性值; }

The specific syntax format of pseudo-class selectoris:pseudo-class, Don’t forget:here.

CSS provides a variety of pseudo-classes, as shown in the following table:

element in the parent element

element in the element

Classification of pseudo-class selectors

The CSS version has evolved from the first version to the third version, providingpseudo-class selectors## The number of # is already huge. In particular, the CSS3 version has added a large number ofpseudo-class selectors.

There are so many pseudo-class selectors. In order to better sort out thepseudo-class selectors, we can divide them into the following 5 types according to their uses:

• User behavior pseudo-classes: refers to some pseudo-classes related to user behavior, for example, hover

  :hover, press:activeAnd get focus:focusetc.

• URL positioning pseudo-class: used to locate elements in HTML pages

• Input pseudo-class: pseudo-class related to form controls

• Structure pseudo-class: Mainly used to locate target elements

• Logical combination pseudo-class: Used for logical operations, such as

  :not( ), it means it is not a certain element.

1. User behavior pseudo-class - dynamic pseudo-class selector

: link and :visited selectors

Tips: The visited selector matches any link whose href attribute is a URL that the user has visited on all pages, not just your page. The most common use of :visited is to apply a certain style to visited links to distinguish them from unvisited links. For example, when we watch the news, the status of the news that we have read and the news that we have not read are different in the homepage list, which makes it easier for us to distinguish.

: hover selector

: active selector

: focus selector

2. Structural pseudo-class selector

Structure pseudo-class selector The content contained in the class selector is as shown in the following table:

CSS中的结构伪类选择器是根据HTML页面中元素之间的关系来定位HTML元素，从而减少对HTML元素的id属性和class属性的依赖。

:first-child与:last-child

:first-child伪类用来定义一组兄弟元素的第一个元素而:last-child伪类则是定位一组兄弟元素的最后一个元素。

如下示例代码展示了:first-child伪类和:last-child伪类的用法：

HTML结构如下：

• 涂山红红
• 涂山苏苏
• 涂山蓉蓉
• 涂山雅雅

CSS代码如下：

li:first-child { color: red; } li:last-child { color: blue; }

代码运行结果如下图所示：

:first-child伪类可以使用:nth-child(n)伪类改写为:nth-child(1)，而:last-child伪类可以使用:nth-last-child(n)伪类改写为:nth-last-child(1)。

:first-child伪类和:last-child伪类经常会引起误解。例如li:first-child是用来定位所有

狐妖小红娘
 
涂山红红
 
涂山苏苏

p:first-of-type { color: red; } p:last-of-type { color: blue; }

nbsp;html>     

nbsp;html>      
 
这个元素的背景是粉色的
 
  

:root { height: 100vh; width: 100vw; background-color: dodgerblue; }

nbsp;html>       

nbsp;html>       

nbsp;html>       

nbsp;html>                 

.cs_li { display: none; } .cs_li.active { display: block; }

.cs_li:not(.active) { display: none; }

.cs_li:not(:nth-of-type(5n)){ margin-right: 10px; // 除5的倍数项都设置右边的外边距 }

.cs_li_a > img, .cs_li_b > img, .cs_li_c > img { display: none; }

:is(.cs_li_a, .cs_li_b, .cs_li_c) > img { display: none; }

ol ol li, ol ul li, ul ul li, ul ol li { margin-left: 20px; }

:is(ol, ul) :is(ol, ul) li{ margin-left: 20px; }

:where(.article, section) .conten {} :where(#article, #section) .conten {