前端學習 -- Css -- 屬性選取器

來源:互聯網
上載者:User

標籤:htm   images   set   char   round   gre   文法   自己   ges   

屬性選取器:根據元素的屬性選擇指定元素

文法:[屬性名稱] 選取含有指定屬性的元素

  1. [屬性名稱="屬性值"]:選取屬性值等於指定值的元素
  2. [屬性名稱^="屬性值"]:選取屬性值以指定內容開頭的元素
  3. [屬性名稱$="屬性值"]:選取屬性值以指定內容結尾的元素
  4. [屬性名稱*="屬性值"]:選取屬性值中包含指定內容的元素

demo:(註:這麼尷尬的詩句肯定不是我寫的)

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title></title>        <style type="text/css">            /*[屬性名稱="屬性值"]:選取屬性值等於指定值的元素*/            h2[title="abcde"]{                color: red;            }            /*[屬性名稱^="屬性值"]:選取屬性值以指定內容開頭的元素*/            h3[title^="o"]{                color: green;            }            /*[屬性名稱$="屬性值"]:選取屬性值以指定內容結尾的元素*/            h4[title$="c"]{                color: blue;            }            /*[屬性名稱*="屬性值"]:選取屬性值中包含指定內容的元素*/            h1[title*="df"]{                color: blue;            }        </style>    </head>    <body>        <!--            [email protected]            時間:2017-03-18            描述:title是當滑鼠移上去,懸浮在上面的內容        -->       <h1 title="dfc">致女兒書</h1>       <h2 title="abcde">煲湯比寫詩重要 </h2>        <h3 title="opq">自己的手藝比男人重要 </h3>       <h4 title="cde">胸和腰和屁股比臉蛋重要 </h4>       <h5>內心強大到混蛋 </h5>       <h6>比什麼都重要 </h6>       <br />       <br />        <h1 title="cde">致女兒書</h1>       <h2 title="opq">煲湯比寫詩重要 </h2>        <h2 title="abcde">自己的手藝比男人重要 </h2>       <h4 title="abc">胸和腰和屁股比臉蛋重要 </h4>       <h5>內心強大到混蛋 </h5>       <h6>比什麼都重要 </h6>       <br />       <br />       <h1 title="cde">致女兒書</h1>       <h1 title="dfdf">致女兒書</h1>    </body></html>

前端學習 -- Css -- 屬性選取器

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.