What is a css compound selector?

css compound selector is composed of two or more basic selectors, combined in different ways, in order to select more accurate and detailed targets. Element tag.

CSS compound selectors include sub-selectors, adjacent selectors, containing selectors, multi-level selector nesting, attribute selectors, pseudo-selectors and pseudo-element selectors,

The specific usage of the above is as follows:

1. Sub-selector, the code is as follows:

<style type="text/css">
#pic>img{ // 使用 > 号，让选择器只选择直接的子类，width:200px;
height:200px;
}
</style>
<div id="pic">
<img src="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy"   alt="photo" />
<span><img src="/static/imghwm/default1.png"  data-src="btn"  class="lazy"   alt="点击大图" /></span>
</div>

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 the paragraph that appears immediately after the h1 element, you can write:

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

This selector reads: "Select the paragraph immediately after h1 The paragraph that appears after the h1 and p elements have a common parent element."

3. Include selector

The code is as follows:

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

Definition

in the containing box The font size of the paragraph is 14 pixels
Define

The font size of the paragraph in the containing box is 12 pixels.

4. Multi-level 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) Match attribute name selector

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

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

(2) Match the attribute value selector

img[alt="图像"][title="图像"] {border：solid 2px red}：

to Define style

(3) Fuzzy matching attribute value selector

6, pseudo Selectors and pseudo-element selectors

<style type ="text/css">
a:link{color:#FF0000} /*正常链接状态下样式*/
a:visited{color:#0000FF} /*被访问之后的样式*/
a:hover{color:#00FF00} /*鼠标经过的样式*/
a:active{color:#FF00FF} /*超链接被激活的样式*/
</style>

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