CSS选择器（基本选择器、关系选择器、属性选择器、伪类选择器、伪元素选择器、选择器权重及优先级）总结

CSS选择器

一、通配符选择器 *

​ 作用：选中页面中所有的元素,如下案例是给页面中的具有margin和padding的元素去除默认的内外边距。

*{
   
    padding: 0;
    marginn: 0;
}

二、基本选择器

1、id选择器

​ 作用：通过id属性的值选择元素

<style>
    #pid{
     color:#ff0000;}
</style>

<p id="pid">
    段落内容
</p>

2、类选择器 .

​ 作用：通过元素的class属性值选中元素。

<style>
    .box{
     color:#ff0000;}
    .fontSize{
     font-size: 2em;}
    .bgc{
     background-color: #ccc;}
</style>

<div class="box">
    盒子内容
</div>
<!-- 一个元素的class属性值可以为多个 -->
<div class="fontSize bgc">
    盒子内容
</div>

3、标签（类型）选择器 标签名称

​ 作用：通过标签的名称，选中页面中所有同类型的元素

<style>
    /* 以下标签选择器会选中3个span元素 */
    span{
     background-color: #ccc;}
</style>	

<span>span1</span>
<span>span2</span>
<span>span3</span>

三、关系选择器

1、并集选择器 ，

​ 作用：并集选择器可以选择多组标签, 同时为他们定义相同的样式

<style>
    /* 并集选择器使用逗号分隔多个选择器，以下会同时选中h2和p元素 */
    h2,p{
     color: #ff0000}
</style>

<h2>周树人先生</h2>
<p>
   周树人老先生说：“我家门前有两棵树，一棵是枣树，另外一棵还是枣树” 
</p>

2、交集选择器

​ 作用：同时满足多个选择器筛选条件的才能被选中

<style>
    /* 匹配class属性值是p1的p元素；以下第一个p元素会被选中 */
    p.p1{
     color:#ccc;}
</style>

<p class="p1">paragraph1</p>
<p>paragraph2</p>

3、后代（派生）选择器 空格符

​ 作用：选中祖先元素中匹配的所有后代元素，子、孙元素都会被选中

<style>
    /* box1、box2、inner-box都会被选中 */
    .container div{
     
        background-color: #ccc;
        color: #ff0000;
    }
</style>

<div class="container">
    <div class="box1">box1
        <div class="inner-box">inner-box</div>
    </div>
    <div class="box2">box2</div>
</div>

4、子代选择器 >

​ 作用：选中父元素中匹配的直接子元素

<style>
    /*container中的box1和box2会被选中 */
    .container>div{
     border: solid 1px #ccc;}
</style>

<div class="container">
    <div class="box1">box1
        <div class="inner-box">inner-box</div>
    </div>
    <div class="box2">box2</div>