前端 css 经典:选择器速记

简介: 前端 css 经典:选择器速记

1. 牢记

/* 元素选择器 */
div {}
/* 类选择器 */
.box {}
/* ID 选择器 */
#id {}
/* 通配符 */
* {}
/* 群组选择 */
div,
span {}
/* 后代选择 */
div span {}
/* 子代选择 */
div > span {}
/* 伪类选择器:第一个子元素 */
div:first-child {}
/* 伪类选择器:最后一个子元素 */
div:last-child {}
/* 伪类选择器:第n个子元素,从 1 开始 */
div:nth-child(n) {}

2. 了解

/* 相邻兄弟 */
div + p {}
/* 所有兄弟 */
div ~ p {}


目录
相关文章
|
1天前
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
CSS进阶-CSS选择器高级:伪类与伪元素
|
7天前
|
前端开发
CSS基础-CSS选择器:ID、Class、Tag
【6月更文挑战第7天】本文介绍了CSS中的三种基本选择器:ID、Class和Tag选择器。Tag选择器适用于统一设置同类型元素样式,但可能造成样式泛化;Class选择器灵活性高,适合复用,注意命名规范和避免过度使用;ID选择器具有最高优先级,用于唯一标识,应谨慎使用。理解其特点和场景,结合良好命名规范,能提升CSS代码效率和可维护性。
|
8天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
12 1
|
8天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
23 1
|
9天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
14天前
|
前端开发
要使用CSS选择器选中特定类别的元素
【5月更文挑战第31天】要使用CSS选择器选中特定类别的元素
19 2
|
14天前
|
前端开发
CSS选择器
【5月更文挑战第31天】CSS选择器
20 1
|
20天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
14 0
|
24天前
|
前端开发
CSS分组和嵌套选择器
CSS分组和嵌套选择器。
21 1
|
24天前
|
前端开发
前端 CSS 经典:SVG 描边动画
前端 CSS 经典:SVG 描边动画
29 0