CSS grouping and nested selectors

CSS Grouping and Nested Selectors

The so-called grouping selector means that when the elements corresponding to multiple selectors require the same style, multiple selectors can be separated by commas and placed in front of a style statement. Achieve the same effect of multiple selectors and multiple style declarations.

The so-called nested selector is to set the style of the element corresponding to the selector inside the selector.css

In the style There are many elements with the same style in the table.

h1{color:green;}
h2{color:green;}
p{color:green;}

To minimize code, you can use grouped selectors.
Separate each selector with a comma.
In the following example, we use grouped selectors for the above code:

h1,h2,p{color:green;}

Nested selectors

It may be applied to styles of selectors inside selectors.
In the following example, three styles are set:

Specify a style for all p elements

Specify a style for all elements with class="marked"

Specify a style for all p elements within class="marked" elements

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p{  
  color:blue;    text-align:center;}
.marked{    background-color:red;}
.marked p{    color:white;}
</style>
</head>
<body>
<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
<p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p{ color:blue; text-align:center;} .marked{ background-color:red;} .marked p{ color:white;} </style> </head> <body> <p>这个段落是蓝色文本，居中对齐。</p> <div class="marked"> <p>这个段落不是蓝色文本。</p> </div> <p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p> </body> </html>

submit Reset Code

Automatic operation

CSS grouping and nested selectors

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]