Home > Developer > JavaScript
Css selector (basic) and css selector Basics
CSS selector:
The syntax of a style is composed of three parts: Selector + attribute value;
What is a selector?
A: In my straightforward understanding, the selector is used to select a label to operate on it. That is to say, the selector is a method of selecting elements.
1. Element Selector
<! DOCTYPE html>
<Html>
<Head>
<Title> selector </title>
<Style type = "text/css">
Div {
Collor: red;
}
</Style>
</Head>
<Body>
<P> sometimes, when the storm breaks, the sky goes straight to the sea. </p>
<Div> the game will go to the top of the page to see the mountains and small spaces </div>
<Span> by nature, our products are useful, and our resources are still available. </span>
</Body>
</Html>
2, id selector <! -- Two identical IDs cannot appear on the same page -->
<! DOCTYPE html>
<Html>
<Head>
<Title> selector </title>
<Style type = "text/css">
# Neo {
Collor: red;
}
</Style>
</Head>
<Body>
<P> sometimes, when the storm breaks, the sky goes straight to the sea. </p>
<Div id = "neo"> the game will go to the top of the page to see the mountains and small spaces </div>
<Span> by nature, our products are useful, and our resources are still available. </span>
<Div> digital character, still reading the present </div>
</Body>
</Html>
3. class selector <! -- Two identical classes can appear on the same page -->
<! DOCTYPE html>
<Html>
<Head>
<Title> selector </title>
<Style type = "text/css">
. Neo {
Collor: red;
}
</Style>
</Head>
<Body>
<P class = "neo"> sometimes, when the storm breaks down
<Div class = "neo"> the game will go to the top, with a small view </div>
<Span> by nature, our products are useful, and our resources are still available. </span>
<Div> digital character, still reading the present </div>
</Body>
</Html>
4. Child element Selector
<! DOCTYPE html>
<Html>
<Head>
<Title> selector </title>
<Style type = "text/css">
# Neo # number1 {
Collor: red;
} <! -- Content of the number1 sub-element under "parent element with id as neo" -->
# Neo2 {
Color: blue
} <! -- All content of the parent element whose id is neo2 is selected -->
</Style>
</Head>
<Body>
<Div id = "neo">
<P id = "number1"> sometimes, when the storm breaks down
<P id = "number2"> it will be the peak, with a small view </p>
</Div>
<Div id = "neo2">
<P id = "subject1"> sometimes, when the storm breaks down
<P id = "subject2"> the event becomes a peak, showing the mountains and small spaces </p>
</Div>
</Body>
</Html>
5. Group Selector
<! DOCTYPE html>
<Html>
<Head>
<Title> selector </title>
<Style type = "text/css">
# Number1, # number2, # subject1, # subject2 {color: # eee; font-szie: 18px ;}
</Style>
</Head>
<Body>
<Div id = "neo">
<P id = "number1"> sometimes, when the storm breaks down
<P id = "number2"> it will be the peak, with a small view </p>
</Div>
<Div id = "neo2">
<P id = "subject1"> sometimes, when the storm breaks down
<P id = "subject2"> the event becomes a peak, showing the mountains and small spaces </p>
</Div>
</Body>
</Html>
6. Pseudo-class selector
1,: after is used together with the content attribute to define the content after the object
Syntax: selector: after {content: "text ";}
Selector: after {content: url (image path );}
2,: before is used together with the content attribute to define the content after the object
Syntax: selector: before {content: "text ";}
Selector: before {content: url (image path );}
3,: first-letter: defines the style of the first character in the object.
Note: * (this pseudo element can only be used for block-level elements .)
4,: first-line: defines the style of the first line in the object.
Note: * (this pseudo element can only be used for block-level elements .)
!!! Browsers earlier than ie6 do not support pseudo object selectors
10:53:17
The above are several common selectors that must be mastered by css. I hope you can work hard and make progress together!
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
