《图解CSS3核心技术与案例实战》读书笔记--CSS3基本选择器_html/css_WEB-ITnose
1、认识CSS选择器
要使某个样式应用于特定的HTML元素，首先需要找到元素。在CSS中，执行这一任务的表现规则称为CSS选择器
1、1 CSS3选择器的优势
CSS3新增了属性选择器，伪类选择器、过滤选择器。可以帮助您在开发中减少对HTML的类名或ID名的依赖，以及对HTML元素的结构依赖，使编写代码更加简单轻松。
1、2 CSS3选择器分类
- 基本选择器
- 层次选择器
- 伪类选择器
- 伪元素
- 属性选择器
伪类选择器又分为六种：动态伪类选择器、目标伪类选择器、语言伪类选择器、UI元素状态伪类选择器、结构伪类选择器、否定伪类选择器。
2、基本选择器
2、1基本选择器的语法
| 选择器 | 类型 | 功能描述 |
|---|---|---|
| * | 通配选择器 | 选择文档中所有的HTML元素 |
| E | 元素选择器 | 选择指定的类型的HTML元素 |
| #id | ID选择器 | 选择指定ID属性值为“id”的任意类型元素 |
| .class | 类选择器 | 选择指定class属性值为“class”的任意类型的任意多元素 |
| selector1，selectorN | 群组选择器 | 将每一个选择器匹配的元素合并 |
实战体验
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用CSS3基本选择器</title> <style type="text/css"> *{margin:0; padding: 0;} .clearfix:after,.clearfix:before{display: table;content:""} .clearfix:after{clear: both;overflow: hidden} .demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} </style></head><body> <ul class="clearfix demo"> <li class="first" id="first">1</li> <li class="active">2</li> <li class="important item">2</li> <li class="important">4</li> <li class="item">5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li class="last" id="last">10</li> </ul></body></html>
页面初始效果
2、2通配选择器
通配选择器（*）用来选择所有元素
*{margin:0;padding:0} //此代码在Reset的样式文件中经常见到，表示所有元素的margin和padding都设置为0代码示例
*{margin:0; padding: 0;} .clearfix:after,.clearfix:before{display: table;content:""} .clearfix:after{clear: both;overflow: hidden} .demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} .demo * {background:orange} //使元素类名为demo下的所有元素都将背景色设置为橙色
通配选择器使用效果
2、3 元素选择器
元素选择器是CSS中最基本的选择器，接下来通过ul选择器改变整个列表的背景色
*{margin:0; padding: 0;} .clearfix:after,.clearfix:before{display: table;content:""} .clearfix:after{clear: both;overflow: hidden} .demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} .demo * {background:orange}ul{background:grey}//列表ul的背景色将变成灰色
元素选择器使用效果
2、4 ID选择器
在使用ID选择器（#id）之前，需要在HTML文档中给对应的元素设置id属性并设置其值，才能找到对应的元素。ID选择器具有唯一性。
*{margin:0; padding: 0;} .clearfix:after,.clearfix:before{display: table;content:""} .clearfix:after{clear: both;overflow: hidden} .demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} .demo * {background:orange}ul{background:grey}#first {background:lime;color:#000}#last {background:#000;color:lime}
ID选择器使用效果
2、5 类选择器
类选择器（.class）是以独立于文档元素的方式来指定元素样式。于ID选择器最大的不同之处是：类选择器在一个页面中可以有多个相同的类名，而ID选择器其ID值在整个页面中是唯一的一个
*{margin:0; padding: 0;} .clearfix:after,.clearfix:before{display: table;content:""} .clearfix:after{clear: both;overflow: hidden} .demo{width: 250px;border: 1px solid #cccccc;padding: 10px;margin: 20px auto;} li{list-style: none outside none; float: left; height: 20px; line-height: 20px;width: 20px;border-radius: 10px; text-align: center;background: #f36; color: white; margin-right: 5px;} .demo * {background:orange}ul{background:grey}#first {background:lime;color:#000}#last {background:#000;color:lime}.item {background:green;color:#fff;font-weight:bold}//设置背景为绿色，并且加粗文字
类选择器使用效果
若在代码后面再添加一行
.item.important{background:red;}//列表3同时具有important和item类名，所以才会执行代码
多类名选择器使用效果
2、6群组选择器
群组选择器（selector1,selectorN）是将具有相同样式的元素分组在一起，每个选择器之间用（，）隔开。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
＆gt; gt;的目的是什么 元素？
Mar 21, 2025 pm 12:34 PM
本文讨论了HTML＆lt; Progress＆gt;元素，其目的，样式和与＆lt; meter＆gt;元素。主要重点是使用＆lt; progress＆gt;为了完成任务和LT;仪表＆gt;对于stati
＆lt; datalist＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:33 PM
本文讨论了html＆lt; datalist＆gt;元素，通过提供自动完整建议，改善用户体验并减少错误来增强表格。Character计数：159
＆lt; meter＆gt;的目的是什么。 元素？
Mar 21, 2025 pm 12:35 PM
本文讨论了HTML＆lt; meter＆gt;元素，用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了＆lt; meter＆gt;从＆lt; progress＆gt;和前
我如何使用html5＆lt; time＆gt; 元素以语义表示日期和时间？
Mar 12, 2025 pm 04:05 PM
本文解释了HTML5＆lt; time＆gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性（ISO 8601格式）的重要性，并在人类可读文本旁边，增强Accessibilit
如何使用HTML5表单验证属性来验证用户输入？
Mar 17, 2025 pm 12:27 PM
本文讨论了使用HTML5表单验证属性，例如必需的，图案，最小，最大和长度限制，以直接在浏览器中验证用户输入。
视口元标签是什么？为什么对响应式设计很重要？
Mar 20, 2025 pm 05:56 PM
本文讨论了视口元标签，这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互，而滥用可能会导致设计和可访问性问题。
＆lt; iframe＆gt;的目的是什么。 标签？使用时的安全考虑是什么？
Mar 20, 2025 pm 06:05 PM
本文讨论了＆lt; iframe＆gt;将外部内容嵌入网页，其常见用途，安全风险以及诸如对象标签和API等替代方案的目的。
