Take the following HTML example to learn how to differentiate between the various style selectors.
1. Basic:
(1) Tag selector: Use tag name to select the selector.
Input{...} Div{...} Span{...} Td{...} can be used as tag selectors. The tag Selector controls a class with a large range.
Cases:
@charset "Utf-8";/* CSS Document */input{border:5px; Color: #3F6; border-bottom:3px solid Red;}
Execution Result:
(2) Category selector: Use class to categorize elements in HTML elements, and then use the value of this class as the selector.
The name of the. Class {...} The category selector is the one who wants to change who to change individually, more precisely than the tag selector.
Selector:
@charset "Utf-8";/* CSS Document */.uu{border:5px; Color: #3F6; border-bottom:3px solid Red;}
The call to the HTML table is:
class= "UU" class= "UU" /><br/><input name= "txt" type= "text" id= "A3" class= "UU" value= "******" /><br/></span></div><p> Hello </p> </body>
Execution Result:
(3) ID Selector: Works on the element for the corresponding ID in HTLM.
#ID的名 {...}
Selector:
@charset "Utf-8";/* CSS Document */#a3 {border:5px; Color: #3F6; border-bottom:3px solid Red;}
Execution Result:
2. Compounding:
(1) separated by commas. --side-by-side relations, while working.
Input, #dd,. yellow,.uu{color:gray;line-height:28px;}
(2) separated by a space. --Future relationships.
. uu{ color:gray;line-height:28px;}
Div. uu <!--div space Uu-->{background-color:blue;} <input name= "txt" type= "text" class= "UU"/><div> <!--equivalent to the parent--><input name= "txt" type= "text"/ > <!--descendants--><input name= "TXT" type= "text" class= "UU" value= "******"/> <!--descendants-->< Span> <!--descendants--><input name= "TXT" type= "text" class= "UU" value= "******"/> <!--grandson--- </span></div>
Whether the offspring or grandchildren are descendants, as long as the descendants of the DIV has UU changes.
Execution Result:
(3) Class two filter.
Tag Selector. class Selector {...}
Input.uu
{
border:5px double red;
}
Cases:
. uu{ color:gray;line-height:28px;} Div.uu {background-color:red;} <body><input name= "txt" type= "text" class= "UU"/><br/><div><input name= "txt" type= "text"/ ><br/><input name= "txt" type= "text" class= "UU" value= "******"/><br/><span><input name = "txt" type= "text" class= "UU" value= "******"/></span></div> </body>
Execution Result:
Div.uu means: The div exists at the same time. UU also exists, which belongs to two screening.
* Contrast: Div. UU is different from Div.uu.
div spaces. UU means: The descendants of the div (whether in the offspring or in the grandchildren) appear. UU, the items that appear will change with the style sheet.
Div.uu means: div exists at the same time. When UU is present, it changes with the style sheet and belongs to two filters.
CSS style sheet---style sheet classification, selector