css中的选择器

选择器，顾名思义就是要选择到添加样式的元素，然后再在后面加上声明块。这就是css的语法规范

一.css的基本选择器

1.1 通配选择器

---

作用：可以选中所有的 HTML 元素。

语法：

* {   属性名: 属性值; }

1.2 元素选择器 

---

作用：为页面中 某种元素 统一设置样式。

标签名{   属性名: 属性值; }

1.3 类选择器 

---

作用：根据元素的 class 值，来选中某些元素。

.类名{   属性名: 属性值; }

1.4 ID选择器 

---

作用：根据元素的 id 属性值，来精准的选中某个元素。

#id名{   属性名: 属性值; }

二 .css复合选择器

2.1 交集选择器

---

作用：选中同时符合多个条件的元素

语法：选择器1选择器2选择器3...选择器n {}

/* 选中：类名为beauty的p元素 */
p.beauty {
    color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
    color: green;
}

注意：

        1. 有标签名，标签名必须写在前面。

        2. id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没 有意义。

        3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元 素。

        4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

2.2 并集选择器 

---

作用：选中多个选择器对应的元素，又称：分组选择器。

语法：选择器1, 选择器2, 选择器3, ... 选择器n {}

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
    font-size: 40px;
    background-color: skyblue;
    width: 200px;
}

 2.3 后代选择器

---

作用：选中指定元素中，符合要求的后代元素。

语法：选择器1 选择器2  选择器3 ...... 选择器n {} （先写祖先，再写后代）

/* 选中ul中的所有li */
ul li {
    color: red;  
}

/* 选中ul中所有li中的a */
ul li a {
    color: orange;
}

/* 选中类名为subject元素中的所有li */
.subject li {
    color: blue;
}

/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
    color: blue;
}

2.4 子代选择器 

---

作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

语法：选择器1 > 选择器2 > 选择器3 > ...... 选择器n {}

/* div中的子代a元素 */
div>a {
    color: red;
}

/* 类名为persons的元素中的子代a元素 */
.persons>a{
    color: red;
}

 2.5 兄弟选择器

---

        相邻兄弟选择器：

                作用：选中指定元素后，符合条件的相邻兄弟元素。

                语法： 选择器1+选择器2 {} 。

/* 选中div后相邻的兄弟p元素 */
div+p {
    color:red;
}

        通用兄弟选择器：  

                作用：选中指定元素后，符合条件的所有兄弟元素。

                语法： 选择器1~选择器2 {} 。

/* 选中div后的所有的兄弟p元素 */
div~p {
    color:red;
}

2.6 属性选择器

---

作用：选中属性值符合一定要求的元素。

语法：

        1. [属性名] 选中具有某个属性的元素。

        2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。

        3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。

        4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。

        5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

/* 选中具有title属性的元素 */
div[title]{color:red;}

/* 选中title属性值为address的元素 */
div[title="address"]{color:red;}

/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}

/* 选中title属性值以u结尾的元素 */

div[title$="s"]{color:red;}

/* 选中title属性值包含g的元素 */

div[title*="d"]{color:red;}

2.7 伪类选择器 

---

伪类就是 像类( class )，但不是类，是元素的一种特殊状态

作用：选中特殊状态的元素。

a、动态伪类：

        1. :link 超链接未被访问的状态。

        2. :visited 超链接访问过的状态。

        3. :hover 鼠标悬停在元素上的状态。

        4. :active 元素激活的状态。

        5. :focus 获取焦点的元素。

b、结构伪类

  常用的：

        1. :first-child 所有兄弟元素中的第一个。

        2. :last-child 所有兄弟元素中的最后一个。

        3. :nth-child(n) 所有兄弟元素中的第 n 个。

        4. :first-of-type 所有同类型兄弟元素中的第一个。

        5. :last-of-type 所有同类型兄弟元素中的最后一个。

        6. :nth-of-type(n) 所有同类型兄弟元素中的 第n个 。

关于 n 的值：

        1. 0 或 不写 ：什么都选不中 —— 几乎不用。

        2. n ：选中所有子元素 —— 几乎不用。

        3. 1~正无穷的整数 ：选中对应序号的子元素。

        4. 2n 或 even ：选中序号为偶数的子元素。

        5. 2n+1 或 odd ：选中序号为奇数的子元素。

        6. -n+3 ：选中的是前 3 个。

不常用：

        1. :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。

        2. :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。

        3. :only-child 选择没有兄弟的元素（独生子女）。

        4. :only-of-type 选择没有同类型兄弟的元素。

        5. :root 根元素。

        6. :empty 内容为空元素（空格也算内容）。

c、否定伪类：

        :not(选择器) 排除满足括号中条件的元素。

d、UI伪类：

        1. :checked 被选中的复选框或单选按钮。

        2. :enable 可用的表单元素（没有 disabled 属性）。

        3. :disabled 不可用的表单元素（有 disabled 属性）。

e、目标伪类（了解）

        :target 选中锚点指向的元素。

f、语言伪类（了解）

        :lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。

2.8 伪元素选择器

---

作用：选中元素中的一些特殊位置。

常用伪元素：

::first-letter 选中元素中的第一个文字。

::first-line 选中元素中的第一行文字。

::selection 选中被鼠标选中的内容。

::placeholder 选中输入框的提示文字。

::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。

::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

三.选择器的权重

---

        行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。

并且鼠标悬浮到相应的选择器，会有对应(a,b,c)的权重

a : ID 选择器的个数。

b : 类、伪类、属性 选择器的个数。

c : 元素、伪元素 选择器的个数。

比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，

        (1,0,0) > (0,2,2)

        (1,1,0) > (1,0,3)

        (1,1,3) > (1,1,2)

特殊规则：

1. 行内样式权重大于所有选择器。

2. !important 的权重，大于行内样式，大于所有选择器，权重最高！