[CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)
CSS dom First Last child classes Hierarchy nth
2023-09-14 09:00:53 时间
DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hierarchy and what type of elements they are. You can also use :nth-child to target custom element patterns, like every other element.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>GistRun</title> <link rel="stylesheet" href="styles.css"> <style> ul { list-style: none; margin: 0; padding: 0; } li { padding: 5px; } /* li:first-child { background-color: rgb(225, 231, 252); } li:last-child { background-color: rgb(225, 231, 252); } li:nth-child(2) { background-color: rgb(225, 0, 252); }*/ /* The even child*/ /*li:nth-child(2n) { background-color: gold ; }*/ /* The odd child*/ /*li:nth-child(2n+1) { background-color: darkred; }*/ /* First 4 children */ li:nth-child(-n+4) { background-color: cadetblue; } /* Expect first three children*/ li:nth-child(n+4) { background-color: lightgoldenrodyellow; } /* Other psuedo classes: * :nth-last-child * :only-child * :only-of-type * :last-of-type * :nth-of-type(an+b) * :nth-last-of-type(an+b) */</style> </head> <body> <ul> <li><a href="#" target="_blank">target=_blank</a></li> <li><a href="#" target="someFrame">target=someFrame</a></li> <li><a href="#" rel="link-blog">rel=link-blog</a></li> <li><a href="#" rel="linkproducts">rel=linkproducts</a></li> <li><a href="#" rel="link about">rel=link about</a></li> <li><a href="#" rel="link-about" title="special">rel=link-about title=special </a></li> <li><a href="#" rel="link-other" title="special">rel=link-other title=special </a></li> <li><a href="#" rel="this item available now">rel=this item available now</a></li> <li><a href="#" rel="product-200-available-now">rel=product-200-available-now</a></li> <li><a href="#" rel="linkproductavailable300">rel=linkproductavailable300</a> <li><a href="#" rel="sale-product-400">rel=sale-product-400</a></li> <li><a href="#" rel="sale">rel=sale</a></li> <li><a href="#" rel="product-500-discontinued">rel=product-500-discontinued</a></li> <li><a href="#" rel="product600discontinued">rel=product600discontinued</a></li> <li><a href="#" rel="discontinued">rel=discontinued</a></li> </ul> <script src="script.js"></script> </body> </html>
相关文章
- CSS - 导入Google Web 字体
- JS判断移动端访问设备并加载对应CSS样式
- mvc.net分页查询案例——mvc-paper.css
- CSS魔法堂:Position定位详解
- css word-break: break-word;无效
- 前端学习 -- Css -- 盒子模式
- [HTML5] Avoiding CSS Conflicts via Shadow DOM CSS encapsulation
- [Ionic] Align and Size Text with Ionic CSS Utilities
- 详解CSS网页布局中默认字体样式
- thymeleaf引入公共css、js等
- 前端学习 -- Css -- 内联元素的盒模型
- [CSS3] Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements (Blockquotes)
- 继承的CSS类在Chrome开发者工具里的显示
- 〖大前端 - 基础入门三大核心之CSS篇㉔〗- 动画效果与实战小案例
- CSS布局:sticky定位
- 【CSS】文字溢出问题 ( 强制文本在一行中显示 | 隐藏文本的超出部分 | 使用省略号代替文本超出部分 )
- 【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )
- CSS--overflow和hover
- CSS(三)元素的修饰、背景设置