What types of selectors are there in css?

The types of css selectors are: 1. Element selector; 2. ID selector; 3. Class selector; 4. Group selector (union selector); 5. Composite selector (intersection Selector); 6. Wildcard selector; 7. Descendant element selector; 8. Child element selection; 9. Pseudo-class selector; 10. Attribute selector; 11. Sibling element selector.

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

What are the types of CSS selectors?

1. Element selector Tag name{}

2. id selector #id attribute value { }

##3. Class selector ·class attribute value { }

4. Group selector (union selector)

Function: It can select multiple items at the same time Elements corresponding to selectors (usually used for collective declaration)

Syntax:

选择器1，选择器2，选择器n{ }

5. Compound selector (intersection selector)

Function: Select a more accurate and detailed target element and set attributes for it

Syntax:

选择器1选择器2选择器n{ }

ea7edd576fa00ec440699fe44a90f932

6. Wildcard selector

Function: Used to select all elements on the page

Syntax:

*{ }

7. Descendant element selector

Function: Select the specified element Specified descendant elements

Syntax:

Ancestor element Descendant element { }

8. Child element selector

Function: Select the child element of the specified parent element

Syntax:

Parent element>Child element

##9. Pseudo-class selector

Pseudo-class represents a special state of the element

##:hover The state of the element when moved in

• :visited The state of the element after it has been visited

• :active The state of the element when it is clicked

10. Attribute selector

Function: Select the specified element based on the attribute or attribute value in the element

Syntax:

[属性名]选取含有指定属性的元素
[属性名=“属性值”]选取含指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
[属性名*="属性值"] 选取属性值包含指定内容的元素

11. Sibling element selector

Selector

Function: Select The specified sibling element immediately after an element

Syntax: previous one after one (acts on the next one)

~

Selector

Function: Select all subsequent sibling elements

Syntax: Previous ~ all following

## Learning video sharing:

css video tutorial

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