选择器优先级

间接性踌躇满志，持续性混吃等死

于 2019-11-12 00:24:41 发布

阅读量180

点赞数

本文链接：https://blog.csdn.net/weixin_45846312/article/details/103020988

版权

优先级

通用选择器
作用：匹配到页面中所有的元素
语法：*{样式1；样式2；}
优点：一个样式整个页面都可以被改变
缺点：效率低，尽可能的少用

*{
width:300px;
height:300px;
}

2.标签选择器
作用：定义页面的某一个标签的默认样式
语法：标签名{样式1；样式2}

p{
font-size: 20p;
color: red;
}

3.类选择器
作用：由CSS定义好，可以被任意标记的Class属性值进行引用的选择器
语法： 1.在标签中添加 class属性并且给他一个名字
2.在style中用.类名{}方式进行样式编写
注意：类名：不能以数字开头，除了 _ , - 以外的特殊符号都不能使用

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   .div{
    width: 300px;
    height: 300px;
    border: 1px solid red;
   }
  </style>
 </head>
 <body>
  <div class="div">
   
  </div>
  
 </body>
</html>

4.ID选择器
作用：针对指定id值得元素去定义样式
语法： 1.在元素中定义id属性
2.在style中用#id名进行样式编写
注意： id是唯一的
一定要对应页面某个元素的id值
class里面可以同时存在多个类名但是id不能存在多个id名

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #div{
    width: 300px;
    height: 300px;
    border: 1px solid red;
   }
  </style>
 </head>
 <body>
  <div id="div">
   
  </div>
  
 </body>
</html>

优先级 ID > 类 > 标签 > *

后代选择器和子代选择器的优先级

子代选择器：>号

.father>div{
        border: 2px solid blue; 
                                           }`

后代选择器：空格

 .father div{
        border: 2px solid pink;
    }

两者优先级比较：若两个选择器同时存在

按代码先后顺序分为两种情况

第一种：

 .father div{
        border: 2px solid pink; 
        margin: 20px 20px;
    }
    .father>div{
        border: 2px solid blue; 
        margin: 20px 20px;
    }

在这里插入图片描述
第二种：

 .father>div{
        border: 2px solid blue; 
        margin: 20px 20px;
    }
    .father div{
        border: 2px solid pink; 
        margin: 20px 20px;
    }