css三种选择器
<html><head><title>testCSS</title> <style type="text/css">/*1.1定義多個(gè)HTML標(biāo)簽的CSS，即h1和h2，h3使用同一個(gè)CSS*/h1,h2,h3 {color:red;}/*1.2派生選擇器：依據(jù)元素的上下文來定義CSS，即只有l(wèi)i下的strong 元素才會(huì)使用此CSS*/li strong {font-style: italic;font-weight: normal;}/*2.1 id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式,使用#來定義id選擇器**/#red {color:red;}/*2.2 多個(gè)id選擇器使用一個(gè)CSS定義，注意中間用逗號*/#aid,#bid{color:green;}/*2.3 id 選擇器用于建立派生選擇器，以下選擇器需要外層元素id為cid，內(nèi)層元素是p才符合；一個(gè)id為“cid”的<p>元素是不符合條件的**/#cid p{color:yellow;}/*3.1 類選擇器 使用.來定義**/.divcss{padding:20px;color:yellow;}/*3.2 多個(gè)類選擇器的定義,不起作用**/.aclass,.bclass{color:red;}/*3.3 類選擇器用于建立派生選擇器，注意：用于css為redColorCss的元素且子元素為p的元素，而不是用于<p>且其class為redColorCss的**/.redColorCss p{color:red;}div .greenColorCss {color:green;}/***總結(jié)：1 三種選擇器：html標(biāo)簽選擇器 id選擇器(#) 類選擇器（.）2 使用逗號可以定義多個(gè)html標(biāo)簽選擇器與id選擇器(#),但不能定義多個(gè)類選擇器3 派生選擇器：一般用三種選擇器 與HTML標(biāo)簽選擇器組合，注意是上下級的關(guān)系，而不是且的關(guān)系*/</style></head><body>1.選擇器<br><h1>h1的內(nèi)容 </h1><h2>h2的內(nèi)容 </h2><h3>h3的內(nèi)容 </h3>2.派生選擇器<br><p><strong>我是粗體字，不是斜體字，因?yàn)槲也辉诹斜懋?dāng)中，所以這個(gè)規(guī)則對我不起作用</strong></p><ol><li><strong>我是斜體字。這是因?yàn)?strong 元素位于 li 元素內(nèi)。</strong></li><li>我是正常的字體。</li></ol>3.id選擇器<br><span id="red">我的id是red，使用id選擇器</span><span id="aid">AAAA</span><span id="bid">bbbb</span>4.id 選擇器用于建立派生選擇器<br><span id="cid">我只符合id選擇器，所以是黑色</span><p id="cid">我很特殊，請注意</p><span id="cid"><p>我符合id選擇器建立的派生選擇器，所以是黃色</p></span>5.類選擇器<br><span class="divcss">我應(yīng)用了類選擇器</span><br><span id="aclass">多個(gè)類選擇器一塊定義，不起作用</span><br><span id="bclass">多個(gè)類選擇器一塊定義，不起作用</span><br><span id="aclass">使用多個(gè)類選擇器 <span id="bclass">使用多個(gè)類選擇器</span></span><br>6.類選擇器用于建立派生選擇器<br><p class="redColorCss">我不應(yīng)該是紅色的</p><span class="redColorCss">我不應(yīng)該是紅色的</span><span class="redColorCss"><p>我應(yīng)該是紅色的</p></span>6.1 類選擇器用于建立派生選擇器<br><div class="greenColorCss">我不應(yīng)該是綠色的</div><div><span class="greenColorCss">我應(yīng)該是綠色的</span></div><div><h5 class="greenColorCss">我應(yīng)該是綠色的</h5></div> </body>
</html>
?
總結(jié)
