What are the selectors in css?

css selectors include: 1. Wildcard selector "*"; 2. ID selector; 3. Class selector; 4. Tag selector; 5. Adjacent selector "E F"; 6 , sub-selector "E>F"; 7. Descendant selector "E F"; 8. Pseudo-class and pseudo-element selectors, such as ":first"; 9. Attribute selector.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css selector (selector) is a specification used to specify which dom element or elements the css style is used for.

Each css style definition consists of two parts, the form is as follows: Selector {style} The part before {} is the "selector".

The "selector" specifies the object (dom object) of the "style" in {}, that is, which elements in the web page the "style" acts on.

What are the css selectors (selectors)?

1. Wildcard selector (*): matches any element.

2. ID selector (# myid): matches any element whose ID is equal to "myid".

3. Class selector (.myclassname): Match any element whose class is equal to "myclassname".

4. Label selector (div, h1, p): Select the specified element name All elements.

5. Adjacent selector (E F): used to select (not internally) the element immediately following the specified first element.

6. Child selector (E > F): used to select elements with specific parent elements, for example ul > li, select all < each < whose parent is

element li> element. (Learning video sharing: css video tutorial)

7. Descendant selector (EF): used to select elements inside the element.

8. Pseudo-class and pseudo-element selectors: used to add special effects to certain selectors.

:active	:any-link	:blank	:checked	:current	:default
:defined	:dir()	:disabled	:drop	:empty	:enabled
:first	:first-child	:first-of-type	:fullscreen	:future	:focus
:focus-visible	:focus-within	:has()	:host	:host()	:host-context()
:hover	:indeterminate	:in-range:invalid	:is()	:lang()	:last-child
:last-of-type	:left	:link	:local-link	:not()	:nth-child()
:nth-col()	:nth-last-child()	:nth-last-col()	:nth-last-of-type()	:nth-of-type()	:only-child
:only-of-type	:optional	:out-of-range	:past	:placeholder-shown	:read-only
:read-write	:required	:right	:root	:scope	:target
:target-within	:user-invalid	:valid	:visited	:where()

##9. Attribute selector: select with Elements with specific attributes.




• [attribute]: used to select elements with specified attributes.

• [attribute=value]: Used to select elements with specified attributes and values.

• [attribute~=value]: Used to select elements whose attribute value contains the specified vocabulary.

• [attribute|=value]: Used to select elements with attribute values ​​starting with the specified value, which must be the entire word.

• [attribute^=value]: Matches every element whose attribute value starts with the specified value.

• [attribute$=value]: Matches every element whose attribute value ends with the specified value.

• [attribute*=value]: Matches every element whose attribute value contains the specified value.

For more programming-related knowledge, please visit:

Introduction to Programming! !


The above is the detailed content of What are the selectors in css?. For more information, please follow other related articles on the PHP Chinese website!