Home > Developer > Web Develop
Selector: The selector is a pattern used to select the element that you want to add a style to.
First, the six major selectors are briefly described
Basic Selector
Tag Selector
Class Selector
ID Selector
Advanced Selector
Hierarchy Selector
Structure pseudo-Class selector
Property Selector
The basic selectors and hierarchical selectors are more commonly used.
I. Basic Selector
1. Tag Selector
Use HTML tags to set the text style within the label.
2. Class Selector
Use the class attribute to define a label class value, specifying a class of attribute values to define its style.
<H1 class= "ClassName"></H1 >
. classname{font-size:18px;}
3.ID Selector
Assigns a unique ID value to a particular tag, which cannot have duplicate ID values in an HTML document. The label can be positioned exactly.
<header id= "Idname"></header >
#idname{font-size:18px;}
Basic Selector Code Introduction:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>CSS Selector</title>6 <Linkrel= "stylesheet"type= "Text/css"href=".. /css/demo03.css "/>7 </Head>8 <Body>9 <H1>Fill in the Information form</H1>Ten <HR/> One <form> A <H3>Account information</H3> - <PID= "Id1">Name Name:<inputtype= "text"name= "Uname"/></P> - <Pclass= "Intro">Email:<inputtype= "Email"name= "Myemail"/></P> the <H3>Privacy Information</H3> - <PID= "Id2">Phone Number:<inputtype= "Number"name= "Phone"></P> - <Pclass= "Intro">Dense Code:<inputtype= "Password"name= "Pass"></P> - <P><inputtype= "Submit"value= "Submit"></P> + </form> - </Body> + </HTML>
DEMO03.CSS Code:
1 H1{Color:Red;}/*this is the tag Selector .*/2 . Intro{Color:Green;}/*This is the class selector*/3 #id1{Color:#E864D1;}4 #id2{Color:#A03200;}/*This is the ID selector*/
Run:
Two. Advanced Selector
1. Hierarchy Selector
| Selector Selector | Type | Function description |
| B! | Descendants selector. | Select the matching f element, and the matched F element is contained within the matched e element |
| E>f | Child Selector | Select the matching f element, and the matching f element is a child of the matching f element |
| E+f | Adjacent sibling selector | Select the matching f element, and the matching f element is immediately behind the matched e element |
| E~f | Universal Brotherhood Selector | Selects the matched F element, and all matching f elements after the matched e element |
2. Structure pseudo-Class selector
| Selector Selector | Function description |
| E:first-child | Element e As the first child element of a parent element |
| E:last-child | Element e As the last child element of the parent element |
| E f:nth-child (N) | Select the nth child element f of the parent element E, (n can be a even,odd) keyword is |
| E:first-of-type | Selects the first E element within a parent element with the specified type |
| E:last-of-type | Selects the last e element within the parent element with the specified type |
| E F:nth-of-type (N) | Selects the nth f element with the specified type within the parent element |
Use the key points of E F:nth-child (n) and E F:nth-of-type (n):
E F:nth-child (n) is found in the parent at the beginning of the first element, with no type.
E F:nth-of-type (n) Look at the type first in the parent, and then look at the position.
3. Property Selector
| Property Selector | Function description |
| E[ATTR] | Select to match the e element with the attribute attr |
| E[attr=val] | Select to match the e element with the attribute attr, and the attribute value is Val (where Val is case-sensitive) |
| E[attr^=val] | Select Match element E, and the e element defines the attribute attr, whose property value is any string that begins with Val |
| E[attr$=val] | Select the match element e, and the e element defines the genus attr whose attribute value is any string ending in Val |
| E[attr*=val] | Select Match element E, and the e element defines the attribute attr, whose attribute value contains "Val", in other words, the string Val matches any position in the attribute value |
The six major selectors of CSS
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
