CSS之第一个CSS样式和CSS选择符

前端这些博客，我觉得都是固定的语法，故而不会以过多的文字进行描述，本系列博文均以实例和代码介绍的方式进行，主要按照代码进行。不会以过多的文字描述。

第一个CSS样式

<!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>
        p {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <p>miaow</p>
</body>
</html>

在这里插入图片描述

元素选择符

通配符选择符: *{sRules}

选定所有对象。

  • 通配选择符(Universal Selector)
  • 通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用
<style>
* {
	color: #f00;
}
</style>

类型选择符 ： E { sRules }

以文档语言对象类型作为选择符。
类型选择符(Type Selector)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>类型选择符</title>
<style>
h1 {
	font-size: 20px;
}
p {
	font-size: 13px;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>正文内容</p>
</body>
</html>

ID选择符： E#myid { sRules }

以唯一标识符id属性等于myid的E对象作为选择符。
ID选择符(ID Selector)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>id选择符 (E#myid)</title>
<style>
#subtitle {
	font-size: 20px;
}
p#content {
	font-size: 13px;
}
</style>
</head>
<body>
<h1 id="subtitle">标题</h1>
<p id="content">正文内容</p>
</body>
</html>

类选择符：E.myclass { sRules }

以class属性包含myclass的E对象作为选择符。
类选择符(Class Selector)
不同于ID选择符的唯一性，类选择符可以同时定义多个，如：

定义多个类：
.a {
	color: #f00;
}
.b {
	font-weight: 700;
}
<div class="a b">给某个div元素定义.a和.b两个类</div>

注意，id选择符不能在同个元素上定义多个，比如id="a b"就是错误的写法

类选择符高级用法：多类选择符

.a.b {
	color: #f00;
}
<div class="a b">多类选择符使用方法</div>

此例命中同时拥有.a和.b两个类的元素。需要注意的是IE6并不支持多类选择符，如：.a.b{}将会被视为：.b{}

例如：

<!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>
        /* 标签选择器
        p {
            color: red;
        } */
        /*Class选择器*/
        #p1 {
            color: red;
        }
        .p2 {
            color: blue;
        }
    </style>
</head>
<body>
    <p id="p1">我</p>
    <p id="p1">我</p>
    <p class="p2">我</p>
    <p class="p2">我</p>
</body>

</html>

在这里插入图片描述

关系选择符

包含选择符(E F)： E F { sRules }

选择所有被E元素包含的F元素，与子选择符不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>包含选择符 (E F)</title>
<style>
ul li {
	color: #f00;
}
</style>
</head>
<body>
<ul>
	<li>列表项目</li>
	<li>列表项目</li>
	<li>列表项目</li>
	<li>列表项目</li>
</ul>
</body>
</html>

