CSS组合选择器

组合选择器

1、后代选择器

#1、作用：找到指定标签的所有后代（儿子，孙子，重孙子、、、）标签，设置属性

#2、格式：
    标签名1 xxx {
        属性：值;
    }

#3、注意：
1、后代选择器必须用空格隔开
2、后代不仅仅是儿子，也包括孙子、重孙子
3、后代选择器不仅仅可以使用标签名称，还可以使用其他选择器比如id或class
4、后代选择器可以通过空格一直延续下去

  示例

2、子元素选择器

#1、作用：找到制定标签的所有特定的直接子元素，然后设置属性

#2、格式：
    标签名1>标签名2 {
        属性：值;
    }

先找到名称叫做"标签名称1"的标签，然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

#3、注意：
1、子元素选择器之间需要用>符号链接，并且不能有空格
    比如div >p会找div标签的所有后代标签，标签名为">p"
2、子元素选择器只会查找儿子，不会查找其他嵌套的标签
3、子元素选择器不仅可以用标签名称，还可以使用其他选择器,比如id或class
4、子元素选择器可以通过>符号一直延续下去

  示例

3、毗邻选择器，CSS2推出（又称相邻兄弟选择器）

#1、作用：选定紧跟其后的那个标签

#2、格式
选择器1+选择器2 {
    属性：值;
}

#3、注意点：
1、毗邻选择器必须通过+号链接
2、毗邻选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签

4、弟弟选择器，CSS3推出（又称通用兄弟选择器）

#1、作用：给指定选择器后面的所有选择器中的所有标签设置属性

#2、格式：
选择器1~选择器2 {
    属性：值;
}

#3、注意点：
1、通用兄弟选择器必须用~来链接
2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签
无论有没有被隔开，都可以被选中

  示例

三 交集选择器与并集选择器

1、交集选择器（不常用）

#1、作用：给所有选择器选中的标签中，相交的那部分标签设置属性

#2、格式：
    选择器1选择器2 {
        属性：值;
    }

#3、注意：
1、选择器与选择器之间没有任何链接符号
2、选择器可以使用标签名称、id、class
3、交集选择器在企业开发中并不多见，了解即可
   因为：p.part1 完全可以用.part1取代

  示例

2、并集选择器

#1、作用：给所有满足条件的标签设置属性

#2、格式：
    选择器1,选择器2 {
        属性：值;
    }

#3、注意：
1、选择器与选择器之间必须用逗号来链接
2、选择器可以使用标签名称、id、class

  示例

四 序列选择器

#1、作用：
css3中新推出的选择器中，最具代表性的的9个，又称为序列选择器，过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个

#2、格式
#2.1 同级别
:first-child    p:first-child    同级别的第一个
:last-child    p:last-child    同级别的最后一个
:nth-child(n)                    同级别的第n个
:nth-last-child(n)            同级别的倒数第n个

#2.2 同级别同类型
:first-of-type                    同级别同类型的第一个
:last-of-type                    同级别同类型的最后一个
:nth-of-type(n)                    同级别同类型的第n个
:nth-last-of-type(n)            同级别同类型的倒数第n个

#2.3 其他
:only-of-type                    同类型的唯一一个
:only-child                         同级别的唯一一个

  示例：同级别

  示例:同级同类型

  示例：其他

五 属性选择器

#1、作用：根据指定的属性名称找到对应的标签，然后设置属性
       该选择器，最常用于input标签
 
#2、格式与具体用法：
    [属性名]
    其他选择器[属性名]
    [属性名=值]
    [属性名^=值]
    [属性名$=值]
    [属性名*=值]


    例1：找到所有包含id属性的标签
        [id]
    
    例2：找到所有包含id属性的p标签
        p[id]
    
    例3：找到所有class属性值为part1的p标签
        p[class="part1"]
    
    例4：找到所有href属性值以https开头的a标签
        a[href^="https"]
        
    例5：找到所有src属性值以png结果的img标签
        img[src$="png"]
        
    例6：找到所有class属性值中包含part2的标签
        [class*="part"]

  示例

六 伪类选择器

#1、作用：常用的几种伪类选择器。

#1.1 没有访问的超链接a标签样式：
a:link {
  color: blue;
}

#1.2 访问过的超链接a标签样式：
a:visited {
  color: gray;
}

#1.3 鼠标悬浮在元素上应用样式：
a:hover {
  background-color: #eee; 
}

#1.4 鼠标点击瞬间的样式：
a:active {
  color: green;
}

#1.5 input输入框获取焦点时样式：
input:focus {
  outline: none;
  background-color: #eee;
}

#2 注意：
a标签的伪类选择器可以单独出现，也可以一起出现
a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效
    link，visited，hover，active
hover是所有其他标签都可以使用的
focus只给input标签使用

  示例

七 伪元素选择器

#1、常用的伪元素。
#1.1 first-letter：杂志类文章首字母样式调整
例如：
p:first-letter {
  font-size: 48px;
}

#1.2 before
用于在元素的内容前面插入新内容。
例如：

p:before {
  content: "*";
  color: red;
}
在所有p标签的内容前面加上一个红色的*。

#1.3 after
用于在元素的内容后面插入新内容。
例如：

p:after {
  content: "?";
  color: red;
}
在所有p标签的内容后面加上一个蓝色的?。

  示例

八 CSS三大特性

1、继承性

#1、定义：给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性

#2、注意：
    1、只有以color、font-、text-、line-开头的属性才可以继承
    2、a标签的文字颜色和下划线是不能继承别人的
    3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大
    
    ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
#3、应用场景：
    通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式

  示例

2、层叠性

#1、定义：CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果

#2、注意：
1、层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，
才会发生层叠性
ps：通过谷歌浏览器可以查看到，一些属性被划掉了

  示例

3、优先级

#1、定义：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定

#2、优先级
    整体优先级从高到底：行内样式>嵌入样式>外部样式

    行内样式并不推荐使用，所以我们以嵌入为例来介绍优先级

(1)大前提：直接选中 > 间接选中(即继承而来的)

  View Code

(2)如果都是间接选中，那么谁离目标标签比较近，就听谁的

  示例

(3)如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的

  示例

(4)如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠:

    id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）

  示例

(5)优先级之!important

#1、作用：还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!import的代码是无法维护的。
  
#2、注意：
    1、!important只能用于直接选中，不能用于间接选中
    2、!important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升
    3、!important必须写在属性值分号的前面

  示例

(6)优先级之权重计算

#1、强调
如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级

#2、计算方式
#1、id数多的优先级高
#2、id数相同，则判定类数多的优先级高
#3、id数、class数均相同，则判定标签数多的优先级高
#4、若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高

  示例

总结： 

我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：

除此之外还可以通过添加 !import方式来强制让样式生效，但并不推荐使用。因为如果过多的使用!import会使样式文件混乱不易维护。

原创作者：马一特

文章出处：http://www.cnblogs.com/mayite/

转载于:https://www.cnblogs.com/lqywong/p/11377927.html