CSS选择器详解与用法-优快云博客

本文链接：https://blog.youkuaiyun.com/Emperor10/article/details/122934977

本文详细介绍了CSS的引入方式，包括行内样式、内部样式和外部样式，并重点讲解了选择器的用法，包括基础选择器（标签选择器、类选择器、ID选择器和通配符选择器）及其优先级，以及复合选择器（后代选择器、子选择器、并集选择器和伪类选择器），特别是伪类选择器中的链接伪类和focus伪类选择器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、引入方式

1. 行内样式/内联样式

直接把样式以style属性的方式，写到元素内部；

<p style="color:green">这是一个行内样式例子</p>

2. 内部样式

通过style标签将CSS代码嵌入到HTML内部;

这种方法不太常见，仅在初学时方便使用~

<style>
        p {
            color: blue;
            font-size: 30px;
        }
</style>

3. 外部样式

将CSS代码单独放到一个文件里xxx.css，在HTML中使用link标签将css文件引入;可以实现样式与页面的分离，是实际开发中最常用的引入方式；

<head>
 
　　<linkrel="stylesheet"type="text/css"href="xxx.css"/>
 
　　</head>

二、选择器

选择器功能：选中页面中指定的标签元素；先选中元素，才能设置元素的相关属性；

1. 基础选择器

1.1 标签选择器

标签选择器能够将同一类标签全部选择查出来，但不能差异化选择；

<style>
        p{
            color:red;
        }
        div{
            color:green;
        }
</style>
<p>第一行</p>
<p>第一行</p>
<p>第一行</p>
<div>case2</div>
<div>case2</div>
<div>case2</div>

页面效果如下所示，标签选择器将所有的p标签全部设置为蓝色，选中所有的div标签设置为绿色；但如果我想要三个p标签呈现不同的颜色，标签选择器就无法实现了，因为它不能差异化选择，也就是说，只要选中，就是全部的该标签。
在这里插入图片描述

1.2 类选择器

既可以选中一类元素，也可以进行差异化设置；是使用的最多的一种选择器~

1.2.1 基本语法：

标签使用class属性来调用
类名用.开头

<style>
        .blue{
            color:blue;
        }
</style>
    <div class = "blue">张三</div>
    <div>张三</div>

页面效果如下所示，类选择器设置了字体颜色为蓝色的样式，下面的两行代码都是div标签，但是一个使用class属性来调用了该类选择器，另一个是默认样式，结果只有调用了类选择器的div文字显示蓝色，而两一个div显示默认黑色。由此我们可以发现，类选择器相比于标签选择器，最大的功能区别是可以差异化选择标签。
在这里插入图片描述
3. 一个类可以被多个标签使用，一个标签也能使用多个类；

<!--一个标签可以使用多个类-->
 <style>
        .one{
            color:red;
        }
        .two{
            background-color: green;
        }
    </style>
    <div class = "one two">张三</div>

一个class标签额可以使用多个类one，two，生成的文字效果同时具备良好着呢的样式；
在这里插入图片描述

1.3 id选择器

和类选择器类似~ 但是id选择器与类选择器最大的区别在于 id选择器只能使用一次。同一个类名可以应用于页面上任意多个元素，但一个ID只能应用于页面上的一个元素。

<style>
       #blue{
           color:blue;
       }
    </style>
<div id="blue">哈哈哈</div>

1.4 通配符选择器

使用*的定义，选取所有的标签；常用来清除浏览器的默认样式；

1.5 CSS选择器优先级

原则：选择器能选择的元素越少，其优先级就越高；
优先级排序：id选择器 > 类选择器 > 标签选择器；

1.5 基础选择器小结

选择器	作用	注意事项	标签使用属性
标签选择器	选出所有相同的标签	无法差异化选择	/
类选择器	选出一个或多个标签	可以差异化选择，最常用	class
id选择器	能选出一个标签	同一个 id 在一个 HTML 中只能出现一次	#
通配符选择器	选择所有标签	常用于清除浏览器默认样式

2. 复合选择器(了解)

2.1 后代选择器 / 包含选择器

选中一个元素里面的子元素或者孙子元素(后代)；

元素1 元素2 {样式声明}

2.2 子选择器

与后代选择器相似，但是只选择子标签，不选择后代标签；

元素1>元素2 { 样式声明 }

2.3 并集选择器

同时针对多个元素，设置相同的样式；

元素1, 元素2 { 样式声明 }

可以同时选择多组标签；

2.4 伪类选择器

用于选中元素的各种状态；

2.4.1 链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起）
以上四种是链接标签时对各种状态设置样式的方法；比较常见的时a:hover 鼠标悬停时的样式设置；

2.4.2 focuse伪类选择器

选取获取焦点的input元素，效果如下所示，刷新页面后被选中的文本框的背景就会变成蓝色；

<style>
        input:focus {
            background-color: lightblue;
        }
    </style>
    请输入姓名:<input type="text"><br>
    请输入学号:<input type="text"><br>

在这里插入图片描述

2.5 符合选择器小结

选择器	作用	注意事项
后代选择器	选择后代	可以是孙子元素
子选择器	选择子元素	只能选择亲儿子，不能选孙子
并集选择器	选择相同样式的元素	代码重用++
链接伪类选择器	选择不同状态的链接	/
:focus伪类选择器	选择被选中的元素	/