Home  >  Article  >  Web Front-end  >  What is a css compound selector?

What is a css compound selector?

藏色散人
藏色散人Original
2019-05-17 13:17:277471browse

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="1.jpg" alt="photo" />
<span><img src="btn" 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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn