CSS advanced features
1. CSS composite selector
1. Label-specific selector
Tag-specific selectors, also called intersection selectors, consist of multiple selectors, the first of which is a tag selector, and the second is a class selector or an id selector. h3.special or p # one.
Such as:
<head>
<meta charset="utf-8">
<title>标签指定式选择器的应用</title>
<style type="text/css">
p{color:blue;}
.special{color:red;}
p.special{color:green;}
</style>
</head>
<body>
<p>这是一段蓝色段落文本（普通）</p>
<p class="special">指定了.special类的段落文本（绿色）</p>
<h3 class="special">指定了.special类的标题文本（红色）</h3>
</body>2. Descendant selector
The descendant selector is used to select the descendants of an element or element group. Its writing method is to write the outer layer mark in the front, the inner layer mark in the back, separated by a space. When the tags are nested, the inner tags become descendants of the outer tags.
E.g:
<head>
<meta charset="utf-8">
<title>后代选择器</title>
<style type="text/css">
p strong {color:red;}
strong {color:blue;}
</style>
</head>
<body>
<p>段落文本<strong>嵌套在段落中，使用strong标记定义的文本（红色）。</strong></p>
<strong>嵌套之外由strong标记定义的文本（蓝色）。</strong>
</body>
The style defined by the descendant selector p strong is only applicable to the <strong> tag nested in the <p> tag. Other <strong> tags are not affected. The
descendant selector is not limited to the use of two elements. For elements, just add spaces between the elements.
3. Union selector
Union selectors are formed by connecting each selector through a comma. Any form of selector (including tag selector, class selector, id selector, etc.) can be used as part of the union selector. If the styles defined by some selectors are exactly the same, or partially the same, you can use the union selector to define the same CSS style for them.
E.g:
<head>
<meta charset="utf-8">
<title>并集选择器</title>
<style type="text/css">
h2,h3,p{ color:red; font-size:14px;}
h3,.special,#one{ text-decoration:underline;}
</style>
</head>
<body>
<h2>二级标题文本。</h2>
<h3>三级标题文本，加下划线</h3>
<p class="special">段落文本1，加下划线。</p>
<p>段落文本2，普通文本。</p>
<p id="one">段落文本3，加下划线</p>
</body>
Second, CSS cascading and inheritance
1. Stackability
The so-called stackability refers to the superposition of multiple CSS styles.
E.g:
<head>
<meta charset="utf-8">
<title>css层叠性</title>
<style type="text/css">
p{font-size:12px;font-family:"微软雅黑";}
.special{font-size:16px;}
#one{color:red;}
</style>
</head>
<body>
<p class="special" id="one">段落文本1</p>
<P>段落文本2</P>
<p>段落文本3</p>
</body>
Both the tag selector p and the class selector special define the font size of paragraph text 1, but the paragraph text shows the font size defined by the class selection special, because the priority of class selection is higher than the priority of tag selection
2. Inheritance
The so-called inheritance means that when writing a CSS style sheet, the word mark will inherit certain styles of the parent mark, such as text color and font size. For example, if the text color of the body element body is defined as black, all text on the page will be displayed as black. This is because other tags are nested in the
<body> tag, which is the word tag of the <body> tag.
Proper use of inheritance can simplify code and reduce the complexity of CSS styles. However, if all elements in a web page inherit a large number of styles, it is difficult to determine the source of the style, so you can use inheritance for fonts, text attributes, and other common styles in web pages. For example, the font size, font, color, line spacing, etc. can be set uniformly in the body element, and then affect all the text in the document.
Not all CSS properties can be inherited, the following properties are not inheritable:
①. Border attribute
② Outer margin attribute
③ Inner margin attribute
④ Background attribute
⑤ Positioning attribute
⑥ Layout attribute
⑦ Element width and height attribute
3. CSS priority
! The important command has the highest priority
id selector weight is 100, the
tag selector weight is 1 and the
class selector weight is 10.