<style>
	/* 包含选择符(E F) */
	.demo div { border:1px solid #f00; }
	/* 子选择符(E>F) */
	.demo > div { border:1px solid #f00; }
</style>
<div class="demo">
	<div>0
		<div>1</div>
		<div>2</div>
		<div>3</div>
	</div>
</div>

此例，如果使用.demo div，那么 0, 1, 2, 3 都有有边框；如果使用 .demo > div，那么只有 0 有边框，即只有子元素会被命中；

子选择符：E>F { sRules }

选择所有作为E元素的子元素F。
与包含选择符不同的是，子选择符只能命中子元素，而不能命中孙辈。

.demo > div {
	position: relative;
}

<div class="demo">
	<div class="a">
		<div class="b">子选择符</div>
	</div>
</div>

此例只有 .a 会被命中，因为它是 .demo 的子元素；

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子选择器</title>
    <style>
        .nav>a {
            color: #000;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">aa</a>
        <p>
            <a href="#">我是miaow</a>
        </p>
    </div>
</body>
</html>

相邻选择符：E+F { sRules }

选择紧贴在E元素之后F元素，与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。

<style>
	/* 相邻选择符(E+F) */
	p+p{color:#f00;}
	/* 兄弟选择符(E~F) */
	p~p{color:#f00;}
</style>
<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p>
<h3>这是一个标题</h3>
<p>p4</p>
<p>p5</p>

此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>相邻选择符 (E+F)</title>
<style>
p + p {
	color: #f00;
}
</style>
</head>
<body>
<div class="test">
	<h3>这是一个标题</h3>
	<p>这是一个文字段落</p>
	<p>这是一个文字段落</p>
	<h3>这是一个标题</h3>
	<p>这是一个文字段落</p>
	<h3>这是一个标题</h3>
	<p>这是一个文字段落</p>
	<p>这是一个文字段落</p>
</div>
</body>
</html>

兄弟选择符 ： E~F { sRules }

选择E元素后面的所有兄弟元素F。
与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

<style>
	/* 相邻选择符(E+F) */
	p+p{color:#f00;}
	/* 兄弟选择符(E~F) */
	p~p{color:#f00;}
</style>
<p>p1</p>
<p>p2</p>
<h3>这是一个标题</h3>
<p>p3</p>
<h3>这是一个标题</h3>
<p>p4</p>
<p>p5</p>

此例，如果使用p + p{color:#f00;}，那么p2, p5将会变成红色；如果使用p ~ p{color:#f00;}，那么p2,p3,p4,p5将会变成红色；

并集选择符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择</title>
    <style>
        span,
        p,
        div ul li {
            color: red;
        }
    </style>


</head>

<body>
    <span>你好</span>
    <p>你好</p>
    <div>
        <ul>
            <li>你好</li>
        </ul>

    </div>
</body>

</html>

属性选择符

在这里插入图片描述

伪类选择符

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择</title>

    <style>
        /* 没有点击过的链接变颜色 */
        
        ul li a:link {
            color: red;
        }
        /* 点击过的变颜色 */
        
        a:visited {
            color: aqua;
        }
        /* 光标锁定变颜色 */
        
        a:hover {
            color: chartreuse;
        }
        /* 鼠标正在按下没有松开 */
        
        a:active {
            color: blue;
        }
    </style>


</head>

<body>
    <ul>
        <li>
            <a href="#">1</a>
            <a href="http://baidu.com">ddd</a>
            <a href="http://taobao.com">淘宝</a>

        </li>
    </ul>
</body>

</html>

补充focus选择符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>foucs选择器</title>
    <style>
        input:focus {
            background-color: blue;
            border-color: brown;
            border-width: 10px;
        }
    </style>
</head>

<body>

    <input type="text">

    <input type="text">

    <input type="text" name="" id="">

</body>

</html>

在这里插入图片描述

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

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

相关文章

百度地图 JavaScript API GL快速升级 和mapV的使用

百度地图 JavaScript API GL快速升级 和mapV的使用

一、百度地图 JavaScript API GL快速升级 JavaScript API GL升级指南 1、在原来的链接中添加type webgl 2、批量替换页面中的BMap直接替换为BMapGL 二、mapV的使用 MapVGL mapVGL的效率确实要快很多&#xff0c;一万个点基本实现秒现 1、加载mapvgl.min.js export const…
阅读更多...
eclipse显示包层级设置

eclipse显示包层级设置

1、选择中右上角的倒三角 2、选中 Package Presentation -> Hierachical
阅读更多...
【linux学习15】日志管理rsyslog、logrotate介绍

【linux学习15】日志管理rsyslog、logrotate介绍

1.rsyslog 系统日志管理 什么程序产生什么日志&#xff0c;日志存放文件夹 rsyslogd&#xff1a;系统专职日志程序 httpd/nginx/mysql&#xff1a;各类应用程序&#xff0c;存放自己的日志查看rsyslogd程序 ps aux | grep rsyslogd//常见日志文件&#xff08;洗头膏、进程、应…
阅读更多...
CTK插件框架学习-信号槽(05)

CTK插件框架学习-信号槽(05)

CTK插件框架学习-事件监听(04)https://mp.csdn.net/mp_blog/creation/editor/137171155 一、主要流程 信号发送者告诉服务要发送的信号信号发送者发送信号信号接收者告诉服务当触发某个订阅的主题时通知槽函数信号接收者处理槽函数信号槽参数类型必须为&#xff08;const ctk…
阅读更多...
算法训练day57leetcode1143.最长公共子序列 1035.不相交的线 53最大子序和

算法训练day57leetcode1143.最长公共子序列 1035.不相交的线 53最大子序和

part14 1143.最长公共子序列 1035.不相交的线 53最大子序和 动态规划 1143. 最长公共子序列 初始化动态规划数组 dp 动态规划数组 dp 是一个二维数组&#xff0c;其大小为 (text1.size() 1) x (text2.size() 1)&#xff0c;dp[i][j] 表示 text1 的前 i 个字符和 text2 的前…
阅读更多...
对【AI技术创业】有哪些机会进行分析和引导

对【AI技术创业】有哪些机会进行分析和引导

文章目录 方向一&#xff1a;行业解决方案,以下是一些常见的行业解决方案&#xff1a;方向二&#xff1a;智能产品和服务,以下是一些智能产品和服务的示例&#xff1a;方向三&#xff1a;教育和培训 1.智能客户服务&#xff1a; 利用自然语言处理&#xff08;NLP&#xff09;和…
阅读更多...
通过SSH在苹果手机上查看系统文件：远程访问iOS文件系统的方法

通过SSH在苹果手机上查看系统文件：远程访问iOS文件系统的方法

​ 目录 引言 用户登录工具和连接设备 查看设备信息&#xff0c;电池信息 查看硬盘信息 硬件信息 查看 基带信息 销售信息 电脑可对手机应用程序批量操作 运行APP和查看APP日志 IPA包安装测试 注意事项 引言 苹果手机与安卓手机不同&#xff0c;无法直接访问系统文件…
阅读更多...
【蓝牙协议栈】【BLE】【ATT】低功耗蓝牙之属性协议介绍

【蓝牙协议栈】【BLE】【ATT】低功耗蓝牙之属性协议介绍

1. 精讲蓝牙协议栈&#xff08;Bluetooth Stack&#xff09;&#xff1a;SPP/A2DP/AVRCP/HFP/PBAP/IAP2/HID/MAP/OPP/PAN/GATTC/GATTS/HOGP等协议理论 2. 欢迎大家关注和订阅&#xff0c;【蓝牙协议栈】和【Android Bluetooth Stack】专栏会持续更新中.....敬请期待&#xff01…
阅读更多...
zabbix 7.0 新增功能亮点（一）——T参数

zabbix 7.0 新增功能亮点（一）——T参数

概要&#xff1a; T参数是zabbix7.0新增的一项功能&#xff0c;它支持对配置文件进行可用性验证&#xff0c;即zabbix程序(server/proxy/agent等)修改配置文件后&#xff0c;支持-T或–test-config参数验证配置参数可用性。 T参数主要包含以下三个方面的应用场景&#xff1a; …
阅读更多...
宁盾身份域管与Coremail邮件系统完成兼容互认证，持续深化信创布局

宁盾身份域管与Coremail邮件系统完成兼容互认证，持续深化信创布局

在信创国产化改造的背景下&#xff0c;企业邮箱的替换是许多党政、央国企、金融、制造企业面临的重要任务。为了满足企业对国产邮箱、OA等其他应用、终端实现统一身份认证&#xff0c;宁盾国产化身份域管与 Coremail XT 安全增强电子邮件系统 V5.0、V6.0 完成了产品兼容互认证&…
阅读更多...
新能源汽车充电桩主板产业链解析

新能源汽车充电桩主板产业链解析

新能源汽车充电桩主控制板&#xff0c;简称汽车充电桩主板&#xff0c;是充电桩设施的核心部件&#xff0c;主要负责控制充电桩的整体运行和管理充电过程。了解汽车充电桩主板的整体产业链是非常重要的&#xff0c;这可以帮助您更好地了解供应链、采购渠道以及行业发展趋势。 产…
阅读更多...
详细盘点Vue3项目中的各种组件文件夹（用于存放‘.vue’文件）

详细盘点Vue3项目中的各种组件文件夹（用于存放‘.vue’文件）

components 文件夹 存放通用的、可复用的组件&#xff1b; 通常用于构建页面中的具体功能模块。在项目中多次使用&#xff0c;并且不依赖于具体的业务逻辑。 比如&#xff1a;导航栏组件 navbar.vue layouts 文件夹 存放页面的整体布局组件 default.vue <script setup…
阅读更多...
从零开始：如何进入IT行业

从零开始：如何进入IT行业

微信扫码体验我自己做的小程序&#xff08;很有意思哦&#xff5e;&#xff5e;【坏笑】&#xff09;&#xff1a; 随着科技的飞速发展&#xff0c;IT行业已经成为了许多人梦寐以求的职业之一。不过&#xff0c;对于那些没有任何相关经验或技能的人来说&#xff0c;进入这个领域…
阅读更多...
WEB安全测试通常要考虑的测试点

WEB安全测试通常要考虑的测试点

1、问题&#xff1a;没有被验证的输入 测试方法&#xff1a; 数据类型&#xff08;字符串&#xff0c;整型&#xff0c;实数&#xff0c;等&#xff09; 允许的字符集 最小和最大的长度 是否允许空输入 参数是否是必须的 重复是否允许 数值范围 特定的值&#xff08;枚举型&a…
阅读更多...
Ray Tracking 辐射度量学、渲染方程、全局光照

Ray Tracking 辐射度量学、渲染方程、全局光照

Basic radiometry (辐射度量学) Radiant flux Radiant energy Definition: Radiant energy is the energy of lectromagnetic radiation. It is measured in units of joules, and denoted by the symbol: \[Q [J Joule] \] Radiant flux (power) Definition: Radiant flux (p…
阅读更多...
(模型蒸馏)MCC-KD: Multi-CoT Consistent Knowledge Distillation

(模型蒸馏)MCC-KD: Multi-CoT Consistent Knowledge Distillation

论文链接&#xff1a;[2310.14747] MCC-KD: Multi-CoT Consistent Knowledge Distillation (arxiv.org) 背景 近年来&#xff0c;大型语言模型&#xff08;LLMs&#xff09;如GPT-3、BERT等在自然语言处理&#xff08;NLP&#xff09;领域取得了显著的进展。这些模型通过大规…
阅读更多...
Windows搭建Lychee图片管理系统结合内网穿透实现公网访问本地图床

Windows搭建Lychee图片管理系统结合内网穿透实现公网访问本地图床

文章目录 1.前言2. Lychee网站搭建2.1. Lychee下载和安装2.2 Lychee网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 1.前言 图床作为图片集中存放的服务网站&#xff0c;可以看做是云存储的一部分&#xff0c;既可…
阅读更多...
c++的学习之路：9、STL简介与string（1）

c++的学习之路：9、STL简介与string（1）

一、STL 1、什么是STL STL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。 也就是说STL就是一个模板&#xff0c;这个模板就是整合了很多库让我们方…
阅读更多...
166.乐理基础-五声性调式、宫商角徵羽

166.乐理基础-五声性调式、宫商角徵羽

如果到这五线谱还没记住还不认识的话去看102.五线谱-高音谱号与103.五线谱-低音谱号这两个里&#xff0c;这里面有五线谱对应的音名&#xff0c;对比着看 如果不认识调号去看112.五线谱的调号&#xff08;一&#xff09;、113.五线谱的调号&#xff08;二&#xff09;、114.快…
阅读更多...
java学习之路-类和对象

java学习之路-类和对象

前言 本文内容&#xff1a; 类的定义及其使用 this的引用 对象的构造及初始化 封装 static成员 代码块讲解 内部类 文章目录 1.类定义和使用 1.1了解什么是面向对象 1.2简单认识类 1.3定义类 1.4栗子 2.类的使用-类的实例化 2.1什么是实例化 2.2类和对象的说明 3.this引…
阅读更多...
最新文章

Copyright @ 2022~2023