CSS 各种选择器总结

CSS 选择器总结

语法🎄

选择器{
 属性: 值
}

作用: 选择Html(网页)上的[元素、标签]，并且设置对应的样式。

选择器种类🎨

基础选择器👇

标签选择器

• 对Html页面中相同的[元素、标签]，设置对应的样式
• 作用范围大。

---

示例🧨

HTML

<p>
    <span>张三</span>一生之敌🦌<span>罗翔</span>
</p>

CSS

p{
    color: orange;
}

span{
    color: teal;
}

效果图：

---

id选择器

• 任何[元素、标签]都能设置id值
• id值唯一，并且不能重复，表示对唯一特性的元素设置样式。

---

示例🧨
HTML

<p id="active">张三一生之敌罗翔</p>

CSS

#active{
    color: orange;
}

效果图：

---

class类选择器

• 任何[元素、标签]都能设置类值
• 一个[元素、标签]可以设置多个类
• 可以编写公共类来提高代码效率

---

示例🧨
HTML

    <p>
        <span class="active">张三</span>一生之敌🦌<span class="active">罗翔</span>
    </p>

CSS

.active{
    color: teal;
}

效果图：

---

高级选择器👇

后代选择器

标签嵌套时，内层标签为外侧标签的后代

div标签下的所有a标签
列如: div a{
 属性: 值
}

---

示例🧨
HTML

<div>
    <p>
        <a href="#">链接</a>
    </p>
    <a href="#">链接二</a>
</div>

CSS

div a{
    color: orange;
}

如果是这样直接使用会造成所有div目录下的a标签生效，但如果说要针对某一 div 标签下的内容，那就要搭配 类选择器 或则 id选择器 使用。

HTML

<div id="active">
    <p>
        <a href="#">链接</a>
    </p>
    <a href="#">链接二</a>
</div>

CSS

#active a{
    color: orange;
}

效果图

---

子代选择器

通过 > 符号将标签链接一起而成，仅仅作用与子代标签

div标签下的p标签里的a标签
列如: div>p>a{
 属性: 值
}

---

示例🧨
HTML

<div id="active">
    <p>
        <a href="#">链接</a>
    </p>
    <a href="#">链接二</a>
</div>

CSS

div>p>a{
     color: orange;
 }

效果图：

---

组合选择器

通过逗号隔开给多个选择器设置样式

选择器1, 选择器2, 选择器3{
 属性: 值
}

---

示例🧨
HTML

<h2>标题二</h2>
<h3>标题二</h3>

CSS

h2,h3{
    color: teal;
}

---

交集选择器(了解)

• 由两个选择器构成，选中两者范围的交集，选择器之间不能有空格
• 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器。
• 应用场景不多，了解范围内知识。

---

示例🧨
HTML

<h2 class="active">标题二</h2>

CSS

这里标签和类选择器中出现了冗余代码： font-size: 20px;

h2{
    color: red;
    font-size: 20px;
}

.active{
    font-size: 20px;
    font-weight: bold;
}

可以使用交集选择器解决

h2{
     color: red;
 }

.active{
    font-weight: bold;
}

h2.active{				/* 交集选择器 */
    font-size: 20px;
}

---

伪类选择器

• 用来添加一些选择器的特殊效果，同一个标签，根据不同的状态，有不同的样式，将这些样式添加一些特殊效果，这就叫做伪类。
• 选择器: 伪类
   属性: 值
  }

---

常用于 <a> 标签中

<a> 标签定义超链接，用于从一个页面链接到另一个页面。

<a> 标签有四种伪类（对应四种状态）

伪类	中文释义	用法
a:link{}	链接	在超链接点击之前
a:visited{}	访问过的	在超链接点击之后
a:hover{}	悬停	鼠标放到超链接上的时候
a:active{}	活跃	鼠标点击超链接且不松手的时候

优先级：L > V > H > A

为了方便记忆，出现了 爱恨准则: LoVe HAte

• love: 爱 | hate: 恨
• L = Link
• V = visited
• H = hover
• A = active

注意：:hover可以适用于任何元素

---

示例🧨
HTML

<div>
    <p>
        <a href="#" class="active">链接</a>
    </p>
</div>

CSS

.active:link{           /* 点击前 */
    color: orange;
}
.active:visited{        /* 点击后 */
    color: purple;
}
.active:hover{          /* 悬停时 */
    color: red;
}
.active:active{
    color: teal;        /* 点击不松开时 */
}

效果图：

动作	效果
点击前
点击后
悬停时
点击不松开时