02-CSS basic and advanced -day4__2018-08-31-21-33-03

Priority
id selector> class selector> tag selector
attention to the special circumstances
* inline styles take precedence
* css defines a command! Important, the command is given maximum priority
* inheritance pattern weight is 0
* weight the same, css follow the principle of proximity , who is close to the style element has the greatest priority

Summarizes
a viewer whether to select the first selected element acting directly or through the influence of inheriting the elements
if it is not inherited (number selector class id number selector tag selector number) is calculated according to the weight 2, if three the number of selectors are the same in principle (in the last row of the highest priority.) is near
3 if you are inherited, near (structural level) who described heard who, when describing the structure of the hierarchy, as compared in turn select id number of number number class tag selector to select, if the number is the same three options, the principle of proximity (the nearest position)

 

07 inherited weight is 0.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
       ul.nav {
             font-size: 22px;
       }
       
       /*0 0 1*/
       li {
              font-size: 18px;
       }


       
      

       .demo1 div#demo2 {
              color: green;
       }

        div.demo1 #demo2 {
              color: red;
       }

       

       
    </style>
</head>
<body>
    <ul class="nav">
        <li>菜单1</li>
    </ul>
    <div>
        <div>
            <div class="demo1">
                <div class="demo2" id="demo2">
                    <div class="demo3">
                        <div class="demo4">
                            <div class="demo5">哈哈哈</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

 

转载于:https://www.cnblogs.com/HiJackykun/p/11047395.html

Guess you like

Origin blog.csdn.net/weixin_34321977/article/details/93407493