Python Html5和CSS3的新增功能：CSS權重與CSS3新增選擇器

一、CSS權重概念

CSS權重概念：指的是樣式的優(yōu)先級套蒂，有兩條或多條樣式作用于一個元素，權重高的那條樣式對元素起作用,權重相同的茫蛹，后寫的樣式會覆蓋前面寫的樣式操刀。

二、權重的等級

2.1婴洼、權重的等級劃分
- 1骨坑、!important，加在樣式屬性值后，權重值為 10000
- 2欢唾、內(nèi)聯(lián)樣式且警，如：style=""，權重值為1000
- 3礁遣、ID選擇器斑芜，如：#content，權重值為100
- 4祟霍、類杏头，偽類和屬性選擇器，如： content沸呐、:hover 權重值為10
- 5醇王、標簽選擇器和偽元素選擇器，如：div崭添、p寓娩、:before 權重值為1
- 6、通用選擇器（*）滥朱、子選擇器（>）根暑、相鄰選擇器（+）、同胞選擇器（~）徙邻、權重值為0

2.2排嫌、權重的計算實例一

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

兩條樣式同時作用一個div，上面的樣式權重值為10000+1缰犁，下面的行間樣式的權重值為1000淳地，所以文字的最終顏色為red

2.3、權重的計算實例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3權重計算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>這是一個h2標題</h2>
    </div>
  </div>
</body>
</html>

第一條樣式的權重計算： 100+1+10+1帅容，結果為112颇象；
第二條樣式的權重計算： 100+10+1，結果為111并徘；
h2 標題的最終顏色為red

最后提示：權重的和越大遣钳，樣式的優(yōu)先級越高！

三麦乞、CSS3新增選擇器

3.1蕴茴、E:nth-child(n)：匹配元素類型為E(標簽的名字，如：div,p,span等等)且是父元素的第n個子元素姐直，如下的例子

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個div

3.2倦淀、E:first-child：匹配元素類型為E且是父元素的第一個子元素
3.3、E:last-child：匹配元素類型為E且是父元素的最后一個子元素

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個h1</h1>
       </div>
       <div>
          <h1>第2個h1</h1>
       </div>
       <div>4</div>
       <div>5</div>
       <h1>第3個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個h1</h1>
       <h1>第2個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個div元素</div>
    <div>這是2個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個div元素</div>
     <div>這是2個div元素</div>
</body>
</html>

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

E[attr$='ok'] 含有attr屬性的元素且它的值的結尾含有“ok”
4.4初斑、E[attr*='ok'] 含有attr屬性的元素且它的值中含有“ok”

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