What is css compound selector?

Css compound selector is composed of two or more basic selectors combined in different ways, the purpose is to select more Accurate and finer-grained labeling of target elements. CSS composite selectors include sub-selectors, adjacent selectors, containment selectors, multi-layer selector nesting, attribute selectors, pseudo-selectors and pseudo-element selectors. The specific usage of the above is as follows:

1. The sub-selector code is as follows:

2. Adjacent selector

If you need to select an element immediately after another element, and both have the same parent element, you can use the adjacent sibling selector ( Adjacent sibling selector).

For example, if you want to increase the top margin of a paragraph that appears immediately after the h1 element, you can write:

h1 + p {margin-top:50px;}

This selector reads: “Selects the paragraph that appears immediately after the h1 element that has a common parent with the p element”.

3. Include the selector

The code is as follows:

#header p{font-  size:14px}
 #main p {font-size:12}

Define the font size of the paragraph in the containing box as 14 pixels
Define the font size of the paragraph in the containing box as 12 pixels.

4. Multi-layer selector nesting

The code is as follows:

#wrap #header h2 span {font  -size:24px}
 #wrap #main h2 span {font-size:14px}

5. Attribute selector

(1) Matching attribute name selector

div[class] {font-size:24px;}

Make this selector match the object definition format with class attribute set in div

(2) Matching attribute value selector

img[alt="image"][title="image"] {  border: solid 2px red}: 

Define style for

(3) blur Match attribute value selector

6. Pseudo-selector and pseudo-element selector

The above is the detailed content of what is the CSS compound selector? For more information, please pay attention to other related articles on 1024programmer.com!