码迷,mamicode.com
首页 > Web开发 > 详细

css/选择器

时间:2020-04-03 00:59:34      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:col   red   eve   ora   family   ping   strong   color   before   

1、标签选择器

  <div>文本</div>

  选择器 : div { color: red }

2、类选择器

  <div  class="text">文本</div>

  选择器 : .text { color: red }

3、ID选择器

  <div  id="text">文本</div>

  选择器 : #text { color: red }

4、后代选择器

  <div>第一层

    <p  class="second">第二层

      <span  id="third‘>第三层</span>

    </p>

  </div>

  选择器 : div  .second { color: green }

  选择器 : div   #third {  color: blue }

5、子代选择器

  <div>第一层

    <p  class="second">第二层

      <span  id="third‘>第三层</span>

    </p>

  </div>

  选择器 : div  >  .second { color: green }

  选择器 : div  >  .second  >   #third {  color: blue }

6、兄弟相邻选择器

  写法:A+B{} 表示选择A标签后面相邻的兄弟标签B

  <div>文本1</div>

  <div>文本1</div>  // 有边框

  <div>文本1</div>  // 有边框

  选择器 : div + div { border: 1px  solid  red }

7、兄弟选择器

  写法: A~B{ }  表示选择器A标签后面 的兄弟标签B,A标签与B标签可以不相邻

  <div  class="box1">文本1</div>

  <div  class="box2">文本1</div> 

  <div  class="box3">文本1</div>  // 有边框

  选择器 : .box1 ~ .box3 { border: 1px  solid  red }

8、属性选择器  

  通过标签的属性 来选择标签

  属性选择器本身 与 类选择器权重相同

  (1)[属性名称]

    <div  class="box">文本1</div>

     [class] {color: red}

     div[class] {color: red}

  (2)[属性名称=“属性值”]

    <div  class="box">文本1</div>

     [class="box"] {color: red}

     div[class="box"] {color: red}

8、伪类选择器  

  选择器上带:号的 特征大部分的就是伪类选择器,伪类选择器 是专门选择一些状态特征内容

  A:hover{ color:red }  表示鼠标移入到A标签上的时候 选择A标签设置样式为字体 颜色红色

  <div  class="box">文本1</div>

  div:hover{color: green}

9、css3选择器

  (1)first-child、last-child

      A:first-child表示选择标签里面 位置为第一的子标签A

      B:last-child表示选择标签里面 位置为最后一个子标签B

      <div>

        <span>111</span>

        <span>222</span>

        <span>333</span>

        <span>444</span>

      </div>

        div span:first-child{color: red}   //选择第一个标签

       div span:last-child{color: green}  //选择最后一个标签

  (2)nth-child( )

      选择奇数位置或偶数位置的标签;从1开始

      <div>

        <span>111</span>    

        <span>222</span>    

        <span>333</span>    

        <span>444</span>    

      </div>

      div span:nth-child(1){color: blue}  //选择第一个span标签

      div span:nth-child(3n+1){color: blue}  //选择第1、4、7...个span标签

      div span:nth-child(odd){color: red}   // 选择奇数的span标签

      div span:nth-child(even){color: green}  // 选择偶数的span标签

  (3)first-of-type、last-of-type

      A:first-of-type{ }  表示选择标签里面  类型为第一个的子标签A

       A:last-of-type{ }  表示选择标签里面  类型为子标签A的 最后一个标签

        <div>

        <span>111</span>    

        <p>222</p>   // 红色 

        <b>333</b>    

        <p>444</p>   // 绿色 

        </div>

       div p:first-of -type{color: red}

        div p:last-of -type{color: green}

  (4)nth-of-type( )

    <div>

      <span>111</span>    

      <p>222</p>    

      <b>333</b>    

      <p>444</p>   // 红色 

     </div>

     div  p:nth-of-type(2) {color: red}

  (5)not( )

    排除某一类的选择器

    <span>111</span> // 红色   

    <p>222</p>    

    <b>333</b>   // 红色 

    <p>444</p>

    not([p]){color: red}

10、伪元素
  <div  class="box">文本1</div>
  div:before{
    content: "前文本";
    color: red
  
}
  div:after{
    content: "后文本";
    color: red
  }
  伪元素使用hover
  div:hover:after{  // 鼠标移入div上,after标签文本边绿色
    content: "后文本";
    color: green
  }
选择器的权重比较:默认样式 < 标签名称选择器 < 类选择器 < id选择器 < style属性样式

 

css/选择器

标签:col   red   eve   ora   family   ping   strong   color   before   

原文地址:https://www.cnblogs.com/cuishuangshuang/p/12622600.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!