Home > Developer > Web Develop
Compound selectors and features of CSS
In this study, we will delve into the relevant concepts of CSS, and on the basis of the 3 basic selectors introduced in the previous article, learn 3 kinds of selectors composed of basic selectors, and then introduce two important features of CSS.
1. Composite Selector
The composite selector is two or more basic selectors, which are connected in different ways into a selector.
There are three types of composite selectors: the intersection selector , the set selector, and the descendant selector .
(1) Intersection selector
The intersection composite selector consists of two selectors, the first of which must be a tag selector, the second must be a category selector or an ID selector, and there can be no spaces between the two selectors.
For example: declaration of P,. Special,p.special These three kinds of selectors:
Case Listing Code:
<!doctype html>
<meta charset= "UTF-8" >
<meta name= "Generator" content= "editplus®" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<title> Intersection composite Selector </title>
<style type= "Text/css" >
p{
Color:blue;
}
p.special
{
color:red;
}
. Special:
{
Color:green;
}
</style>
<body>
<p> Normal paragraph text (blue) </p>
<p class= "Special" > Specifies the paragraph text of the. Special category (red) </p>
</body>
The style of the p tag is defined in the case code, and the style of the ". Special" category is also defined, and the p.special is defined separately for special control, while the style style defined in this p.special is only suitable for <p class= "Special" > Without affecting other tokens that use the. Special.
(2) Set selector
The set selector is referred to collectively as "collective declaration", and the set selector is a comma-connected selection of selectors.
Case Presentation :
<!doctype html>
<meta charset= "UTF-8" >
<meta name= "Generator" content= "editplus®" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<title> Collection Selector </title>
<style type= "Text/css" >
h1,h2,h3,h4,h5,p{
Color:green;
font-size:1px;
}
H2.special,.special, #one {
Text-decoration:underline;
}
</style>
<body>
<H2 class= "Special" > Case text 2<p> Case Text p1</p>
<p class= "Special" > Case text p2</p>
<p id= "One" > Case text p3</p>
</body>
In the case column, you can see that all rows are colored green and have a font size of 15px. This collective declaration has the same effect as a separate declaration h2.special,. Special and #one statements do not affect the previous collective declaration, and the second and last two lines are highlighted with an underscore in green and 15px in size.
(3) Descendant selector
CSS selectors, you can also declaratively declare HTML tags for special locations, such as when <span></span> tags are included between <p> and </p>, and you can control them with the descendant selector. The descendant selector is written by writing the outer tag in front, with the inner tag written in the back and separated by a space. When a tag is nested, the inner tag becomes the descendant of the outer tag.
For example, suppose you have the following code:
<p> outer text,<span> the middle text <b> text in the inner layer </b></span></p>
The outer layer is the <p> tag, nested inside the <span> tag,<span> tag and nested <b> tag, then <span> is the <p> child element,<b> is < The child element of the span>.
<!doctype html>
<meta charset= "UTF-8" >
<meta name= "Generator" content= "editplus®" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<title>descendant Selector</title>
<style type= "Text/css" >
P span{
Color:blue;
}
span{
Color:yellow;
}
</style>
<body>
<p> nesting enables <span> with CSS(blue)</span> Methods of marking </p>
<span> tags outside of nesting(yellow)</span> does not take effect
</body>
By nesting the span selector in the P selector, the display effect is only appropriate for <span> marks between <p> and </p>, and the <span> tag outside does not have any effect; only the first line < The text between span> and </span> becomes blue, while the text between <span> and </span> in the second line is set by the second CSS style rule, which is yellow.
* * The nesting of selectors can greatly reduce the health declaration of class and ID in CSS writing.
In the CSS2, a selector, called a "sub-selector", which affects only the direct offspring, is also specified, which does not work for descendants and multi-layered descendants.
* * The syntax difference between a child selector and a descendant selector is the use of a greater than sign connection:
<p> content in the,<span> intermediate content b> the contents of the inner layer </b></span></p>
assume that the above content CSS is set to:
p>span{
Color:yellow;
}
The effect is that only the words " Middle content " turn yellow , because span is a direct descendant of P, and B is the "grandson" of P is not in the selected range.
2, the inheritance of CSS features
CSS inheritance refers to the child tag can inherit all the style of the parent tag, and can be modified on the basis of the style of the parent tag style, resulting in a new style, and the child tag style style does not affect the parent tag at all.
The child tag inherits the style from the parent tag:
<p> Lao Luo is <b>NB</b> type of person </p>
Assume that the above content CSS is set to:
p{
Color:green;
Text-decoration:underline;
}
b{
color:red;
}
The effect of the case is:
You can see that B inherits the underline style and changes the color . Also, the style style of the child tag does not affect the parent tag at all, so that the CSS style can be shared.
3. CSS cascading features
cascading features can be summed up in order of precedence between styles , whichever is higher priority when a conflict arises.
Each style priority ranking:
Inline style >id style >class style > marker style
When the two category style priority is the same, this is written in the former (written in front > written in the back). such as: <p class= "P1 P2" > at this time P1 style priority </p>
The above content is partly from www.ptpress.com.cn
(2) CSS composite selectors and features
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
