继承 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>CSS的继承性</title>
6 <style>
7 .father {
8 color:red;
9 }
10 </style>
11 </head>
12 <body>
13 <!--继承：给父级设置属性,子级继承父级的一些属性 比如 color font-* text-* line-*
14 像一些盒子元素，定位元素(浮动,绝对定位,固定定位)不能继承-->
15 <div class="father" id="李靖">
16 <p>哪吒</p>
17 </div>
18 </body>
19 </html>
权重比较 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 /*id=100>class=10>标签=1* 按顺序比较,先比较id,再比较类,最后比较标签,只要前面的大,后面就不比较了/
8 /*2个id1个标签:201*/
9 #box1 #box2 p {
10 color:red;
11 }
12 /*1个id 1个类 1个标签:111*/
13 #box2 .wrap3 p {
14 color:green;
15 }
16 /*1个id 3个标签:103*/
17 div div #box3 p {
18 color:yellow;
19 }
20 /*3个类 4个标签:34*/
21 div.wrap1 div.wrap2 div.wrap3 p {
22 color: blue;
23 }
24 </style>
25 </head>
26 <body>
27
28 <div id="box1" class="wrap1">
29 <div id="box2" class="wrap2">
30 <div id="box3" class="wrap3">
31 <p>什么颜色</p>
32 </div>
33 </div>
34 </div>
35 </body>
36 </html>
层叠 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>层叠性</title>
6 <style>
7 #box {
8 color:red;
9 }
10 .container {
11 color:yellow;
12 }
13 /*!important 设置权重无限大,不影响继承来的属性,只影响选中的属性*/
14 p {
15 color:teal!important;
16 }
17
18 ul {
19 color:red;
20 }
21
22 .list {
23 color:yellow!important;
24 }
25 </style>
26 </head>
27 <body>
28 <!--层叠性:权重大的标签样式覆盖掉了权重小的标签样式,当权重相同时,以后设置的为准,但是继承来的属性权重为0.如果都是继承来的属性,就看
29 谁描述的近就显示谁的样式,都一样近,就看权重大小.
30 权重:谁的权重大,浏览器就会显示谁的属性
31 -->
32 <p id="box" class="container">
33 什么颜色
34 </p>
35
36 <div class="list">
37 <ul>
38 <li>
39 li标签
40 </li>
41 </ul>
42 </div>
43 </body>
44 </html>
原文地址：https://www.cnblogs.com/Nopeeee/p/10028360.html
时间： 2024-08-30 02:40:31