【複合選取器】

標籤：

1.交集選取器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/css;charset=utf-8">    <title>交集選取器</title>    <style type="text/css">        p{            color:blue;            font-size: 18px;        }        p.p1{            color:red;            font-size: 24px;        }        .p1{            color:black;            font-size: 30px;        }    </style></head><body>    <p>使用P標記</p>    <p class="p1">指定了p.p1的文本</p>    <h3 class="p1">指定了.p1類別的標題</h3></body></html>

 

2.並集選取器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/css;charset=utf-8">    <title>並集選取器</title>    <style type="text/css">        h1,h2,h3,p,span{            color: red;            font-size: 12px;            font-weight: bold;        }    </style></head><body>    <p>這裡是p標籤</p>    <h1>這裡是h1標籤</h1>    <h2>這裡是h2標籤</h2>    <h3>這裡是h3標籤</h3>    <span>這裡是span標籤</span></body></html>

 

3.後代選取器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <meta http-equiv="Content-Type" content="text/css;charset=utf-8">    <title>後代選取器</title>    <style type="text/css">        h1 span{            color: red;        }    </style></head><body>    <h1>這是h1標籤內的文本<br><span>這是h1標籤下span內的文本</span></h1>    <h2>這是h2標籤內的文本<br><span>這是h2標籤下span內的文本</span></h2>    <h2></h2>    <h1>單獨的h1內的文本</h1>    <span>單獨的span內的文本</span></body></html>

 

【複合選取器】