Home > Developer > Web Develop
1.
(1)
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
(2) the. my.css file is as follows:
@charset "Utf-8";/*CSS Document*//*the HTML selector*/Body{Color:Orange;}A:link{Color:Black;text-decoration:None;}a:hover{text-decoration:Underline;}a:visited{Color:Red;}/*. Style1 is a class selector*/. Style1{Font-weight:Bold;font-size:20px;Background-color:Pink;Color:Black;}#special_new{Font-style:Italic;Color:Red;}/*#style2就是id选择器*/#style2{font-size:30px;Background-color:Silver;Color:Black;}/*#style2 Span is the parent-child selector, #style2是父, span is the child*/#style2 span{Font-style:Italic;Color:Red;}/*#style2 Span is a parent-child selector, #style2是父, span is a child, also contains a hierarchical relationship*/#style2 span span{font-size:50px;}
If an element is decorated at the same time as the ID and class,the priority of the ID selector >class the selector
2. An element has at most one ID selector, but can have more than one class selector
(1) HTML file:
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Selector Selector</title><Linkrel= "stylesheet"href= "My.css"type= "Text/css"/></Head><Body>Hello, Beijing! <spanclass= "Style1"ID= "Special_new">News 1</span> <spanclass= "Style1">News 2</span> <spanclass= "Style1 style4">News 3</span> <spanclass= "Style1">News 4</span> <spanclass= "Style1">News 5</span> <spanID= "Style2">This is a<span>Very important</span>The News</span><BR/> <ahref="#">Goto Sohu</a><BR/> <ahref="#">Goto Sina</a><BR/></Body></HTML>
Here the "News 3" is decorated with two. class, if the decoration conflicts, which is the exact one?
(2) My.css file
@charset "Utf-8";/*CSS Document*//*the HTML selector*/Body{Color:Orange;}A:link{Color:Black;text-decoration:None;}a:hover{text-decoration:Underline;}a:visited{Color:Red;}/*. Style1 is a class selector*/. Style1{Font-weight:Bold;font-size:20px;Background-color:Pink;Color:Black;Font-style:Normal;}. Style4{Font-style:Italic;text-decoration:Underline;Color:Green;}#special_new{Font-style:Italic;Color:Red;}/*#style2就是id选择器*/#style2{font-size:30px;Background-color:Silver;Color:Black;}/*#style2 Span is the parent-child selector, #style2是父, span is the child*/#style2 span{Font-style:Italic;Color:Red;}/*#style2 Span is a parent-child selector, #style2是父, span is a child, also contains a hierarchical relationship*/#style2 span span{font-size:50px;}
The benchmark here is this: in the CSS file, the . class file is defined later, which shows its effect : for example, the. Style4 definition is behind. Style1, so the. Style4 effect will prevail
3.
---> separated by a space when referencing multiple class selectors
---> when the class selector conflicts, the last class selector style that appears in the CSS file is whichever
CSS Note 09: Selector priority
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
