Home > Developer > Web Develop
CSS selector:
The syntax of a style is composed of three parts: Selector + attribute + attribute value;
What exactly is a selector?
A: The straightforward understanding of the individual is that choosing a label to manipulate it is called a selector. That is, selectors are a way of selecting elements.
1, element selector
<! DOCTYPE html>
<title> Selectors </title>
<style type = "Text/css" >
div{
collor:red;
}
</style>
<body>
<p> waves will sometimes, straight Hang Yun fan Chai Sea </p>
<div> when the Ling, at a glance at the Hill small </div>
<span> natural I will be useful, the daughter of the loose also come back </span>
</body>
2,id Selector <!--the same page cannot appear two identical id-->
<! DOCTYPE html>
<title> Selectors </title>
<style type = "Text/css" >
#neo {
collor:red;
}
</style>
<body>
<p> waves will sometimes, straight Hang Yun fan Chai Sea </p>
<div id= "Neo" > When Ling, at a glance at the small </div>
<span> natural I will be useful, the daughter of the loose also come back </span>
<div> number truly great men, also see the present </div>
</body>
3,class Selector <!--the same page can appear two identical class-->
<! DOCTYPE html>
<title> Selectors </title>
<style type = "Text/css" >
. neo{
collor:red;
}
</style>
<body>
<p class= "Neo" > Waves sometimes, straight hanging cloud sail sea </p>
<div class= "Neo" > When Ling, at a glance at the small </div>
<span> natural I will be useful, the daughter of the loose also come back </span>
<div> number truly great men, also see the present </div>
</body>
4, child element selector
<! DOCTYPE html>
<title> Selectors </title>
<style type = "Text/css" >
#neo #number1 {
collor:red;
} <!--to select the contents of the Number1 child element under "parent element with ID Neo"--
#neo2 {
Color:blue
} <!--to select all contents of the parent element with ID Neo2
</style>
<body>
<div id= "Neo" >
<p id= "Number1" > Waves will sometimes, straight Hang Yun fan ji hai </p>
<p id= "Number2" > When Ling, at a glance at the mountain small </p>
</div>
<div id= "Neo2" >
<p id= "Subject1" > Waves will sometimes, straight Hang Yun fan ji hai </p>
<p id= "Subject2" > When Ling, at a glance at the mountain small </p>
</div>
</body>
5, group selector
<! DOCTYPE html>
<title> Selectors </title>
<style type = "Text/css" >
#number1, #number2, #subject1, #subject2 {color: #eee; font-szie:18px;}
</style>
<body>
<div id= "Neo" >
<p id= "Number1" > Waves will sometimes, straight Hang Yun fan ji hai </p>
<p id= "Number2" > When Ling, at a glance at the mountain small </p>
</div>
<div id= "Neo2" >
<p id= "Subject1" > Waves will sometimes, straight Hang Yun fan ji hai </p>
<p id= "Subject2" > When Ling, at a glance at the mountain small </p>
</div>
</body>
6, Pseudo-class selector
1,:after is used in conjunction with the content property to define what is behind the object
Syntax: selector:: after{content: "Text";}
Selector:: After{content:url (Picture path);}
2,:before is used in conjunction with the content property to define what is behind the object
Syntax: selector:: before{content: "Text";}
Selector:: Before{content:url (Picture path);}
3,:first-letter: Defines the style of the first character within an object.
Description: * (this pseudo-element can only be used for block-level elements.) ）
4,:first-line: Defines the style of the first row within an object.
Description: * (this pseudo-element can only be used for block-level elements.) ）
！！！ IE6 the following versions of browsers do not support pseudo-object selectors
10:53:17 2017-11-05
The above is a few common selectors, but also the CSS must grasp the main points, I hope you practice and common progress!
CSS Selector (base)
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
