css3新手入门(1)基础选择器
myzbx 2025-01-15 15:53 14 浏览
今天学习下css3的基础选择器类型，只有使用选择器选中了元素，才可把样式应用于元素上，所以选择器对我们来说是至关重要的。选择器允许开发者根据元素的类型、类名、ID等属性来选择性地应用样式。
下面是一个包含HTML和CSS代码的例子，展示了CSS3中的几种基础选择器如何工作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 基础选择器示例</title>
<style>
/* 元素选择器 */
p {
color: blue;
}
/* 类选择器 */
.highlight {
background-color: yellow;
}
/* ID选择器 */
#unique-id {
color: red;
}
/* 后代选择器 */
div p {
font-style: italic;
}
/* 子选择器 */
ul > li {
list-style-type: none;
}
/* 相邻兄弟选择器 */
h1 + p {
font-size: 18px;
}
/* 通用兄弟选择器 */
h1 ~ p {
margin-top: 20px;
}
</style>
</head>
<body>
<p>这是一个普通的段落，应用了元素选择器。</p>
<p class="highlight">这是一个高亮显示的段落，应用了类选择器。</p>
<div id="unique-id">这是一个ID为unique-id的div，它的文本应用了ID选择器。</div>
<div>
<p>这个段落位于div内部，应用了后代选择器。</p>
</div>
<ul>
<li>列表项1，应用了子选择器。</li>
<li>列表项2，也应用了子选择器。</li>
</ul>
<h1>标题</h1>
<p>这个段落紧接在h1之后，应用了相邻兄弟选择器。</p>
<p>这个段落也在h1之后，但由于不是紧接的，所以只应用了通用兄弟选择器的样式。</p>
</body>
</html>在这个例子中，我们有一个HTML文档，其中包含了各种元素，并且针对这些元素使用了CSS3中的基础选择器来应用样式。
- 元素选择器：所有的<p>元素都会应用蓝色文本颜色。
- 类选择器：具有class="highlight"的<p>元素会有黄色背景。
- ID选择器：ID为unique-id的<div>元素内的文本会变成红色。
- 后代选择器：位于<div>内部的<p>元素会以斜体显示。
- 子选择器：<ul>元素的直接子<li>元素将不会有列表样式（即无圆点或数字）。
- 相邻兄弟选择器：紧接在<h1>之后的<p>元素会有18px的字体大小。
- 通用兄弟选择器：所有在<h1>之后的<p>元素都会有20px的顶部外边距，但由于相邻兄弟选择器更具体，紧接在<h1>之后的<p>还会受到它的影响（这里两个选择器都作用于相同的元素，但样式会累加或根据CSS的层叠规则来应用）。不过，在这个特定的例子中，字体大小只由相邻兄弟选择器设置，顶部外边距则由通用兄弟选择器设置。
相关推荐
- 为什么钟表的指针是从左向右顺时针转?
-
所有的钟表指针都是从左向右转的，所以我们就用它来表示旋转方向了。那么，为什么钟表都是从左向右转呢？正着转也好，反着转也好，一圈不都是12小时吗？这就要从钟表的前身说起了。在钟表出现之前，人们使用过一种...
- 牛人将电子钟改造高精度时钟，日误差0.26秒!解决走时不准通病
-
家里有好多个电子钟，精度各种参差不齐，然后走时就是各种混乱，是可忍孰不可忍……自打发现8025这个好玩意儿之后，就决定不忍了。第一个上场的聪明钟，为啥叫聪明钟然后还走的不准。三节电池供电，其中3V给主...
- 篮球裁判手势图解之计时钟、得分替换和暂停手势
-
▋篮球裁判手势图解之计时钟手势停止计时钟手势，伸开手掌，垂直举过头部。犯规停止计时钟手势，一拳握紧，垂直举过头部。计时开始手势，用手做劈柴动作，将垂直举过头部的手放下。▋篮球裁判手势图解之得分手势1...
- 罗马数字的起源与用途
-
一、罗马数字的诞生与进化罗马数字起源于古罗马帝国，拥有一个漫长而复杂的历史，始于公元前8世纪至9世纪，与古罗马帝国在帕兰丁山（PalantineHill）周围建立的时间大致相同。不过，罗马数...
- 基于 Arduino Nano R3 的红外遥控数字时钟
-
由于在ArduinoNano上没有足够的引脚来编写代码，该项目只有有限的功能（即使没有设置时间的设施）。通过添加红外线遥控器，我可以灵活地整合所有需要的功能（如果需要，可能会更多），不需要额外的...
- 大班必备33首数字歌，轻松学数学
-
适合大班宝贝的33首数学歌，让孩子们在玩中学，通过好玩、好记的的儿歌来了解数学的知识点，轻松学数学！以上所有有关数学概念的知识点，其中包含了钟表、点数、分解组成、加减、单双数、倒数正数、凑十、方位...
- 11的寓意和象征
-
在数字的王国里，每个数字都有其独特的内涵和象征意义。今天，我们将一起探索数字11的奥秘和象征意义。这个奇特的数字，不仅在我们的日常生活中扮演着重要的角色，而且在神秘主义和宗教中也占有的一席之地。首先，...
- 基于TM1637的数字时钟
-
方案介绍这个项目是一个原型，我将在我正在进行的其他数字时钟项目中使用。这是我计划在我的下一个数字时钟项目中使用的时间和闹钟设置机制的原型。我希望能给你提供到帮助。如果你想到任何改进，请告诉我。我会更乐...
- 【金龟子讲睡前故事】数字不见啦
-
“快做数学题！”妈妈大声吼邦邦。“啊，好烦呀！”邦邦回到屋里，对着数学练习册大声嚷嚷。考拉熊博士在邦邦的屋外听到邦邦的声音，自言自语说：“好像又在发脾气，我得去看看他。”考拉熊博士推门进去，只见邦邦大...
- SE 最终幻想 35 周年，《FF7 重制版》破坏剑数字时钟 9 月发售
-
IT之家3月9日消息，SE今日正式开设了《最终幻想》35周年纪念网站，天野喜孝绘制官方LOGO公布！值得一提的是，索尼PlayStation游戏发布会即将于北京时间3月10...
- 谁说数字钟就是黑白状?他们让你改变看法
-
如果我们没有了钟表，你会用什么衡量时间？是利用太阳的变化还是凭猜测？之前设计癖也介绍一些有趣的钟表，像是Edelkrone设计的无表针的Oqloq钟表，也有淡化了表针概念的轨道钟表，今天再给大...
- 杭州元宵游玩大赏|“人体时钟”亮相文三数字生活街区，还有元宵巡游活动等你嗨
-
钱江晚报·小时新闻记者方力通讯员冯晨晨刘静滴答滴答，在这个时钟里面有一位虚拟的“小姐姐”。她的工作内容就是不断地把分针擦掉，然后再画上新的分针，她每画一次分针擦干净后，再画上一条新的分针，就刚...
- 来用PPT做一只数字时钟动画
-
“什么是可见性？“可见性”即指PPT动画元素中的一种。在我们之前的图文教程《动画基础扫盲课，必修！》中提到过一些常用的PPT动画元素。分别为可见性，X,Y坐标，旋转，高度和宽度。而其中所谓的“可见性”...
- 苹果手机桌面时钟怎么显示 苹果手机桌面时钟显示操作
-
苹果手机系统流畅，系统使用起来很舒适，是很多人的首选。苹果时钟可以在桌面上显示数字时钟，如果在编辑主屏幕时，不小心把时钟删掉了，要怎么恢复呢？或者想要设置时钟显示，操作是什么样的呢？苹果手机桌面时钟怎...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)