首页新闻找找看学习计划

自学前端时遇到优先级权重问题,没有明白,希望有大神通俗的帮我讲解下

0
[已解决问题] 解决于 2018-08-29 15:06

我在按照案例制作网页版心的时候,遇到了类选择器之间的权重问题,一直不懂,求大神为渣渣的小笨猪细细讲解一下,一下是代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>左右型结构版心</title>
 5     <style type="text/css">
 6         *{
 7             margin: 0;
 8             padding: 0;
 9         }
10         .top{
11             /*width: 900px;*/
12             height: 80px;
13             background-color: pink;
14             /*margin: 0 auto;*/
15         }
16         .top-inner{
17             width: 900px;
18             height: 80px;
19             background-color: #aba;
20             margin: 0 auto;
21         }
22 
23         .banner{
24             width: 900px;
25             height: 150px;
26             background-color: #ccc;
27             margin: 0 auto;
28         }
29         /*让有序排列浮起来,这样就排列在一行上了*/
30         .banner li{
31            float: left;
32            width: 215px;
33            height: 150px;
34            margin-right: 10px;
35         }
36         .one{
37             background-color: purple;
38         }
39         .two{
40             background-color: blue;
41         }
42         .three{
43             background-color: pink;
44         }
45         .banner .four{
46             background-color: green;
47             margin-right: 0px;
48             float: right;
49         }
50         .main{
51             width: 900px;
52             height: 500px;
53             background-color: #eee;
54             margin: 0 auto;
55         }
56         .left{
57             width: 290px;
58             height: 500px;
59             background-color: yellow;
60             float: left;
61             margin-right: 10px;
62         }
63         .right{
64             width: 590px;
65             height: 500px;
66             background-color: red;
67             float: right;
68             margin-left:10px;
69         }
70 
71         .footer{
72             width: 900px;
73             height: 100px;
74             background-color: pink;
75             margin: 0 auto;
76         }
77 
78     </style>
79 </head>
80 <body>
81     <div class="top">
82         <div class="top-inner">123</div>
83     </div>
84     <div class="banner">
85         <ul>
86             <li class="one">1</li>
87             <li class="two">2</li>
88             <li class="three">3</li>
89             <li class="four">4</li>
90         </ul> 
91     </div>
92     <div class="main">
93         <div class="left">left</div>
94         <div class="right">right</div>
95     </div>
96     <div class="footer">footer</div>
97 </body>
98 </html>
IT小小笨猪的主页 IT小小笨猪 | 初学一级 | 园豆:194
提问于:2018-08-28 14:46
< >
分享
最佳答案
0

.banner li 的權重是 011 才對喔

奖励园豆:5
RosonJ | 老鸟四级 |园豆:2645 | 2018-08-28 17:01

 不懂呀,我不知道你们是如何看出.banner li 的权重是011?求解我现在是想知道如何一眼就能看出他们的权重的方法

IT小小笨猪 | 园豆:194 (初学一级) | 2018-08-29 13:10

@IT小小笨猪: 

!important : 1 0 0 0

#id : 0 1 0 0

.class : 0 0 1 0

element : 0 0 0 1

上面的規則是固定的

計算數量相加就好

.banner(.class) + li(element) = 0 0 1 0 + 0 0 0 1 = 0 0 1 1

 

*另一個重點

相加不進位

0 0 10 0 != 0 1 0 0

 

*再來權重按順序比較

1 0 0 0 > 0 1 0 0 > 0 0 99 0

 

就只有以上幾個重點

RosonJ | 园豆:2645 (老鸟四级) | 2018-08-29 13:26

@RosonJ: 谢谢你,详细的解答,明白了。

IT小小笨猪 | 园豆:194 (初学一级) | 2018-08-29 15:05
其他回答(2)
0

权重  id > class > 标签 

河畔 | 园豆:723 (小虾三级) | 2018-08-28 15:18
0

可以看看这个链接:https://blog.csdn.net/coder_chang/article/details/72777943

心悠魂然 | 园豆:2087 (老鸟四级) | 2018-08-28 15:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册