Home > Developer > Web Develop
<style type= "Text/css" >
/*
Selector: The function of the selector is to find the corresponding data to be styled.
1. Tag Selector: Just find all the specified labels to style.
Format:
Label name {
Style 1; style 2 ....
}
Example:
div{
Color: #F00;
font-size:24px;
}
2. Class Selector: Use the class selector to first specify the corresponding class attribute value for the HTML tag.
Format:
The property value of the. Class {
Style 1; Style 2 ...
}
Example:
. two{
Background-color: #0F0;
Color: #F00;
font-size:24px;
}
Things to note for class selectors:
1. The class attribute value of an HTML element must not begin with a number.
2. The style of the class selector is the style that takes precedence over the label selector.
3. ID Selector: Use the ID selector to first add an id attribute value to an HTML element.
Format of the ID selector:
#id属性值 {
Style 1; Style 2 ...
}
Things to note about the ID selector:
1. The style priority of the ID selector is highest and takes precedence over the class selector and tag Selector.
2. The attribute value of an ID also cannot begin with a number.
3. The attribute value of ID can only appear once in an HTML page.
4. Intersection selector: is to style the data inside selector 2 in selector 1.
Selector Selector 1 Selector 2{
Style 1, Style 2 ....
}
Example:
. span{
Background-color: #999;
font-size:24px;
}
5. Union selector: Uniform styling of the specified selector.
Format:
Selector 1, selector 2: {
Style 1; Style 2 ...
}
span,a{
Border-style:solid;
Border-color: #F00;
}
6. By selector:
*{
Style 1; Style 2 ...
}
*/
*{
Text-decoration:line-through;
Background-color: #CCC;
}
</style>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<body>
<div id= "One" class= "two" > this is <span> First div tag </span>...</div>
<div id= "One" class= "two" > This is <span> a second div tag </span>...</div>
<span> This is a span tag </span><br/>
<a class= "" "href=" # "> News headlines </a>
</body>
07.CSS Learning-css Selector
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
