【CSS选择器】入门易懂2

复合选择器

1、交集选择器（共同的部分）

2、并集选择器（共同的所有）

/* 复合选择器有两种：
    1、交集选择器
       作用：选中同时满足多个条件的元素
       语法：选择器1选择器2选择器3····{}
       注意：如果选择器中有元素选择器，那么元素选择器必须放在第一位
    2、并集选择器
       作用：同时选中满足条件的元素
       语法：选择器1,选择器2,选择器3····{}
*/

---

 关系选择器

1、子元素选择器

2、后代选择器

3、选择下一个兄弟选择器

4、选择下面1所有的兄弟

 补充：元素之间的关系

1、父子关系
         父元素：直接包含子元素的元素
         子元素：直接被父元素包含的元素

2、祖先后代关系
         祖先元素：直接或间接包含的元素，包含父元素
         后代元素：直接或间接被包含的元素，包含子元素

3、兄弟关系
         拥有共同父元素的元素

/* 1、子元素选择器
       作用：选中指定的父元素下面指定的子元素
       语法：父元素>子元素{}

   2、后代选择器
       作用：选中指定祖先元素下面指定的后代元素
       语法：祖先元素 后代元素{}

   3、选择下一个兄弟(仅挨着我的)选择器
       作用：选择下一个兄弟
       语法：兄+弟{}

   4、选择下面所有的兄弟(前面的不选)
       语法：兄～弟{}
*/      

---

 属性选择器

1、[属性名]{} 选择含有指定属性的元素

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

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

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

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

---

伪类选择器 

/* 一 、伪类（不存在的类，特殊的类）
        -伪类用来描述一个元素的特殊状态
        -比如：第一个元素，被点击的元素，鼠标移入的元素···
        -特点：一般请情况下，使用：开头
          1、 :first-child  第一个子元素
          2、 :last-child   最后一个子元素
          3、 :nth-child()  选中第n个子元素
                   特殊值：n        所有的
                          2n或even  选中偶数
                          2n+1或odd 选中奇数
          —以上这些伪类都是根据所有的子元素进行排序
             1、:first-of-type  第一个子元素
             2、:last-of-type   最后一个子元素
             3、:nth-of-type()  选中第n个子元素
                  功能跟上面相似，
              不同的是，这是在同类型的子元素中去选择
                          
   二、:not() 否定伪类   除了本身其他全部
         -将符合条件的元素从选择器中去除  
*/

 补充：a元素的伪类

/* 伪类  只是表示一种特殊的状态
    :link,:visited  是超链接独有的，一般用的不是很多，了解即可
    :hover,:active  是所有的标签都有，用的比较多，必须掌握
*/

/*  1、:link 用来表示未访问过的链接（正常链接） */
/*  2、:visited 用来表示访问过的链接由于隐私的原因，所以visited只能改颜色 */
/*  3、:hover 用来表示鼠标移入的状态 */
/*  4、:active 鼠标点击后的状态 ,松开鼠标，点击的状态就会结束*/

伪元素选择器

/* 伪元素，表示页面中一些特殊的并不真实存在的元素（元素的位置）
    1、 ::first-letter  表示第一个字母
    2、 ::first-line  表示第一行
    3、 ::selection  选中的内容
    4、 ::before  元素的开始位置
    5、 ::after   元素的结束位置
         （before和after必须要结合content使用）
          例如：p::before{
                   content: "今天是个好日子";
                }
*/

继承

共同的祖先元素，一般会设置字体的大小，颜色，行高，字体，最小宽度

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

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

2、优势：方便我们开发，讲一些通用的样式统一设置到共同的祖先元素上，

                 子元素的样式都可以获取到样式；

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

4、补充：span 的背景色是透明的，例如你给p设置了背景色，给p设置，透出来，就是这个                   色了背景图片等，也都不会被继承。

选择器的权重 （重点）

1、!important                          最高优先级（慎用 ，一般是用来检测是否是选择器权重问题）

2、内联样式                                                               1000  

3、id选择器                                                                 100

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

5、元素选择器                                                               1

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

7、继承的样式                                                       没有优先级

注意：

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

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

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

4、选择器的累加，不会超过上一级数量级。

            （例如：类选择器再高也不会超过id选择器  量变达不到质变）

一般来说：选择器越具体，优先级越高。