【前端寻宝之路】学习和使用CSS的所有选择器

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|
​💫个人格言:“没有罗马,那就自己创造罗马~”

specification: the precise definition or description of a problem

文章目录

  • `CSS选择器`
  • `基础选择器`
    • `类选择器`
    • `id选择器`
    • `通配符选择器`
  • `复合选择器`
    • `后代选择器通过子元素找父元素`
    • `通过选择器的组合`
    • `给超链接文字换颜色`
  • `伪类选择器`
    • `链接伪类选择器`
    • `按钮点击样式设置`

CSS选择器

参考链接:CSS选择器参考手册

如果标签一样,但我只想修改其中一个标签的内容格式,此时我们就需要用到:类选择器.

基础选择器

类选择器

.eat{
    color:red;
}

.sleep{
    color:green;
}

.game{
    color:blue;
}

.play{
    font-size: 80px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 通过link引入css文件 -->
    <link rel="stylesheet" href="./demo03.css">
</head>
<body>
    <p class="eat">吃饭</p>
    <p class="sleep">睡觉</p>
    <p class="play game">打豆豆</p>
</body>
</html>

在这里插入图片描述

⚠️我们可以通过类选择器进行对应标签的内容格式的修改,如果是多种样式修改叠加,可以在类选择器里面设置多个变量,然后再通过CSS进行对应格式的设置.

在这里插入图片描述

id选择器

  • CSS中使用 # 开头表示 id 选择器
  • id 选择器的值和 html 中某个元素的 id 值相同
  • html 的元素 id 不必带 #
  • id 是唯一的,不能被多个标签使用(是和 类选择器 最大的区别)
#fe{
    font-size: 90px;
}

#sever{
    color:aquamarine;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo04.css">
</head>
<body>
    <p id="fe">前端开发</p>
    <p id="sever">后端开发</p>
</body>
</html>

在这里插入图片描述

通配符选择器

使用 * 的定义,选取所有的标签.

* {
    color: red ;
}
  • 页面所有的内容都会被改成 红色.
  • 不需要被页面结构调用.

通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除,主要用来消除边距

#fe{
    font-size: 90px;
}

#sever{
    color:aquamarine;
}

*{
    background-color: beige;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./demo04.css">
</head>
<body>
    <p id="fe">前端开发</p>
    <p id="sever">后端开发</p>
</body>
</html>

在这里插入图片描述

复合选择器

  • 复合选择器:将之前学习的基础选择器进行组合

后代选择器通过子元素找父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 后代选择器:通过子元素找父元素 -->
    <style>
        ol li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ol>
</body>
</html>

在这里插入图片描述

通过选择器的组合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 通过选择器的组合 -->
    <style>
        .hobby li {
            color: red;
        }
    </style>

</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol class="hobby">
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ol>
</body>
</html>

在这里插入图片描述

给超链接文字换颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        li a {
            color: aqua;
        }
    </style>

</head>
<body>
    <ul>
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
    </ul>
    <ol class="hobby">
        <li>吃饭</li>
        <li>吃饭</li>
        <li>吃饭</li>
        <li class="red">
            <a href="#">吃饭</a>
        </li>
    </ol>
</body>
</html>

在这里插入图片描述

伪类选择器

伪类选择器:用来定义元素状态

链接伪类选择器

a:link 选择未被访问过的链接
a:visited 选择已被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下但未弹起)
现在我们要使用伪类选择器来实现:
默认时刻超链接展示黑色
当鼠标悬停到上面时,此时展示红色
按下鼠标时展示绿色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            color:black
        }
        a:hover {
            color:crimson
        }
        a:active {
            color: chartreuse;
        }
    </style>
</head>
<body>
    <a href="https://blog.csdn.net/Aileenvov?spm=1011.2415.3001.5343">Aileen</a>
</body>
</html>

在这里插入图片描述

按钮点击样式设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>


        /* 设置按钮的样式 */
        input {
            color: crimson;
        }
        input:hover {
            color: blue;
        }
        input:active {
            color: cornsilk;
        }

    </style>
