css选择器优先级

 

css选择器主要有：

id选择器 #box
class类选择器 .box
伪元素选择器 p:nth-child(n) 选中父元素的第n个子元素p，假设该子元素不是p，则选择符无效。
关系选择器 div+p 选择紧贴在div之后p，div与p必须同属一个父级
属性选择器 img[alt]会命中第一个img 

<img src="图片url" alt="" />
<img src="图片url" />

伪元素  ::after,::before

<style>
    /* #p {
      background: #000;
    } */
    /* .p {
      background-color: gold;
    } */
    p:last-child {
      background-color: darkviolet;
    }
    div~p {
      background: #000;
    }
    
    p {
      background: cornflowerblue ;
    }
    
    
    
    
  </style>
</head>
<body>
  <div>1</div>
  <p>2</p>
  <p style="background-color: brown;">3</p>
  <p>4</p>
  <p>5</p>
  <p class="p" id="p">6</p>
</body>

总结优先级顺序：!important>内联样式>id选择器>伪类选择器>class类选择器=属性选择器>元素选择器>关系选择器> 通配符 > 继承 > 浏览器默认属性

 

posted @ 2020-03-29 13:56  yuliy  阅读(112)  评论(0)    收藏  举报