CSS导读 (复合选择器 下)

(大家好,今天我们将继续来学习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 链接伪类注意事项

  1. 为了确保生效,按照LVHA的顺序声明 :  :link一 :visited一 :hover一 :active。
  2. 记法love hate或者 lv包包hao。
  3.  因为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 记住这个写法

(今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:希望你能有一种自信,不要去追逐光芒,而是自己要成为光芒。) 

相关推荐

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-11 18:54:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-11 18:54:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-11 18:54:02       82 阅读
  4. Python语言-面向对象

    2024-04-11 18:54:02       91 阅读

热门阅读

  1. Python 爬虫基础:利用 BeautifulSoup 解析网页内容

    2024-04-11 18:54:02       33 阅读
  2. Kolla-ansible部署OpenStack集群

    2024-04-11 18:54:02       31 阅读
  3. 字符串判等 51Nod-3288 2024年4月10日

    2024-04-11 18:54:02       37 阅读
  4. 多叉树题目:王位继承顺序

    2024-04-11 18:54:02       31 阅读
  5. 测试用例的编写方式

    2024-04-11 18:54:02       39 阅读
  6. 【高阶CAD二次开发】文稿

    2024-04-11 18:54:02       29 阅读
  7. 【LeetCode刷题记录】15. 三数之和

    2024-04-11 18:54:02       37 阅读
  8. GPT知识库浅析

    2024-04-11 18:54:02       42 阅读