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/imghw/default1.png"  data-src="1.jpg"  class="lazy"   alt="photo" />
<span><img src="/static/imghw/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!

Statement of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Roblox: Dead Rails - How To Tame Wolves

3 weeks ago By DDD

Strength Levels for Every Enemy & Monster in R.E.P.O.

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

2 weeks ago By DDD

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Java Tutorial

1655

14

CakePHP Tutorial

1414

52

Laravel Tutorial

1307

25

PHP Tutorial

1253

29

C# Tutorial

1227

24

Show More