How to use attribute selectors and pseudo-class selectors

Today we will tell you about the usage and related connections and differences betweenAttribute Selectorand PseudoClass Selector. Here is a small example.

Attribute selector:

[attr~="value"] Word Word Space Word Word must be valid

[attr|="value"] Value starts with or value - Word

Note:

It is difficult to use rulesexpressionsto identify selected elements when selecting attributes, which is more efficient

Pseudo-class Selector:

: before

: after

:lang(val) val/val-word

:nth-child(n) nfrom Starting from 1, odd base and even even number

:nth-of-type(n) selector matches every element that is the Nth child element of a specific type of the parent element.

      
   
 
aaa
 
aaa
 
aaa
 
aaa
 
   Css部分： @charset "utf-8"; /* CSS Document */ /* p:before{ content:"ccc"; } p:lang(en){ border:1px solid #ff0000; } p:nth-child(even){ background:#F00; } */ p:nth-of-type(3){ /* p标记的父元素 下的 第3个p元素*/ background:#F00; }

Related Read:

How to hide content that overflows a DIV

What are the techniques for CSS layout

Font styles in CSS How to set up

The above is the detailed content of How to use attribute selectors and pseudo-class selectors. For more information, please follow other related articles on the PHP Chinese website!