CSS导读（复合选择器下）

Squirrel.J

已于 2024-04-12 10:11:50 修改

阅读量905

点赞数 21

分类专栏： HTML基础篇文章标签： css 前端学习开发语言 css3

于 2024-04-10 20:05:45 首次发布

本文链接：https://blog.csdn.net/2301_79341065/article/details/137607315

版权

HTML基础篇专栏收录该内容

36 篇文章 2 订阅

订阅专栏

（大家好，今天我们将继续来学习CSS的相关知识，大家可以在评论区进行互动答疑哦~加油！💕）

2.5 伪类选择器

2.6 链接伪类选择器

2.6.1 链接伪类注意事项

2.6.2 链接伪类选择器实际开发中的写法

2.7 :focus伪类选择器

2.8 复合选择器总结

2.5 伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

2.6 链接伪类选择器

a : link /* 选择所有未被访问的链接 */

a : visited /* 选择所有已被访问的链接 */

a : hover /* 选择鼠标指针位于其上的链接 */

a : active /* 选择活动链接（鼠标按下未弹起的链接）*/

1. a:link 选择器

2. a:visited 选择器

3. a:hover 选择器

4. a:active 选择器

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS之链接伪类选择器</title>
    <style>
        /* 未访问的链接 a:link  把没有点击过的（访问过的）连接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* a:visited 选择点击过的（访问过的）链接 */
        a:visited {
            color: orange;
        }

        /* a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">中国</a>
</body>

</html>

2.6.1 链接伪类注意事项

为了确保生效，按照LVHA的顺序声明 : :link一 :visited一 :hover一 :active。
记法love hate或者 lv包包hao。
因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

2.6.2 链接伪类选择器实际开发中的写法

/*a是标签选择器所有的链接*/

a {

color: gray;

}

/* :hover是链接伪类选择器鼠标经过*/

a :hover {

color: red; /*鼠标经过的时候，由原来的灰色变为红色*/

}

2.7 :focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input : focus {

background - color : yellow;

}

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS之focus伪类选择器</title>
    <style>
       input:focus {
        background-color: pink;
       }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

2.8 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	大于 .nav>p
并集选择器	选择某些样式相同元素	可以用于集体声明	较多	逗号 .nav,header
链接伪类选择器	选择不同状态链接	跟链接相关	较多	重点记住a{}和a：hover实际开发的写法
：focus选择器	选择获得光标表单跟表单	跟表单相关	较少	input:focus 记住这个写法