前端 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 {}


目录
相关文章
|
2月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
36 1
|
2月前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
46 1
|
3天前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
10 3
|
11天前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
26 2
|
23天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
116 1
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
1月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
46 2
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
15 1
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
23 1
|
1月前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍(上篇)1
【前端基础篇】CSS基础速通万字介绍(上篇)
18 1

热门文章

最新文章