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"元素內(nèi)的 p 元素指定一個樣式，但有不同的文本顏色。</p>
</body>
</html>
