Home > Developer > Web Develop
Second, selector
General syntax for inline, external style sheets:
Selector Selector
{
style = value;
style = value;
style = value;
......
}
Take the following HTML example to learn how to differentiate between the various styles of selectors
"Content-type"Content="text/html; Charset=utf-8"/><title> Untitled Document </title><link href="file:///E|/page/untitled-2.css"Rel="stylesheet"Type="Text/css"/> "txt"Id="A1"Type="text"/><br/><span> Hello </span> <br/><div><input name="txt"Id="A2"Type="text"/><br/><input name="txt"Id="A3"Type="text"Value="******"/><br/><span><input name="txt"Id="A4"Type="text"Value="******"/><br/></span></div><p> Hello </p> </body>
1, Tag Selector------to do with the tag name selector
Input{...} Div{...} Span{...} Td{...} Can do tag Selector, Tag Selector control is a class, the scope is large.
Cases:
" Utf-8 " ; /* */input{border:5px; Color: #3F6; border-bottom:3px solid red;}
Show Results:
2. Category selector------Use class to categorize elements in HTML elements, and then use the value of this class as the selector.
The class selector is all "." start. . Class Name {...} category selector controls are more accurate relative to the tag selector.
Example: Selector. uu
" Utf-8 " ; /* */. UU{border:5px; Color: #3F6; border-bottom:3px solid red;}
The call to the HTML table is:
"Content-type"Content="text/html; Charset=utf-8"/><title> Untitled Document </title><link href="file:///E|/page/untitled-2.css"Rel="stylesheet"Type="Text/css"/>"txt"Type="text"Id="A1"/><br/><spanclass="UU"> Hello </span> <br/><div><input name="txt"Type="text"Id="A2" class="UU"/><br/><input name="txt"Type="text"Id="A3"Value="******"/><br/><span><input name="txt"Type="text"Id="A4" class="UU"Value="******"/><br/></span></div><p> Hello </p> </body>
Show Results:
3. The ID selector------The element that corresponds to the ID in the HTML function, beginning with "#".
#ID的名 {...}
Example: Selector #a3
" Utf-8 " ; /* */#a3 {border:5px; Color: #3F6; border-bottom:3px solid red;}
Show Results:
4. Composite Selector
(1), with "," separated-------represents a side-by-side relationship, while working.
input, #dd,. Yellow,.uu{color:gray;line-height:28px;}(2), use " Space "separated,------represents a descendant relationship .
. 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 it is the offspring, or Sun Zide, are descendants, as long as the descendants of the DIV has UU changes.
Show Results:
(3) Class two filter.
The tag selector is followed by the. 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>
Show Results:
Div.uu means: The div exists at the same time. UU also exists, which belongs to two screening.
* Contrast: (div space. 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-------Chapter II: Selectors
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
