CSS-基础-选择器

一、选择器
1、兄弟选择器：
 a、相邻兄弟选择器 CSS2（只能选中紧跟其后的那个标签, 不能选中被隔开 的标签）
   格式:
   

<style>
   .div1+div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

  b、通⽤兄弟选择器 CSS3（选中的是指定选择器后⾯某个选择器选中的所有标签, ⽆论有没有被隔开都可以选中）
     格式：
   

  <style>
     .div1~div{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
     </style>

2、伪类选择器
  a、序选择器（结构伪类选择器）
       

 <style>
        /* 序选择器 */
        /* 选中第一个 */
        div:first-child{
            属性：值;
        }
        /* 选中最后一个 */
        div:last-child{
            属性：值;
        }
        /* 选中某一个 */
        div:nth-child(5){
            属性：值;
        }
        /* 选中奇数个 */
        div:nth-child(odd){
            属性：值;
        }
        /* 选中偶数个 */
        div:nth-child(even){
            属性：值;
        }
        /* 选中自定义 */
        div:nth-child(xn+y){
            属性：值;
        }
    </style>

  b、动态伪类选择器（a标签的伪类选择器可以单独出现也可以⼀起出现，一起出现必须按照顺序）
     

<style>
        /* 从未选中过的状态 */
        a:link{
        }
        /* 被访问过的状态 */
        a:visited{
        }
        /* 长安或点击的状态 */
        a:hover{
        }
        /* 鼠标移入或悬浮 */
        a:active{
        }
    </style>

  c、否定伪类（可以从已选中的元素中剔除出某些元素）
     

<style>  
      div:not(.div7){
            width: 100px;
            height: 100px;
            background-color: brown;
        }
    </style>

3、伪元素选择器
   

<style>
        /* 在......之后 */
        p::after{
            /* 内容 */
        content:'我是后加的内容';
        }
        /* 在......之前 */
        p::before{
            /* 内容 */
            content: '我是前面加入的内容';
        }
        /* 给首个文字设置样式 */
        p::first-letter{
            属性：值;
        }
        /* 给第一行设置样式 */
        p::first-line{
            属性：值;
        }
    </style>

二、CSS三大特性
1、继承性（只有以color/font-/text-/line-开头的属性才可以继承；在CSS的继承中不仅仅是⼉⼦可以继承, 只要是后代都可以继承 ；a标签的⽂字颜⾊和下划线是不能继承的, 当做⼦元素；h标签的⽂字⼤⼩是不能继承的，在做⼦元素）
   

 <style>
        .div1{
            /* 文字颜色 */
            color:red;
            /* 文字大小 */
            font-style: 25px;
            /* 文本居中 */
            text-align: center;
            /* 行高 */
            line-height: 40px;
        }
    </style>

2、层叠性：
    层叠性只有在多个选择器选中"同⼀个标签", 然后⼜设置了"相同的属 性", 才会发⽣层叠性
3、优先级（id>类>标签>通配符>继承>浏览器默认）
    只有选择器是直接选中标签的才需要计算权重, 否则⼀定会听直接 选中的选择器的