</head>
<body>
    <input type="button" value="按钮">
</body>
</html>

在这里插入图片描述
](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/449835.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

前端网页如何在 Windows 上测试 Safari

前端网页如何在 Windows 上测试 Safari

“Windows上的Safari&#xff1f;”&#xff0c;“那不可能&#xff01; Safari 无法在 Windows 上运行。当然的&#xff01; 曾经可以在windows上运行&#xff0c;但苹果早在 2012 年就停止支持 Windows。对于想要测试 Safari 兼容性的 Web 开发人员来说&#xff0c;这真是太不…
阅读更多...
ubuntu 23开机界面美化教程

ubuntu 23开机界面美化教程

效果 方法 GRUB开机界面美化 从上述网站中&#xff0c;查找GRUB Themes分类&#xff0c;并下载GRUB主题包&#xff08;tar.gz格式&#xff09;&#xff0c;如CyberSynchro.tar.gz&#xff1b; 解压下载得到的压缩包&#xff0c;得到CyberSynchro&#xff1b; 将CyberSynchro…
阅读更多...
connection SQLException, url:jdbc ,errorCode 0, state 08S01

connection SQLException, url:jdbc ,errorCode 0, state 08S01

connection SQLException, url: jdbc:mysql://localhost:3306/itcast_health?useUnicodetrue&characterEncodingutf-8, errorCode 0, state 08S01 添加&#xff1a;&useSSLfalse 添加前 添加后&#xff1a; 查询数据库正常
阅读更多...
2.1 关系数据结构及形式化定义 数据库概论

2.1 关系数据结构及形式化定义 数据库概论

目录 2.1.1 关系 关系&#xff1a;概念 1. 域&#xff08;Domain&#xff09; 2.笛卡尔积 元组&#xff08;Tuple&#xff09; 分量&#xff08;Component&#xff09; 基数&#xff08;Cardinal number&#xff09; 3. 关系 候选码&#xff08;Candidate key&#xf…
阅读更多...
解决 Webpack 中 ERROR in main Module not found: Error: Can‘t resolve ‘./src‘ 问题

解决 Webpack 中 ERROR in main Module not found: Error: Can‘t resolve ‘./src‘ 问题

出自 BV1MN411y7pw&#xff0c; P98 黑马AJAX-Node.js-Webpack教学视频中webpack部分&#xff0c;打包的时候出错 ERROR in main Module not found: Error: Cant resolve ./src in V:\Web\mycode\webpack\01_webpack_use resolve ./src in V:\Web\mycode\webpack\01_webpack_us…
阅读更多...
【2024金三银四】

【2024金三银四】

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…
阅读更多...
【C++干货基地】面向对象核心概念与实践原理：拷贝构造函数的全面解读

【C++干货基地】面向对象核心概念与实践原理：拷贝构造函数的全面解读

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 哈喽各位铁汁们好啊&#xff0c;我是博主鸽芷咕《C干货基地》是由我的襄阳家乡零食基地有感而发&#xff0c;不知道各位的…
阅读更多...
ReorderData - 优化阅读笔记

ReorderData - 优化阅读笔记

主要实现文件: bolt/lib/Passes/ReorderData.cpp 支持 X86/Arm 测试用例&#xff1a; bolt/test/reorder-data-writable-ptload.c int a1,a2,a3,a4; // 待补充默认关闭&#xff0c;开启选项&#xff1a; # 指定要重排的数据段 --reorder-data<section1,section2,section3…
阅读更多...
基于JavaWeb开发的springboot网咖管理系统[附源码]

基于JavaWeb开发的springboot网咖管理系统[附源码]

基于JavaWeb开发的springboot网咖管理系统[附源码] &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统 &a…
阅读更多...
Android14音频进阶：生产者与消费者模型(六十二)

Android14音频进阶：生产者与消费者模型(六十二)

简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏：多媒体系统工程师系列【原创干货持续更新中……】🚀 人生格言： 人生从来没有捷径，只…
阅读更多...
力扣每日一题 将标题首字母大写 模拟 String API

力扣每日一题 将标题首字母大写 模拟 String API

Problem: 2129. 将标题首字母大写 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 灵神题解 复杂度 ⏰ 时间复杂度: O ( n ) O(n) O(n) &#x1f30e; 空间复杂度: O ( n ) O(n) O(n) Code class Solution {public String capitalizeTitle(String title)…
阅读更多...
数据结构：栈的创建与使用

数据结构：栈的创建与使用

今天我们一起来看一种新的数据结构栈&#xff0c;其实这一种结构我们在之前就已经使用过&#xff0c;只是今天我们来强调以下几点&#xff1a; 1、栈是一种数据后进先出的结构 &#xff0c;通过入栈1 2 3 4我们可以得到多种结果 2、我们选用顺序表来实现栈结构&#xff0c;这里…
阅读更多...
科技回顾，飞凌嵌入式受邀亮相第八届瑞芯微开发者大会「RKDC2024」

科技回顾，飞凌嵌入式受邀亮相第八届瑞芯微开发者大会「RKDC2024」

2024年3月7日~8日&#xff0c;第八届瑞芯微开发者大会&#xff08;RKDC2024&#xff09;在福州举行&#xff0c;本届大会以“AI芯片AI应用AloT”为主题&#xff0c;邀请各行业的开发者共启数智化未来。 本届大会亮点颇多&#xff0c;不仅有13大芯片应用展示、9场产品和技术论坛…
阅读更多...
软考高级：设计模式分类（创建型、结构型、行为型）概念和例题

软考高级：设计模式分类（创建型、结构型、行为型）概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…
阅读更多...
Linux之防火墙详解

Linux之防火墙详解

华子目录 什么时防火墙分类Netfilter&#xff08;数据包过滤&#xff09;定义Netfilter分析内容 防火墙无法完成的任务iptables与firewalld区别iptablesiptables执行原则原则防火墙规则规则链概念分析规则链分类注意例&#xff1a;物业管理公司有两条规定&#xff1a; 规则链之…
阅读更多...
作用域链的理解（超级详细）

作用域链的理解（超级详细）

文章目录 一、作用域全局作用域函数作用域块级作用域 二、词法作用域三、作用域链 一、作用域 作用域&#xff0c;即变量&#xff08;变量作用域又称上下文&#xff09;和函数生效&#xff08;能被访问&#xff09;的区域或集合 换句话说&#xff0c;作用域决定了代码区块中变…
阅读更多...
C++初学

C++初学

1>思维导图 2>试编程 提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数要求使用C风格字符串完成 #include <iostream> #include<string.h> using namespace std;int main() {string str;cout <<…
阅读更多...
C++14之std::index_sequence和std::make_index_sequence

C++14之std::index_sequence和std::make_index_sequence

相关文章系列 std::apply源码分析 C之std::tuple(一) : 使用精讲(全) 目录 1.std::integer_sequence 2.std::index_sequence 3.std::make_index_sequence 4.运用 4.1.打印序列的值 4.2.编译时求值 4.3.std::tuple访问值 5.总结 1.std::integer_sequence 运行时定义一个…
阅读更多...
Linux：进程

Linux：进程

进程 知识铺垫冯诺依曼体系结构操作系统&#xff08;OS&#xff09; 进程概念进程的查看ps 命令获取进程 pid文件内查看进程终止进程的方式kill命令快捷键 进程的创建 forkfork 返回值问题 进程状态运行状态 &#xff1a;R休眠状态&#xff1a;S &#xff08;可中断&#xff09…
阅读更多...
【3GPP】【核心网】【5G】5G核心网组网方案（超详细）

【3GPP】【核心网】【5G】5G核心网组网方案（超详细）

5G NR RRC协议总体介绍 UE入网过程包括几个子过程&#xff1a; UE分为三种状态&#xff1a;空闲态&#xff0c;连接态和非活动态。 开机入网流程 小区搜索与选择 UE开机选网&#xff0c;小区搜索并完成下行同步。 系统消息广播 UE读取广播信息&#x…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站