Python Html5和CSS3的新增功能：CSS權(quán)重與CSS3新增選擇器

一、CSS權(quán)重概念

CSS權(quán)重概念：指的是樣式的優(yōu)先級(jí)，有兩條或多條樣式作用于一個(gè)元素，權(quán)重高的那條樣式對(duì)元素起作用,權(quán)重相同的，后寫的樣式會(huì)覆蓋前面寫的樣式。

二、權(quán)重的等級(jí)

  • 2.1、權(quán)重的等級(jí)劃分

    • 1、!important，加在樣式屬性值后，權(quán)重值為 10000
    • 2、內(nèi)聯(lián)樣式，如：style=""，權(quán)重值為1000
    • 3、ID選擇器，如：#content，權(quán)重值為100
    • 4、類，偽類和屬性選擇器，如： content、:hover 權(quán)重值為10
    • 5、標(biāo)簽選擇器和偽元素選擇器，如：div、p、:before 權(quán)重值為1
    • 6、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權(quán)重值為0

  • 2.2、權(quán)重的計(jì)算實(shí)例一

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3權(quán)重</title>
    <style type="text/css">
        div{
          color:red !important;
        }
     </style>
</head>
<body>
     <div style="color:blue">這是一個(gè)div元素</div>
</body>
</html>

    兩條樣式同時(shí)作用一個(gè)div，上面的樣式權(quán)重值為10000+1，下面的行間樣式的權(quán)重值為1000，所以文字的最終顏色為red

  • 2.3、權(quán)重的計(jì)算實(shí)例二

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3權(quán)重計(jì)算2</title>
    <style type="text/css">
        #content div.main_content h2{
            color:red;
        }
        #content .main_content h2{
            color:blue;
        }
     </style>
</head>
<body>
  <div id="content">
    <div class="main_content">
       <h2>這是一個(gè)h2標(biāo)題</h2>
    </div>
  </div>
</body>
</html>

    第一條樣式的權(quán)重計(jì)算： 100+1+10+1，結(jié)果為112；
    第二條樣式的權(quán)重計(jì)算： 100+10+1，結(jié)果為111；
    h2 標(biāo)題的最終顏色為red

    最后提示：權(quán)重的和越大，樣式的優(yōu)先級(jí)越高！

三、CSS3新增選擇器

  • 3.1、E:nth-child(n)：匹配元素類型為E(標(biāo)簽的名字，如：div,p,span等等)且是父元素的第n個(gè)子元素，如下的例子


    E:nth-child(n)
    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS3新增選擇器</title>
   <style type="text/css">
       .list{
          width: 200px;
          height: 200px;
          background-color: green;
        }
      .list div{
          width: 100px;
          height: 30px;
          background-color: brown;
          margin: 10px;
       }
      .list div:nth-child(2){
          background-color: yellow;
      }
   </style>
</head>
<body>
   <div class="list">
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
</body>
</html>

    提示：.list div:nth-child(2) 其中的 2 代表 list 里面的第2個(gè)div

  • 3.2、E:first-child：匹配元素類型為E且是父元素的第一個(gè)子元素

  • 3.3、E:last-child：匹配元素類型為E且是父元素的最后一個(gè)子元素

  • 3.4、E > F E元素下面第一層子集


    E > F E元素下面第一層子集
    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS新增選擇器2</title>
   <style type="text/css">
       .list{
          width: 200px;
          height: 230px;
          background-color: green;
       }
       .list div{
          width: 100px;
          height: 30px;
          background-color: brown;
          margin: 10px;
       }
       .list div>h1{
          width: 50px;
          height: 20px;
          background-color: yellow;
          font-size: 12px;
       }
   </style>
</head>
<body> 
   <div class="list">
       <div>
          <h1>第1個(gè)h1</h1>
       </div>
       <div>
          <h1>第2個(gè)h1</h1>
       </div>
       <div>4</div>
       <div>5</div>
       <h1>第3個(gè)h1</h1>
    </div>
</body>
</html>

  • 3.5、E + F 緊挨著的后面的兄弟元素

    `E + F` 緊挨著的后面的兄弟元素

    <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>CSS新增選擇器3</title>
   <style type="text/css">
      .list{
         width: 200px;
         height: 330px;
         background-color: green;
      }
      .list div{
         width: 100px;
         height: 30px;
         background-color: brown;
         margin: 10px;
      }
      .list h1{
         width: 80px;
         height: 20px;
         font-size: 10px;
         background-color: brown;
         margin: 10px;
       }
       /* E + F 緊挨著的后面的兄弟元素 */
       .list div+h1{
          background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="list">
       <div>1</div>
       <h1>第1個(gè)h1</h1>
       <h1>第2個(gè)h1</h1>
       <div>2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>
    </div>
</body>
</html>
    • 3.6、E ~ F E元素后面的兄弟元素
      `E ~ F` E元素后面的兄弟元素

四、屬性選擇器

  • 4.1、E[attr] 含有attr屬性的元素或者 E[attr='ok'] 含有attr屬性的元素且它的值為“ok”,如下

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器1</title>
    <style type="text/css">
       div{
          color: brown;
       }
       div[data-attr='ok']{
          color:red;
       }
     </style>
</head>
<body>
    <div data-attr="ok">這是1個(gè)div元素</div>
    <div>這是2個(gè)div元素</div>
</body>
</html>

  • 4.2、E[attr^='ok'] 含有attr屬性的元素且它的值的開頭含有“ok”

    `E[attr^='ok']` 含有attr屬性的元素且它的值的開頭含有“ok”

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器2</title>
    <style type="text/css">
       div{
           color: brown;
       }
       div[data-attr^='ok']{
           color:red;
       }
    </style>
</head>
<body>
    <div data-attr="ok123">這是1個(gè)div元素</div>
     <div>這是2個(gè)div元素</div>
</body>
</html>

  • 4.3、E[attr$='ok'] 含有attr屬性的元素且它的值的結(jié)尾含有“ok”

    E[attr$='ok'] 含有attr屬性的元素且它的值的結(jié)尾含有“ok”

  • 4.4、E[attr*='ok'] 含有attr屬性的元素且它的值中含有“ok”


    E[attr*='ok'] 含有attr屬性的元素且它的值中含有“ok”

推薦一篇博客 CSS3 E:nth-child、E>F、E~F、E+F以及屬性選擇器

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容