search

goldEli / Front-End-Training

Front End Training
2 stars 5 forks source link

CSS 选择器权重及其优先级 #9

Open goldEli opened 4 years ago

goldEli commented 4 years ago

说说 CSS 选择器权重及其优先级是什么

并解释下面代码中 p 标签为什么是绿色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .font-color{
     color: purple; 
    }
  </style>
</head>
<body>
 <p class="font-color" style="color: green;">我是什么颜色</p> 
</body>
</html>
748580573 commented 4 years ago

是绿色。

css样式是有优先级的。其中

  1. 行内样式的优先级最高

    我是什么颜色

  2. 内联样式的优先级第二

  3. 外联样式的优先级最低。 注。可以通过设置!import属性改变css样式的优先级

修改

css样式是有优先级的。其中

  1. 行内样式的优先级最高为1000
<p id="name" class="font-color" style="color: green;">我是什么颜色</p>

  1. id id选择的的优先级为100

  2. .class class选择器的优先级为10
  3. 标签选择其为1
<style>
//权重为100
#name{
    color:red
}
#权重为10
.font-color{
    color:black
}
#权重为1
p{
    color:blue
}
</style>
lurasso commented 4 years ago

CSS权重是样式的依据，同一个内容被多个样式修饰，那么浏览器最终显示出来的结果由具体权重权重越高的会覆盖权重略低的样式，其权重从大到小分别是：!important、行间样式（style=“”）、Id选择器（#）、class选择器（.）、标签类选择器（div）、通配符（*）。 p标签中有行间样式，且其权重是最大的，因此不会被class选择器修改

FireDragonZL commented 4 years ago

CSS的选择器共有四种：标签选择器；类选择器；id选择器以及组选择器。

其中三个的优先级顺序为：id选择器>标签选择器>类选择器

goldEli commented 4 years ago
  • [x] 绿色

CSS样式的引入方式有三种：标签style属性中的内联样式；style标签中的内部样式以及通过外部文件引入的外部样式。

三者的优先级顺序为：内联样式>内部样式>外部样式

CSS的选择器共有四种：标签选择器；类选择器；id选择器以及组选择器。

其中三个的优先级顺序为：id选择器>标签选择器>类选择器

类选择器的权重比标签权重大

  1. 内联样式选择器，比如style="color:red",权重值为 1000。
  2. ID选择器，比如#root, 权重值 100。
  3. 类、伪类和属性选择器，比如.content、:hover、[attribute]，权重值 10。
  4. 元素选择器，比如 p、div，权重值 1。

代码中 p 标签显示绿色，因为.font-color的权重值为 100, style="color: green;的权重值为 1000，后者大于前者，所以最后显示绿色。