css 常用选择器

一、之前学过的选择器：

    div{}
    .box 类名选择器
    #box　id选择器
    div p 后代选择器
    div.box 交集选择器
    div,p,span 并集选择器
    div>p 子代选择器
    * : 通配符
    div+p: 选中div后面相邻的第一个p
    div~p: 选中的div后面所有的p

二、属性选择器：

    id选择器  #
    类名选择器：.
    属性选择器：[]

    E[attr]：选中带有arrt 属性的E元素
    E[attr="val"]:选中带有attr属性，且attr值为"val“的E元素
    ^ :开头  $:结束  *：包含
    E[attr^="val"]:选中带有attr属性，且attr值为以"val“开头的E元素
    E[attr$="val"]:选中带有attr属性，且attr值为以"val“结尾的E元素
    E[attr*="val"]:选中带有attr属性，且attr值为包含"val“的E元素

三、伪类选择器：

    <div class="box">
         <div></div>
         <div></div> 
         <div></div>
         <div></div>
    </div>

    选中 box 下面的div 第父盒子 中的第一个子元素
    .box div:first-child{
        background-color: red;
    }

    选中 box 下面的div 第父盒子 中的最后一个子元素
    .box div:last-child{
        background-color: red;
    }

    选中box下的第18个盒子
    :nth-child(n) n是也给整数 从1开始  1，2,3,4,5....
    如果n小于等于0 无效  n ：正整数+0
    .box div:nth-child(28){
        background-color: red;
    } 

    选中所有的box 下的div
    .box div:nth-child(n){
        background-color: pink;
    }

    2n 选中所有的偶数
    .box div:nth-child(2n){
        background-color: red;
    }

    2n-1 奇数
    .box div:nth-child(2n+1){
        background-color: red;
    }

    奇数：odd  偶数：even
    .box div:nth-child(odd){
        background-color: red;
    }

    .box div:nth-child(even){
        background-color: yellow;
     }

    选中7的倍数+1 
    .box div:nth-child(7n+1){
         background-color: red;
    }

    选中前5个
    .box div:nth-child(-n+5){
        background-color: red;
    }

    选中后5个
    nth-last-child 从最后面开始选
    .box div:nth-last-child(-n+5){
        background-color: red;
    }


四、伪类选择器empty

选中页面中内容为空的（不能有标签和文字） div

div:empty{ border:2px solid red; }

五、伪类选择器target

  :target  配合 锚点使用，当锚点的连接被点击时，就会激活id所对应元素，从而可以 该元素添加样式

六、伪元素before和after

    css2 没有 伪元素的概念，只有伪类
    E:before  E:after  是伪类

    css3: 伪元素
    E::before
    E::after

    必须有 content:"";

七、伪元素选择器first-letter，first-line，selection

   ::first-letter: 选中第一个字母
   ::first-line：  选中第一行
   ::selection:    用于给选中的区域 设置样式：通常设置 color 和 background-color

猜你喜欢