折叠性是指当多个CSS属性应用到同一个元素上时,它们如何相互作用以确定最终的样式。当不同的规则决定同一个属性的值时,折叠性规定了哪个规则的值会被应用。
折叠性的规则如下:
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- p {
- color: red;
- }
-
- p {
- color: blue;
- }
- </style>
- </head>
- <body>
- <p>This is a paragraph.</p>
- </body>
- </html>
-
-
在这个示例中,两个p选择器都定义了不同的颜色属性,一个是红色,一个是蓝色。根据折叠性规则,后面的规则会覆盖前面的规则。因此,最终应用到段落的颜色将是蓝色。
继承性是指某些CSS属性的值能够被其子元素继承。当一个元素的某个属性没有显式地定义时,它将从父元素继承该属性的值。
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- .parent {
- font-size: 20px;
- }
- </style>
- </head>
- <body>
- <div class="parent">
- <p>This is a paragraph with inherited font size.</p>
- </div>
- </body>
- </html>
-
-
在上面的示例中,父元素的字体大小设置为20像素,子元素的字体大小将继承为20像素。
CSS中的优先级是用于确定哪个规则将应用到特定元素的机制。它基于不同选择器和声明之间的特定性和重要性。
选择器 | 选择器权重 |
---|---|
继承或者* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式 | 1,0,0,0 |
!important | 无穷大 |
下面是CSS中优先级的一般规则:
- <p style="color: blue;">This is a paragraph with inline style.</p>
-
- <style>
- #myElement {
- color: red;
- }
- </style>
-
- <p id="myElement">This is a paragraph with ID selector.</p>
-
- <style>
- .myClass {
- color: green;
- }
-
- [type="text"] {
- font-weight: bold;
- }
- </style>
-
- <p class="myClass">This is a paragraph with class selector.</p>
- <input type="text" value="Example" />
-
- <style>
- p {
- font-size: 18px;
- }
-
- a:hover {
- color: orange;
- }
- </style>
-
- <p>This is a paragraph with element selector.</p>
- <a href="#" class="myLink">Link</a>
-
- <style>
- * {
- margin: 0;
- padding: 0;
- }
-
- p::first-line {
- text-transform: uppercase;
- }
- </style>
-
- <p>This is a paragraph with universal selector.</p>
-
注意: