zoukankan      html  css  js  c++  java

  • 认识CSS中css的三大特性：层叠性、继承性以及优先级

    前端之HTML、CSS（四）

    　　CSS

    　　CSS三大特性

    　　层叠性：多种样式的叠加，一个属性通过两个选择器设置在同一个元素上，后一个样式会把前一个样式层叠（覆盖）。层叠性的两种情况：第一种样式冲突时，后样式覆盖前样式；第二种样式不冲突时，前后样式互补共同作用同一元素。（冲突：样式属性一样）

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>层叠性-测试</title>
 6     <style type="text/css">
 7         p {
 8             color: red;
 9             font-size: 20px;
10         }
11         p {
12             color: blue;
13         }
14     </style>
15 </head>
16 <body>
17     <p>层叠性</p>
18 </body>
19 </html>
    View Code

    　　继承性：HTML“晚辈”标签会继承“长辈”标签的某些样式属性。

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>继承性-测试</title>
 6     <style type="text/css">
 7         div {
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>
14         <p>继<span>承</span>性</p>
15         <p><a href="#">继承性</a></p>
16     </div>
17 </body>
18 </html>
    View Code

    　　注意：不是所有属性都可以继承，一般以text-、font-、line-开头的属性以及color属性可以继承，某些标签也同样不会继承属性。

    　　优先级：CSS三种写入方式：行内样式，内部样式表、外部样式表的优先级关系：行内样式>内部样式表>外部样式表，即一个HTML文档中同时存在三种CSS样式写入，首选行内样式表加载。CSS选择器的三种基本类型：ID选择器、类选择器、标签选择器的优先级关系：ID选择器>类选择器>标签选择器，即三种选择器为同一元素标签设置同一种样式属性，首选ID选择器设置的样式属性。设定ID选择器权值为100，类选择器（伪类选择器）权值为10，标签选择器权值为1，复合选择器中使用的基本选择器组合之间使用加法获取总的权值，权值越高，样式属性选择越优先。如.nav p { }权值为10 + 1 = 11。此外，通配符选择器* { }和继承权值为0，权值相同按照层叠性加载，

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>优先级-测试</title>
 6     <style type="text/css">
 7         #pid {
 8             color: blue;  /*ID选择器权值为100*/
 9         }
10         .priority {
11             color: green;  /*类选择器权值为10*/
12         }
13         p {
14             color: red;  /*标签选择器权值为1*/
15         }
16     </style>
17 </head>
18 <body>
19     <p class="priority", id="pid">优先级</p>
20 </body>
21 </html>
    View Code
     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>优先级-测试</title>
 6     <style type="text/css">
 7         .complement p { 
 8             color: green;  /*权值为10 + 1 = 11*/
 9         }
10         div p {
11             color: red;  /*权值为1 + 1 = 2*/
12         }
13     </style>
14 </head>
15 <body>
16     <div class="complement">
17         <p>复合选择器权值测试</p>
18     </div>
19 </body>
20 </html>
    View Code

    　　注意：可以在样式属性的属性值后追加！important为某一类型选择器增加权值，增加值为+∞，即追加！impotant的选择器一定优先加载。

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>优先级-测试</title>
 6     <style type="text/css">
 7         #pid {
 8             color: blue;  /*ID选择器权值为100*/
 9         }
10         .priority {
11             color: green;  /*类选择器权值为10*/
12         }
13         p {
14             color: red!important;  /*标签选择器权值为1*/
15         }
16     </style>
17 </head>
18 <body>
19     <p class="priority", id="pid">优先级</p>
20 </body>
21 </html>
    View Code

    　　注意：继承权值为0

     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>优先级-测试</title>
 6     <style type="text/css">
 7         .complement { 
 8             color: green;  /*权值为10*/
 9         }
10         p {
11             color: red;  /*权值为1*/
12         }
13     </style>
14 </head>
15 <body>
16     <div class="complement">
17         <!-- 父标签权值为10，子标签权值为1，然而继承权值为0，故字体颜色为红色 -->
18         <p>复合选择器权值测试</p>
19     </div>
20 </body>
21 </html>
    View Code

    　　权重练习测试

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="关键词1,关键词2,关键词3" />
        <meta name="description" content="对网站的描述" />
        <title>第1题</title>
        <style type="text/css">
            #father #son{  
                color:blue;
            }
            #father p.c2{
                color:black;
            }
            div.c1 p.c2{
                color:red;
            }
            #father{
                color:green !important;  /* 继承的权重为0 */
            }
        </style>
    </head>
    <body>
        <div id="father" class="c1">
            <p id="son" class="c2">
                试问这行字体是什么颜色的？
            </p>
        </div>
    </body>
</html>

<!-- 答案：blue -->


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="关键词1,关键词2,关键词3" />
        <meta name="description" content="对网站的描述" />
        <title>第2题</title>
        <style type="text/css">
            #father{
                color:red;/* 继承的权重为0 */
            }
            p{
                color:blue;  
            }
        </style>
    </head>
    <body>
        <div id="father">
            <p>试问这行字体是什么颜色的？</p>
        </div>
    </body>
</html>

<!-- 答案：blue -->


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="关键词1,关键词2,关键词3" />
        <meta name="description" content="对网站的描述" />
        <title>第3题</title>
        <style type="text/css">
            div p{   
                color:red;
            }
            #father{
                color:red;
            }
            p.c2{    
                color:blue;
            }
        </style>
    </head>
    <body>
        <div id="father" class="c1">
            <p class="c2">
                试问这行字体是什么颜色的？
            </p>
        </div>
    </body>
</html>

<!-- 答案：blue -->


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="关键词1,关键词2,关键词3" />
        <meta name="description" content="对网站的描述" />
        <title>第4题</title>
        <style type="text/css">
            div div{ 
                color:blue;
            }
            div{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <div>
                    试问这行字体是什么颜色的？
                </div>
            </div>
        </div>
    </body>
</html>

<!-- 答案：blue -->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>第5题</title>
    <style type="text/css">
        div div div div div div div div div div div div{  
            color:red;
        }
        .me{ 
            color:blue;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div class="me">试问这行文字是什么颜色的</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<!-- 答案：blue -->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>第6题</title>
    <style type="text/css">
        .c1 .c2 div{  
            color: blue;
        }
        div #box3{
            color:green;
        }
        #box1 div{
            color:yellow;
        }
    </style>
</head>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                文字
            </div>
        </div>
    </div>
</body>
</html>

<!-- 答案：yellow -->
  • 相关阅读:
    linux虚拟机系统的复制或克隆后续问题解决！
    Linux命令大全
    Linux 介绍快速浏览
    Linux软件管理和安装
    Kali linux 2016.2（Rolling）安装之后的常用配置
    使用ttXactAdmin、ttSQLCmdCacheInfo、ttSQLCmdQueryPlan获取SQL相关具体信息[TimesTen运维]
    MongoDB--Getting Started with Java Driver
    OpenCV 通过 MFC 的 Picture Control 控件操作图像
    HTML学习笔记之中的一个（input文件选择框的封装）
    hdu 5282 Senior&#39;s String 两次dp
  • 原文地址：https://www.cnblogs.com/snow-lanuage/p/10393944.html
Copyright © 2011-2022 走看看