选择器优先级别_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:21:46957검색
单纯的CSS文件
当我们创建一个CSS文档时，经常遇到样式定义冲突的情况，这时遵从以下规则。
-
当一个HTML元素被定义多重CSS样式时，只有最后一个是可见的。如：
p {color: red}p {color: blue}/* 效果为蓝色 */ 当CSS样式定义在DOM元素的父级节点时，所有的自己元素都会继承该样式。
-
同一元素存在不同的选择方式时，根据权重进行计算：
- ID属性=100
- class属性=10
- HTML标签=1
使用 ！important 标记，可以把选择器优先级提高到最前。
<body><p id="target" class="target">Hello World</p></body><style> p#target {color: black !important} p#target {color: red} p.target {color: blue} p {color: tomato} /* Black color is applied */</style> 在HTML文件中使用CSS
有多种方法可以把CSS文件导入到HTML中，通常在HTML中出现位置的顺序为：
- 在部分通过导入外部样式
- 在部分直接写入
- 在CSS部分通过 @import 导入外部样式
- 直接定义在HTML标签中的style属性
然而，优先级的顺序确是：
- 直接定义在HTML标签中的style属性
- 在部分直接写入的
- 在CSS部分通过 @import 导入的外部样式
- 在部分通过导入的外部样式
在以下代码片段中四种导入CSS的方法都使用了，最终呈现出的效果，是级别最高的p标签中的style定义。除非，有 !important 在其他定义方式中出现。
<!DOCTYPE html><html> <head> /* Link in head */ <link rel="stylesheet" href="css/style.css"/> /* Style tag in head */ <style> p {color: tomato} </style> /* @import in CSS area */ <style> @import url("css/style.css"); </style> </head> <body> /* Style attribute in HTML element */ <p style="color: red">Hello World</p> </body></html> 성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.