Home > Developer > Web Develop
1. Parent-Child Selector
(1) 01.html
<!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">News 1</span> <spanclass= "Style1">News 2</span> <spanclass= "Style1">News 3</span> <spanclass= "Style1">News 4</span> <spanclass= "Style1">News 5</span> <!--Parent-Child selectors use - <spanID= "Style2">This is a<span>Very important</span>The News</span><BR/> <spanID= "Style2">This is a<span>Very<span>Important</span></span>The News</span><BR/> <ahref="#">Goto Sohu</a><BR/> <ahref="#">Goto Sina</a><BR/></Body></HTML>
(2) My.css
@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;}/*#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;}
：
Summary: Here the sub-selector label must exist, that is, <span> can not be changed to another non-existent tag; here #style2 span also contains hierarchical relationships, such as #style2 span span
This is rarely used over three layers.
The parent-child selector is used with the ID selector and class selector!!!
CSS Note 08:id selector parent-Child 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
