CSS – 选择器类型查询表

通配选择器

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

语法：

* {
  属性名：属性值;
}

举例：

 

* {
  color: orange;
  font-size: 40px;
}

 

 

元素选择器

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

语法：

元素类别 {
  属性名：属性值;
}

 

举例：

h1 {
  color: orange;
  font-size: 40px;
}

 

 

类选择器

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

语法：

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

举例：

 

 .class {
  color：red;
}

注意：

 

1.元素的class属性值不带.，但CSS的类选择器要带.。

2. class值，是我们自定义的，按照标准:不要使用纯数字、不要使用中文、尽量使用英文与数字的组合，若由多个单词组成，使用-做连接，例如:left-menu，且命名要有意义，做到“见名知意”。

3.一个元素不能写多个 class属性，下面是错误示例:

<!-- 该写法错误，元素的属性不能重复，后写的会失效 -->

<h1 class="speak" class="big">你好啊</h1>

 

4.一个元素的 class属性，能写多个值，要用空格隔开，例如:

<!-- 该写法正确，class属性，能写多个值 -->

<h1 class="speak big">你好啊</h1>

 

ID选择器

作用：

根据元素的 ID 属性值精准的选中某个元素

语法：

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

 

 

举例：

 #id {
  color：red;
}

 

注意：

id 属性值:尽量由字母、数字、下划线(_)、短杠(-)组成，最好以字母开头、不要包含空格、区分大
小写。

一个元素只能拥有一个id 属性，多个元素的id属性值不能相同。

一个元素可以同时拥有id和class属性。

 

 

交集选择器

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

交集有【并且】的含义（通俗理解：即……又……的意思）

 

语法：

选择器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。

 

并集选择器

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

所谓并集就是【或者】的含义

语法：

选择器1,选择器2,选择器3,...选择器n {}

 

举例：

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

 

注意：

1.并集选择器，我们一般竖着写。

2.任何形式的选择器，都可以作为并集选择器的一部分。

3.并集选择器，通常用于集体声明，可以缩小样式表体积。

 

后代选择器

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

语法：

先写祖先，再写后代
选择器1 选择器2 选择器3 ... 选择器n {}

选择器之间，用空格隔开，空格可以理解为:" xxx 中的"，其实就是后代的意思。
选择器1234....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;
}

 

注意：

1.后代选择器，最终选择的是后代，不选中祖先。

2.儿子、孙子、重孙子，都算是后代。

3.结构一定要符合之前讲的HTML嵌套要求，例如:不能p中写h1~h6。

子代选择器

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

子代选择器又称：子元素选择器、子选择器

语法：

选择器1 > 选择器2 > 选择器3 > ... 选择器n {}

选择器之间，用>隔开，>可以理解为:" xxx 的子代"，其实就是儿子的意思。
选择器1234....n，可以是我们之前学的任何一种选择器。

举例：

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

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

 

注意：

1.子代选择器，最终选择的是子代，不是父级。

2.子、孙子、重孙子、重重孙子……统称后代!，子就是指儿子。

兄弟选择器

相邻兄弟选择器

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

所谓相邻，就是紧挨着他的下一个，简记:睡在我下铺的兄弟。

语法：

选择器1+选择器2 {}

 

举例：

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

 

通用兄弟选择器

作用：

选中指定元素后，符合条件的所有兄弟元素。(简记:睡在我下铺的所有兄弟)

语法：

选择器1~选择器2 {}

 

举例：

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

注意：两种兄弟选择器，选择的是下面的兄弟。

 

属性选择器

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

语法：

1.[属性名]            选中具有某个属性的元素。
2.[属性名="值"]   选中包含某个属性，且属性值等于指定值的元素。
3.[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
4.[属性名$="值"]  选中包含某个属性，且属性值以指定的值结尾的元素。
5.[属性名*="值”]   选择包含某个属性，属性值包含指定值的元素。

 

举例：

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

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

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

/* 选中title属性值以u结尾的元素 */
div[title$="u"] {color:red;}

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

 

 

伪类选择器

伪类是指元素的某种状态，如a标签的【鼠标浮到上面】、【鼠标点击时】、【已点击】和【未点击】状态。

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

动态伪类

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

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

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

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

什么是激活?--按下鼠标不松开。

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

 

结构伪类

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个

 

不常用结构伪类

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

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

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

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

5. :root 根元素。

6. :empty内容为空元素(空格也算内容)。

 

否定伪类

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

举例：

/* 除了带有 class="class" 类的元素以外的 p 标签，都设置为 红色 */
p:not(.class) {
  color: red;
}

 

UI伪类

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

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

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

 

目标伪类

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

举例：

/* 当使用锚点时，被焦点的锚点时颜色变为红色 */
div:target {
  color: red;
}

注意：锚点通常使用 id 修饰元素

 

语言伪类

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

通常我们都会在 <html lang="zh-CN"> 中设置语言，那么下面的子元素都为 zh-CN

可以在子元素里特别指定语言，如 <div lang="en"> 那么以下语言伪类会影响 div

div:lang(en) {
  color: red;
}

 

伪元素选择器

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

常用伪元素:

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

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

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

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

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

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

举例：

/* 选中的是div中的第一个文字 */
        div::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选中的是div中的第一行文字 */
        div::first-line {
            background-color: yellow;
        }
        /* 选中的是div中被鼠标选择的文字 */
        div::selection {
            background-color: green;
            color: orange;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color: skyblue;
        }
        /* 选中的是p元素最开始的位置，随后创建一个子元素 */
        p::before {
            content:"￥";
        }
        /* 选中的是p元素最后的位置，随后创建一个子元素 */
        p::after {
            content:".00"
        }

 

选择器优先级

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。
到底应用哪个样式，此时就需要看优先级了。