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
Define
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!
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
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
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)
Hot Topics
1377
52
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Making Your First Custom Svelte Transition
Mar 15, 2025 am 11:08 AM
The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.
Show, Don't Tell
Mar 16, 2025 am 11:49 AM
How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
How do you use CSS to create text effects, such as text shadows and gradients?
Mar 14, 2025 am 11:10 AM
The article discusses using CSS for text effects like shadows and gradients, optimizing them for performance, and enhancing user experience. It also lists resources for beginners.(159 characters)
What the Heck Are npm Commands?
Mar 15, 2025 am 11:36 AM
npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.
Creating Your Own Bragdoc With Eleventy
Mar 18, 2025 am 11:23 AM
No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.
Let's use (X, X, X, X) for talking about specificity
Mar 24, 2025 am 10:37 AM
I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
