Python Html5和CSS3的新增功能：CSS权重与CSS

作者: IIronMan | 来源:发表于2019-03-13 16:00 被阅读8次

08_dayCSS动画
Python Html5和CSS3的新增功能：CSS权重与CSS
2018.10.25css3动画特效
面试题总结
初识HTML5
03-HTML5&CSS3
认识html5
关于H5(1)
css3新增选择器
CSS3动画

一、CSS权重概念

CSS权重概念：指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

二、权重的等级

2.1、权重的等级划分
- 1、!important，加在样式属性值后，权重值为 10000
- 2、内联样式，如：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

最后提示：权重的和越大，样式的优先级越高！

三、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”