Css选择器2

属性选择器

语法：      [属性名]{} 选择含有指定属性的元素

                 [属性名=属性值]{} 选择含有指定属性和属性值的元素

                 [属性名^=属性值]{} 选择属性值以指定值开头的元素  

                 [属性名$=属性值]{} 选择属性值以指定值结尾的元素

                 [属性名*=属性值]{} 选择属性值含有某值的元素

伪类选择器

一.伪类（不存在的类，特殊的类）

不是指特定的某个元素，而是指某个状态，例如第一个，最后一个，鼠标移入，鼠标点击等等

在所有的元素中进行排序

:first-child 第一个元素

:last-child 最后一个元素

:nth-child（n） 选中第几个

n 所有的元素

2n/even 选中偶数元素

2n+1/odd 选中奇数元素

在同类型的元素中进行排序

:first-of-type 第一个元素

:last-of-type 最后一个元素

:nth-of-type（）选中第几个

   n  所有的元素

   2n/even   选中偶数元素

   2n+1/odd  选中奇数元素

二.:not（）否定伪类

将符合条件的元素从选择器中去除 */

li:not(.l1) {
        color: red;
      }

元素的伪类

:hover 用来表示鼠标移入的状态

:active 鼠标点击后的状态

了解：

:link，:visited 是超链接a标签独有的两种状态，由于隐私问题，这两种状态只能被设置字体颜色

a:link{} 表示没有被访问过的链接

a:visited{}表示访问过的链接

a 标签的4种状态，在设置时有没有先后顺序？

:link :hover :active :visited

伪元素选择器

伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 选中的内容

::before 元素的开始位置

::after 元素的结束位置

before和after必须要结合content使用

继承

样式的继承（继承祖先的资产）

            定义：为一个元素设置的样式，同时也会应用到它的后代元素上

            优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，子元素的样式都可以获取到样式

            注意：并不是所有的样式都会被继承，比如：背景相关的，布局相关等不会被继承

继承性

    可继承： font-size font-family color line-height ;

    不可继承 ：border padding margin width height ;

选择器的权重

样式冲突 通过不同的选择器选中同一个元素，进行一样的样式设定

         发生样式冲突时，应用哪一个样式由选择器的权重（优先级）决定

         

  面试题：你平时都用哪些选择器，这些选择器的优先级能不能说一说

    行内样式，标签选择器，id选择器，class选择器，关系选择器，属性选择器，通配选择器

      选择器权重

          内联样式            1000

          id选择器            100

          属性选择器/类选择器   10

          标签选择器           1

          通配选择器           0

          继承样式            没有

 

       注意：

         1、如果选择器的权重一样，那么谁靠下就用谁

         2、如果选择器是交集选择器，那么需要将选择器的权重相加，最后谁重听谁的  

         3、如果选择器是并集选择器，则分别计算选择器的权重，谁高听谁的

         4、选择器的权重再累加，也不会超过它的上一级选择器的权重

         5、通过 ！important ，将选择器的权重提至最高

              一般情况下，！important 要慎用  

                      可以用来检测bug，检测是否是权重问题

                      用来更改各种css框架的样式

 

            给一个元素设置样式，怎么设置都没有反应

                选择器权重问题

                没有选中当前元素

选择器的权重      

           内联样式                                1000  

           id选择器                                100

           类和伪类选择器/属性选择器                   10

           元素选择器                                1

           通配符、子选择器、相邻选择器等。如*、>、+     0000

           继承的样式      没有优先级

           !important    最高优先级

        注意：

            比较优先级时，需要将所有选择器的优先级进行相加计算，最后优先级越高，则优先显示

            (并集选择器)分组选择器是单独计算的

            如果优先级计算后相同，此时则优先使用靠下的样式

            选择器的累加，不会超过上一级数量级，例如：类选择器再高也不会超过id选择器  量变达不到质变

         

            一般来说：

            选择器越具体，优先级越高