4.3.7 Union selector
A union selector is also called a compound selector. A union selector can select elements that satisfy multiple selectors at the same time
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Union selectors</title>
<style type = "text/css">
h2.h3.p {
color: red;
font-size: 14px;
} /* A union selector of different tags */
h3..special.#one {
text-decoration: underline;
} /* Underline */
</style>
</head>
<body>
<h2>Secondary heading text</h2> <! -- font 14 pixels, red -->
<h3>Level 3 heading text</h3> <! -- Font 14 pixels, red, underlined -->
<p class="special">Paragraph text 1, underlined.</p> <! -- Font 14 pixels, red, underlined -->
<p>Paragraph Text 2</p> <! -- font 14 pixels, red -->
<p id="one">Paragraph text 3</p> <! -- Font 14 pixels, red, underlined -->
</body>
</html>
Copy the code
The code size and color are the same, except that one title and two paragraphs of text are underlined (as indicated above).
4.3.8 Property selector
- E[att^=value] Attribute selector
The E[att^=value] attribute selector selects a tag named E that defines the ATT attribute, and the ATT attribute value contains a substring prefixed with value.
Note that E can be omitted, which means that any element that satisfies this condition can be matched. \
For example, div\[id^=section] matches a div element that contains an ID attribute whose value begins with the string “section.”
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>E[att^=value] The application of the attribute selector</title>
<style type="text/css">
p[id^="one"] {
color: pink;
font-family: Microsoft Yahei;
font-size: 20px;
}
</style>
</head>
<body>
<p id="one">The sky is azure blue</p> <! -- Property selector defined -->
<p id="two">There are paper cranes outside the window</p> <! Attribute selector not defined -->
<p id="one1">Play and write songs with me</p> <! -- Property selector defined -->
<p id="two2">Every minute of every moment</p> <! Attribute selector not defined -->
</body>
</html>
Copy the code
In the above code, the E[att^=value] attribute selector “p[id ^=” one “] “is used. Whenever the value of the ID attribute in the P element begins with the “one” string, it is selected, rendering a special text effect.
- E[att$=value] Attribute selector
The E[att$=value] attribute selector selects a tag named E that defines the ATT attribute, and the ATT attribute value contains a substring with the suffix value.
E can be omitted, which means that any element that satisfies the condition can be matched.
For example, div[id$=section] matches div elements that contain the ID attribute and whose id attribute value ends in the string “section.”
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>E[att$=value] Application of attribute selectors</title>
<style type="text/css">
p[id$="one"] {
color: pink;
font-family: Microsoft Yahei;
font-size: 20px;
}
</style>
</head>
<body>
<p id="one1">The sky is azure blue</p> <! Attribute selector not defined -->
<p id="two">There are paper cranes outside the window</p> <! Attribute selector not defined -->
<p id="1one">Play and write songs with me</p> <! -- Property selector defined -->
<p id="two2">Every minute of every moment</p> <! Attribute selector not defined -->
</body>
</html>
Copy the code
In the code above, the E[att$=value] attribute selector “p[id $=” one “] “is used. Whenever the value of the ID attribute in the P element ends in the “one” string, it is selected, rendering a special text effect.
- E[att*=value] Attribute selector
The E[att*=value] attribute selector selects a tag named E that defines the ATT attribute, and the att attribute value contains a substring of value.
E can be omitted, which means that any element that satisfies the condition can be matched.
For example, div[id*=section] matches div elements that contain the ID attribute and whose ID attribute value contains the “section” string.
Case study:
<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>E[att*=value] Application of an attribute selector</title>
<style type="text/css">
p[id*="one"] {
color: pink;
font-family: Microsoft Yahei;
font-size: 20px;
}
</style>
</head>
<body>
<p id="one1">The sky is azure blue</p> <! -- Property selector defined -->
<p id="two">There are paper cranes outside the window</p> <! Attribute selector not defined -->
<p id="1one">Play and write songs with me</p> <! -- Property selector defined -->
<p id="two2">Every minute of every moment</p> <! Attribute selector not defined -->
</body>
</html>
Copy the code
In the above code, the E[att*=value] attribute selector “p[id*=” one “] “is used. As long as the VALUE of the ID attribute in the P element contains the “one” string, it is selected, rendering a special text effect.