- Intersection selector
- Union selector
- Descendant Selectors
- Child Selector
- Adjacent Sibling Selectors
- attribute selectors
Intersection selector
The intersection selector consists of two selectors directly connected. The first selector must be an element selector, and the second selector must be a class selector or ID selector. The two selectors must be written continuously without spaces.
The element selected by the intersection selector must be the element type specified by the first selector, which must contain the ID name or class name corresponding to the second selector. The style of the element selected by the intersection selector is three selector styles, that is, the first selector;
Syntax:
element selector . Class selector ｜ #ID selector {
Attribute 1: Attribute value 1;
Attribute 2: Attribute value 2;
}
Syntax description: "class selector ID selector" means to use class selector or ID selector.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Style using the intersection selector </title>
<style>
/* The element selector sets the border and bottom margin styles */
div {
border: 5px solid red;
margin-bottom:20px;
}
/* Sets the background color using the intersection selector */
div.txt {
background:#33FFCC;
}
/* Set font format using class selector */
.txt {
font-style:italic;
}
</style>
</head>
<body>
<div> Element selector effect </div>
<div class="txt"> Intersection selector effect </div>
<span class="txt"> Class selector effect </p>
</body>
</html>
Union selector
Union selector is also called group selector or group selector. It is composed of two or more arbitrary selectors. Different selectors are separated by "," to realize the "collective declaration" of multiple selectors.
The characteristic of union selector is that the style set is effective for each selector in union selector.
The function of union selector is to extract the same styles of different selectors, and then put them in one place for one-time definition, so as to simplify the amount of CSS code.
Syntax:
Selector 1,
Selector 2,
Selector 3,
{
Attribute 1: Attribute value 1;
Attribute 2: Attribute value 2;
}
Syntax description: the type of selector is arbitrary. It can be either a basic selector or a composite selector.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Style using the union selector </title>
<style>
div {
margin-bottom:10px;
border:3px solid red;
}
span {
font-size:26px;
}
p {
font-style:italic;
}
/* Use the union selector to set the common style of the element */
span,
.p1,
#d1 {
background:#CCC;
}
</style>
</head>
<body>
<div id="d1"> This is DIV1</div>
<div> This is DIV2</div>
<p class="p1"> This is paragraph one </p>
<p> This is paragraph two </p>
<span> This is a SPAN</div>
</body>
</html>
Descendant Selectors
Descendant selectors, also known as include selectors, are used to select descendant elements of a specified element. Using descendant selectors can help us find the target element faster and more accurately.
Syntax:
Selector 1 selector 2 selector 3 {
Attribute 1: Attribute value 1;
Attribute 2: Attribute value 2;
}
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Style using the descendant selector </title>
<style>
#box1 .p1 {/ * descendant selector*/
background:#CCC;
}
#box2 p {/ * descendant selector*/
background:#CFC;
}
</style>
</head>
<body>
<div id="box1">
<p class="p1"> Duan Luoyi </p>
<p class="p2"> Paragraph 2 </p>
</div>
<div id="box2">
<p class="p1"> Duan Luosan </p>
<p> Paragraph 4 </p>
</div>
<p class="p1"> Duan luowu </p>
<p> Paragraph 6 </p>
</body>
</html>
Child Selector
The descendant selector can select all descendant elements of the specified type of an element. If you only want to select all child elements of an element, you need to use the child element selector.
Syntax:
Selector 1> Selector 2 {
Attribute 1: Attribute value 1;
Attribute 2: Attribute value 2;
}
Syntax description: ">" is called a left binder, and spaces can appear on the left and right sides. "Selector 1 > selector 2" means "select all the child elements specified by selector 2 as the element specified by selector 1"
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Application example of child element selector </title>
<style>
h1>span {
color:red;
}
</style>
</head>
<body>
<h1> This is very, very <span> important </span> And <span> crux </span> Next step.</h1>
<h1> This is really very <em><span> important </span> And <span> crux </span></em> Next step.</h1>
</body>
</html>
Adjacent Sibling Selectors
If you need to select the element immediately after an element, and they have the same parent element, you can use the adjacent sibling selector.
Syntax:
Selector 1+ Selector 2 {
Attribute 1: Attribute value 1;
Attribute 2: Attribute value 2;
}
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Adjacent brother selector application example </title>
<style>
h1+p {
color:red;
font-weight:bold;
margin-top:50px;
}
p+p{
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<h1> This is a primary title </h1>
<p> This is paragraph 1.</p>
<p> This is paragraph 2.</p>
<p> This is paragraph 3.</p>
</body>
</html>
attribute selectors
In CSS, we can also select elements according to their attributes and attribute values. The selector used at this time is called attribute selector. There are two main forms of using attribute selectors,
Syntax:
Property selector 1 property selector 2...{
Attribute 1: Attribute value 1;
Attribute 2: Attribute value 2;
}
Element selector attribute selector 1 attribute selector 2... {
Attribute 1: Attribute value 1;
Attribute 2: Attribute value 2;
}
Syntax description: the attribute selector is written as [attribute expression], in which the attribute expression can be an attribute name or an expression such as "attribute = attribute value"
Application of attribute selector:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Application of attribute selector </title
<style>
[title] {/* Select the element with the title attribute */
color: #F6F;
}
a[href][title]{/* Select the a element with both href and title attributes */
font-size: 36px;
}
img[alt] {/* Select the img element with the alt attribute */
border: 3px #f00 solid;
}
p[align="center"] {/* Select the p element whose align attribute is equal to center */
color: red;
font-weight: bolder;
}
</style>
</head>
<body>
<h2> Apply attribute selector style:</h2>
<h3 title="Helloworld">Helloworld</h3>
<a title=" home page "href="#"> back to home < / a > < br / > < br / >
<img src="miaov.jpg" alt="logo" />
<p align="center"> Duan Luoyi </p>
<hr />
<h2> No attribute selector style applied
<h3>Helloworld</h3>
<a href="#"> back to home < / a > < br / > < br / >
<img src="miaov.jpg">
<p align="right"> Paragraph 2 </p>
</body>
</html>
last
I would like to share the knowledge points involved in the real interview questions of big companies such as byte beating, meituan and headlines, as well as my personal learning methods and learning routes. Of course, I have also sorted out some learning documents and materials, which are attached to you. The knowledge points are relatively comprehensive, including but not limited to front-end foundation, HTML, CSS, JavaScript, Vue, ES6, HTTP, browser, algorithm, etc
Receive detailed answers to interview questions, learning notes, learning videos and other materials from large factories, Click the data collection through train Free!
Front end video data:
html>
### last I would like to share the knowledge points involved in the real interview questions of big companies such as byte beating, meituan and headlines, as well as my personal learning methods and learning routes. Of course, I have also sorted out some learning documents and materials, which are attached to you. The knowledge points involved are relatively comprehensive, including but not limited to**Front end foundation, HTML，CSS，JavaScript，Vue，ES6，HTTP，Browsers, algorithms, etc** >Receive detailed answers to interview questions, learning notes, learning videos and other materials from large factories,[Click the data collection through train](https://gitee.com/vip204888/web-p7) for free! [External chain picture transfer...(img-TgxfhaGa-1626925686509)] **Front end video data:** 