The difference between pseudo-classes and pseudo-elements
(1) Class, user-defined class name. This class is specific and visible, such as div.div0. Select the div element with class div0.
(2) Pseudo-class, used to add special effects to certain selectors. Styles defined with pseudo-classes do not act on the mark, but on the state of the mark, such as :hover for the a tag and :disabled for the form element.
(3) Elements, such as div, p, h1, etc., are real elements.
(4) Pseudo elements are elements that do not exist in HTML and are only used for rendering in CSS. Pseudo elements create a virtual container. This container does not contain any DOM elements, but can contain content. Such as ::before, ::after.
Pseudo class selector
The purpose of pseudo-classes is to use selectors to find information that does not exist in the DOM tree and that cannot be obtained by regular CSS selectors. Pseudo-classes usually represent a "state". A pseudo-class begins with a colon: followed by the name of the pseudo-class and optional parameters enclosed in parentheses.
anchor pseudo class
If you set the four states of a tag, the order must be LVHA, that is: link, :visited, :hover, :active.
Under normal circumstances, you only need to set the default effect of the a tag and the effect of mouse crossing, a{}, a:hover{}.
target pseudo-class selector
:target Target style after hyperlink. When a hyperlink is used, the target of the link can be set with the target selector. The corresponding style will be displayed only after the target is jumped.
The value of the href attribute of the a tag can point to the link address, the id of the tag, or the name of the a tag.
<style>:target{font-size:20pt;border:1pxsolidgray;}div:target{background-color:#ccc;}</style><p><ahref=#news1>Button 1</a></ p><p><ahref=#news2>Button 2</a></p><aname=news1>Content 1</a><divid=news2>Content 2</div>When button 2 is clicked, the result is displayed:
Form element pseudo-class selector
:in-range only works on elements that can specify interval values, such as the min and max attributes in the input element;
:invalid only works on elements that can specify interval values, such as the min and max attributes in the |input element, the correct email field, legal numeric fields, etc.
Structural pseudo-class selector
<style>p:first-child{color:red;}/*The first element is h1, so it is not selected*/p:first-of-type{color:blue;}p:nth-child(4){ color:green;}/*The fourth element is sp an, so it is not selected*/p:nth-of-type(4){color:pink;}p:only-child{color:yellow;}/*The 7th p is selected, but the style is overwritten*/ p:only-of-type{color:orange;}/ *The 7th and 8th p are selected*/</style><h1>Title 1</h1><p>The first p</p><p>The second p</p><span >Text content</span><p>The third p</p><p>The fourth p</p><p><i>Text content</i>The fifth p</p> <p>The sixth p</p><h5>Title 5</h5><div><p>The seventh p</p></div><div><p>The eighth p</p> p><span>Text content</span></div><div><p>The ninth p</p><p>The tenth p</p></div>Running results:
Negate pseudo-class selectors
Pseudo element
Pseudo elements create some abstract elements in the DOM tree. These abstract elements do not exist in the document language (can be understood as html source code). For example: the document interface does not provide a mechanism to access the first word or line of element content, but pseudo-elements allow developers to extract this information. Moreover, some pseudo-elements allow developers to obtain content that does not exist in the source document. A pseudo-element starts with two colons::, followed by the name of the pseudo-element.
Simply put, pseudo-elements create a virtual container that does not contain any DOM elements, but can contain content.
In the pseudo-element selector in CSS3 and the pseudo-class selector in CSS2, before and after are exactly the same.
There are only the following pseudo-elements:
The content attribute is used with the :before and :after pseudo-elements to insert generated content. You can use pseudo classes + pseudo elements.
CSS style weight
css priority rules:
(1) When the weight values of the CSS selection rules are different, the one with the higher weight value will take precedence;
(2) When the weight values of the CSS selection rules are the same, the rule defined later takes precedence;
(3) When !importand is added after the CSS attribute, unconditional absolute priority will be given;
Calculation of weight value: