CSS中的选择器

Posted by xiongmao; tagged with css , css常用选择器 , css关系选择器 , css属性选择器 , css伪类选择器 , css伪元素 , css选择器的权重 , a元素的伪类

目录:

常用选择器

1.元素选择器
 作用:根据标签名来选中指定的元素
  语法: 标签名{}
  例子:p{} h1{} div{}
2.id选择器:
  作用:根据元素的id属性选中一个元素
  语法: #id属性值{}
  例子:#box{}
3.类选择:
  作用:根据元素的class属性值选中一组元素
  语法: .class属性值{}
  例子:.box{}
4.通配选择器
 作用:选中页面中的所有元素
  语法: *{}

关系选择器

1.子元素选择器
 作用:选中指定父元素的指定子元素
 语法:父元素 > 子元素

<div><p></p></div>

div > p{  
}

2.后代选择器
 作用:选中指定元素内指定的后代元素
 语法:祖先 后代
html:

 <p>
        <span>我是p元素中的span元素</span><br>
        <em>我是p元素的第一个em</em><br>
        <em>我是p元素的第二个em</em><br>
        <em>我是p元素的第三个em</em><br>
        <em>我是p元素的第四个em</em><br>
    </p>

css:

 div span{
            color: blue;
        }

3.选择下一个兄弟选择器
 语法:前一个 + 下一个

  span + em {
           color: orangered;
       }

4.选择下边所有兄弟
语法:前一个 ~ 所有

span ~ em{
  color:pink
}

属性选择器

[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值得元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名^=属性值] 选择属性值含有谋值的元素

伪类选择器

伪类:不存在的类,特殊的类
  -伪类用来描述一个元素的特殊状态
    比如:第一个元素,最后一个元素,鼠标移入的元素...
  -伪类一盘情况下都是使用 开头的
  :first-child 第一个元素
  :last-child 最后一个元素
  :nth-child() 选中第n个元素
    特殊值:
     n 第n个 n的范围0到正无穷
     2n 表示选中偶数位的元素
     2n+1 表示选中奇数位的元素

    -以上这些伪类都是根据所有的子元素进行排列

  first-of-type
  last-of-type
  nth-of-type
    -这几个伪类的功能和上述类似,不同的是他们是在同类元素中进行排列
   :not() 否定伪类
    -将符合条件的元素从元素器中去除
代码演示:

  <ul>
        <span>我是span元素</span>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>

css代码

  /*ul > li:first-child{
            color: blue;
        }
        ul > li:last-child{
            color: red;
        }
        ul > li:nth-child(2){
            color: seagreen;
        }*/
        /*ul > li:first-of-type{
            color: teal;
        }*/
        ul > li:not(:nth-of-type(3)){
            color: tomato;
        }

选择器的权重

选择器的权重

内联样式        1,0,0,0
id选择器        0,1,0,0
类和伪类选择器   0,0,1,0
元素选择器      0,0,0,1
通配选择器      0,0,0,0
 继承的样式      没有优先级

比较优先级时,需要将所有的选择器得优先级相加计算,最后优先级越高,则越优先显示(分组选择器单独计算)
选择器的累加不会超过其最大的数量级,类选择器在高也不会超过id选择器(同类型不会无限叠加)

可以在某一个样式的1后边添加 !important ,则此时该样式会获取到最高的优先级,甚至超过内联样式
注意:一般在开发的时候不会使用

样式的继承

样式继承,我们为一个元素设置的样式同时也会应用到他的后代
  -继承是发生在祖先后后代之间的

继承的设计是为了我们开发
  -利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上,
  -这样只需设置一次即可让所有的元素都具有该样式
  -注意:并不是所有的样式都会被继承
  -比如说:背景相关的,布局相关的这些样式都不会被继承

a元素的伪类

css

 <style>
        a{
            text-decoration: none;
        }
        /*
            :link 用来表示没访问过的链接(正常的链接)
        */
        a:link{
            color: red;
        }
        /*
            :visited    用来表示访问过的链接
            由于隐私,所以viosited这个伪类只能修改链接的颜色
        */
        a:visited{
            color: orange;
        }
        /*其他的(不限制于a元素)
        :hover 用来表示鼠标移入的状态
        */
        a:hover{
            color: blue;
        }
        /*
            :active 用来表示鼠标点击
        */
        a:active{
            color: chartreuse;
        }
    </style>

html

    <a href="http://baidu.com/">访问的链接</a>
    <br><br>
    <a href="https://blog.32yunbk.cn/">没有访问过的链接</a>