:nth-last-child(n) 说明 类似于:nth-child,但它是从最后一个子元素开始反向计数。 示例 li:nth-last-child(1):选择所有列表的最后一项。 li:nth-last-child(2n):从列表末尾开始,选择偶数位置的元素。 li:nth-last-child(odd) {border-bottom: 1px solid black;} 这段代码会给从列表底部开始的每一个奇...
:first-child和:last-child直接定位到列表的首尾,:nth-child和:nth-last-child则提供了更灵活的定位方式,允许基于复杂的位置逻辑来选择元素,而:only-child专门用于没有兄弟元素的单一子元素。在SCSS开发中,熟练运用这些选择器能极大地提升样式设计的灵活性和精准度。
li:first-child { font-weight: bold; } 4、:last-child scss li:last-child { text-decoration: underline; } 5、:nth-child(n) scss li:nth-child(2) { color: green; } 6、:nth-last-child(n) scss li:nth-last-child(2) { font-style: italic; } 7、:not(selector) scss button:not(...
单冒号(:)用于表示 CSS 中的伪类,它们是一些用于选择特定状态或特定位置的元素的类别。以下是一些常见的单冒号伪类: :hover:当鼠标悬停在元素上时应用的样式。...:first-child:选择父元素下的第一个子元素。 :last-child:选择父元素下的最后一个子元素。 :nth-child(n):选择父元素下的第 n 个子元素。
示例:ul li:last-child { color: gray; } :nth-child(n):选择父元素下的第n个子元素,常用于对列表或表格中特定位置的元素进行样式控制。示例:ul li:nth-child(odd) { background-color: lightgray; } 以上只是伪类的一小部分示例,SCSS还支持更多的伪类选择器。在实际开发中,根据具体需求选择合适的伪...
CSS伪类 (Pseudo-classes) 伪类包括选择器伪类、锚类伪类、内容伪类 选择器伪类(:first-child、:nth-child(n)、:last-child) 锚类伪类(:link、:visited、:hover 、:active) 内容伪类(:after 、 :before) 效果图: 效果图: CSS3的first-child和last-child选择器用法总结(很容易犯才错误,有几个坑!) ...
在scss中,可以使用nth-child伪类来访问DOM元素的第一个子元素: &:nth-child(1):before{ content:"First Child"; } 案例 div{ &:nth-child(1):before{ content:"First Child"; font-weight: bold; } &:nth-child(2):before{ content:"Second Child"; ...
1、E:nth-child(n):匹配元素类型为E且是父元素的第n个子元素 .list div:nth-child(2){ background-color:red; } ... 1 2 3 4 5 <!-- 第2个子元素div匹配 --> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 2...
这里:nth-child(2) 实际上尝试选择 .top-info 的第二个直接子元素,但根据 HTML 结构,第二个直接子元素是一个 span,而不是 div。因此,这个选择器不会匹配任何 div 元素。 解决方案 你的第二个 SCSS 示例之所以能够工作,是因为你使用了 :nth-child(n+2),这个选择器匹配从第二个元素开始的所有子元素(在这...
1. { { } } 非常常见,越往里说明辈份越小 2. div:nth-child(n) div第n个孩子 这个n是从1开始的哦 类似的有p:first-child last-child等 假设n为3这个有个需要注意的点:第三个p 和第三个span都会生效 只要是第三个并且他的父亲是div就会生效 ...