1. class selector
<HTML>
<Head>
<Title> class selector </title>
<Style type = "text/CSS">
<! --
. One {
Color: red;/* red */
Font-size: 18px;/* text size */
}
. Two {
Color: green;/* green */
Font-size: 20px;/* text size */
}
. Three {
Color: cyan;/* cyan */
Font-size: 22px;/* text size */
}
-->
</Style>
</Head>
<Body>
<P Class = "one" > Class selector 1 </P>
<PClass = "two" > Class selector 2 </P>
<P Class = "three" > Class selector 3 </P>
<H3 Class = "two" > H3 is also applicable </Body>
</Html>
2. Mark Selector
<HTML>
<Head>
<Title> comparison between class selector and tag selector </title>
<Style type = "text/CSS">
<! --
P{/* Tag selector */
Color: blue;
Font-size: 18px;
}
. Special{/* Category selector */
Color: red;/* red */
Font-size: 23px;/* text size */
}
-->
</Style>
</Head>
<Body>
<P> Class selector and Mark selector 1 </P>
<P> class selector and tag selector 2 </P>
<P> class selector and tag selector 3 </P>
<PClass = "special"> Class selector and Mark selector 4 </P>
<P> class selector and tag selector 5 </P>
<P> class selector and Mark selector 6 </P>
</Body>
</Html>
3. Mark selector. Class
tag selector. class
<Body>
<H3> tag selector. class1 <H3> tag selector. class2 <H3Class = "special"> Tag selector. class3 <H3> tag selector. class4 <H3> tag selector. class5 <PClass = "special"> Used for other tags </P>
</Body>
</Html>
4. Use two classes at the same time
<HTML>
<Head>
<Title> use two classes at the same time </title>
<Style type = "text/CSS">
<! --
. One{
Color: Blue;/* color */
}
. Two{
Font-size: 22px;/* font size */
}
-->
</Style>
</Head>
<Body>
<H4> none </H4>
<H4Class = "one"> Two classes are used at the same time. Only the first class is used. </H4>
<H4Class = "two"> Two classes are used at the same time. Only the second class is used. </H4>
<H4Class = "Two One"> Use both classes and </H4>
<H4> none </H4>
</Body>
</Html>
5. ID Selector
<HTML>
<Head>
<Title> ID selector </title>
<Style type = "text/CSS">
<! --
# One{
Font-weight: bold;/* Bold */
}
# Two{
Font-size: 30px;/* font size */
Color: #009900;/* color */
}
-->
</Style>
</Head>
<Body>
<PId = "one"> ID selector 1 </P>
<PId = "two"> ID selector 2 </P>
<PId = "two"> ID selector 3 </P>
<PId = "One Two"> ID selector 3 </P>
</Body>
</Html>
6. collective statement
collective declaration
<Body>
<H1> collective statement H1 <H2Class = "special"> Collective statement H2 </H2>
<H3> collective declaration H3 <H4> collective statement H4 </H4>
<H5> collective declaration H5 </H5>
<P> collective statement P1 </P>
<PClass = "special"> Collective statement P2 </P>
<PId = "one"> Collective statement P3 </P>
</Body>
</Html>
7. Global Declaration
global declaration
<Body>
<H1> global declaration H1 <H2 class = "special"> Globally declare H2 </H2>
<H3> global declaration H3 <H4> global declaration H4 </H4>
<H5> global declaration H5 </H5>
<P> global declaration P1 </P>
<PClass = "special"> Globally declare P2 </P>
<PId = "one"> Global declaration P3 </P>
</Body>
</Html>
8. nesting declaration of CSS Selector
<HTML>
<Head>
<Title> nesting declaration of CSS selector </title>
<Style type = "text/CSS">
<! --
P B{/* Nested Declaration */
Color: maroon;/* color */
Text-Decoration: underline;/* underline */
}
-->
</Style>
</Head>
<Body>
<P> Nesting <B> Methods marked with CSS </B> </P>
The <B> flag </B> outside of nesting does not take effect.
</Body>
</Html>
9. parent-child relationship 1
<HTML>
<Head>
<Title> parent-child relationship </title>
<Base target = "_ blank">
<Style>
<! --
H1{
Color: red;/* color */
Text-Decoration: underline;/* underline */
}
H1 em{/* Nested selector */
Color: #004400;/* color */
Font-size: 40px;/* font size */
}
-->
</Style>
</Head>
<Body>
< H1 > Capital of the motherland < Em > Beijing < /Em > < /H1 >
<P> welcome to the capital of the motherland <em> Beijing </em>, this is the center of <strong> politics, <a href = "economic.html"> <em> economy </em> </a>, and culture </strong> in China </P>
<Ul>
<Li> here, you can:
<Ul>
<Li> feel the beauty of nature </LI>
<Li> experience the pace of life </LI>
<Li> appreciate the passion and vitality of the capital </LI>
</Ul>
</LI>
<Li> You can also:
<Ol>
<Li> climb the Great Wall in Badaling </LI>
<Li> go to Beijing to see the red leaves </LI>
<Li> go to Wangfujing to visit the night market </LI>
</OL>
</LI>
</Ul>
<P> if you have any questions, <a href = "contactus"> Contact Us </a> </P>
</Body>
</Html>
10. parent-child relationship 2
<HTML>
<Head>
<Title> parent-child relationship </title>
<Style>
<! --
. Li1{
Color: red;
}
. Li2{
Color: blue;
}
. Li1 ol Li{/* Use CSS inheritance relationships */
Font-weight: bold;/* Bold */
Text-Decoration: underline;/* underline */
}
-->
</Style>
</Head>
<Body>
<Ul>
<Li Class = "Li1" > Relationship 1
<Ul>
<Li> complex page parent-child relationship </LI>
<Li> complex page parent-child relationship </LI>
<Li> 20 Nesting is omitted here... </LI>
</Ul>
<Ol>
<Li> complex page parent-child relationship </LI>
<Li> complex page parent-child relationship </LI>
<Li> 20 Nesting is omitted here... </LI>
</OL>
</LI>
<Li Class = "li2" > Relationship 2
<Ul>
<Li> complex page parent-child relationship </LI>
<Li> complex page parent-child relationship </LI>
<Li> 20 Nesting is omitted here... </LI>
</Ul>
<Ol>
<Li> complex page parent-child relationship </LI>
<Li> complex page parent-child relationship </LI>
<Li> 20 Nesting is omitted here... </LI>
</OL>
</LI>
</Ul>
</Body>
</Html>
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
