CSS復(fù)雜選擇器-創(chuàng)新互聯(lián)

           CSS 復(fù) 雜 選 擇 器

10年積累的網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站策劃后付款的網(wǎng)站建設(shè)流程，更有和政免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

對(duì)CSS復(fù)雜選擇器做一個(gè)簡(jiǎn)單的總結(jié)：


1-2 相鄰兄弟選擇器、通用兄弟選擇器
 <style>
    p+b{
     font-size:30pt;
     color:green;
   }
   div.s1+p{
      color:red;
   }
   div.s1~p{
     background-color:gray;
   }
 </style>      

 <body>
   <!--1.相鄰兄弟選擇器-->
   <p>This is <b>Very</b> important.</p>
   <b>Really?</b>
   <b>More?</b>
   <!--2.通用兄弟選擇器-->
   <a>這是一個(gè)標(biāo)簽</a>
   <div>指定元素</div>
   <p>段落一</p>
   <p>段落二</p>
 </body>

圖示1：
CSS復(fù)雜選擇器

3.  <!--3.屬性選擇器
[id]:附帶id屬性的元素,p[id]:附帶id屬性的p元素，
p[class^="b"] class屬性值以"b"開(kāi)頭的所有<p>元素，
 -->

<h2 title="h2元素" id="h2">h2 text</h2>
   <p id="p1">段落一</p>
   <p id="summary">段落二</p>

圖示2：


CSS復(fù)雜選擇器

4. 偽類選擇器

<!--4.1目標(biāo)偽類：:target 突出顯示活動(dòng)的HTML錨，用于選取當(dāng)前活動(dòng)的   目標(biāo)元素 語(yǔ)法：E:target-->
   <p><a href="#news1">跳轉(zhuǎn)之內(nèi)容1</a></p>
   <p><a href="#news2">跳轉(zhuǎn)之內(nèi)容2</a></p>
   <br/>
   <br/>
   <br/>
   <a name="news1">內(nèi)容1...</a>
   <div id="news2">內(nèi)容2...</div>

圖示3：


CSS復(fù)雜選擇器

<!--4.2結(jié)構(gòu)偽類
          :first-child 匹配屬于其父元素的首個(gè)子元素
        :last-child 匹配屬于其父元素的最后一個(gè)子元素
        :empty 匹配沒(méi)有子元素的每個(gè)元素-->
<div>
  <p>段落1111</p>
  <p></p>
  <p>段落2222</p>
  <p>段落3333</p>
</div>

 <style>
    p:first-child{color:Blue;}
   p:last-child{color:red;}
   p:empty{border:2px solid green;height:20px;}
   div:only-child{border:1px solid black;}
 </style>

圖示4：


CSS復(fù)雜選擇器
<!--4.3否定偽類
  :not(selector),匹配非指定元素、選擇器的每個(gè)元素
-->
   <input type="text"/><br/>
   <input type="button" value="普通按鈕"/></br>
   <input type="submit" value="提交">

<style>


 input:not([type="text"]){
     font-size:15px;
     font-weight:bold;
     color:red;
   }

</style>

5. 偽元素選擇器

：first-letter 選擇器用于選取指定選擇器的首字母

   <h2>h2文本</h2>
   <p>段落文本111</p>
   <p>段落文本222</p>

 <style>
    p:first-letter{
     font-size:20pt;
     color:#8A2BE2;
     font-weight:bold;
   }
 </style>

圖示：


CSS復(fù)雜選擇器

::selection （略，實(shí)際使用較少

）選擇器匹配被用戶選取的部分

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)名稱：CSS復(fù)雜選擇器-創(chuàng)新互聯(lián)
本文路徑：http://bm7419.com/article6/dgohog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、面包屑導(dǎo)航、ChatGPT、商城網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

微信小程序開(kāi)發(fā)