How to use CSS composite selector

Time:2021-10-18

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 with 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 with 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 with 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" > paragraph 1</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" > paragraph 5</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 sub element selector < / Title >
<style>
h1>span {
    color:red;
}
</style>
</head>
<body>
    <h1>This is a very, very important < / span > and < span > critical < / span > step</ h1>
    <h1>This is really a very < EM > < span > important < / span > and < span > critical < / span > < / EM > 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 > application example of adjacent brother selector < / 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 an 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" href = "#" > back to home < / a > < br / > < br / >
     <img src="miaov.jpg" alt="logo" />
     < p align = "center" > paragraph 1</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>

This is the end of this article on the specific use of CSS composite selectors. For more information about CSS composite selectors, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!