CSS选择器

今天总结一下有关CSS选择器的相关笔记

基础选择器

1: 全局选择器 * {} （通配符）

* {
    
    选择的是包含body在内以及body的所有子元素
} 

2: 标签选择器

标签名  {
    属性名:属性值;
    选择的是标签名符合所写的元素
}

  例如：div {
        
              }

3:id选择器

选择的是id名字为XXX的元素  此元素具有唯一性
#id名 {

}

4:类选择器

class=" "   （不要以数字开头"）

.类名 {
    一类元素  
}

例如：   <div class="a  b  c  d  e"></div>

选择器进阶

1：父子关系

（1）子代选择器
例如： （ div> a）（ ul>li ）
适用于结构简单 元素类型不复杂的时候

**选择的就是直接后继形式: **
E > F  {
    匹配的是E元素的直接子代F 
}
.father > .son {
    
}
.a > .son {
    
}

<div class="father">
    <div class="son"></div>
     <span></span>
</div>

<div class="a">
   <div class="son"></div>
</div>

（2）后代选择器
适用于结构复杂
例如：（div>a>img ） （ul>li>a>img ）

      选择的是后代元素  后继元素
      E F {
      
    匹配的是E元素的所有后代元素F
    
    }

2：兄弟关系
（1）相邻选择器 ( 毗邻选择器)

E + F {
            匹配的是E元素紧紧相邻的那个F元素
            }

（2）兄弟选择器

  E ~ F {
    匹配的是E元素的所有名字为F的兄弟元素
}

其他关系选择器

交集选择器

 EF {  }  匹配的既是E类型又是F类型
div.h {
    
}
p.h {
    
}
<div class="h"><div>  选中
<p class="h"></p>

并集选择器

E,F,H,I {
    
}
.a,.b,.c,.d {
    backgound-color:red;
}

关于选择器优先级讨论

?建议: 父盒子不要用id选择器选择 以防后续覆盖样式实现不了
行内> id >class>TagName >*
优先级相同时 代码越靠后的越会覆盖之前的样式

伪类链接选择器

链接伪类选择器

​ :link 链接没有访问之前

​ :visited 链接呗访问过后

​ :hover 鼠标划入

​ :active鼠标点击 激活