head> Document li:last-child...{ color: red; } .box1 p:last-child { color:...2 3 4 核心：first-child：第一个，所在元素的哦 last-child
background:#ddd} :nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一” .talklee li:nth-child(3n+1){background:#ddd} :last-child...选取最后一个标签 .talklee li:last-child{background:#ddd} :nth-last-child(3)选取倒数第几个标签,3表示选取第3个 .talklee li:nth-last-child
first-child 和last-child是伪类选择器，选择第一个和选择最后一个子元素 现在实现下面的效果 </span...} .menuico span:first-child { margin-top: -6px; } .menuico span:last-child
最原始的写法是： 1: #tabnav li:last-child 2: { 3: border-right:none; 4: } 在常用的浏览器中测试都通过了。...既然last-child是针对最后一个元素进行样式设定的，那么我们可以通过jQuery达到同样的效果。也不需要给最后一个li添加lastitem的样式了。
(文末有记忆“口诀”) 八个易混的CSS伪类选择器 前几天有小伙伴在我们的前端交流群里问了一个关于css中:last-child选择器的问题： 他给出的代码如下： 可以看到它的body里只写了两个div...我开始想，难道是因为第一个元素选择器设置的背景色覆盖了:last-child的颜色？...那么我把第一个元素选择器的背景色删掉，并且为演示方便，我给div都加上了边框： 结果最后一个（也就是第二个）div的颜色直接没了，:last-child选择器还是没选择到最后一个div 这就奇了怪了，...还是:last-child的语法我没搞懂？ 经过一番菜鸟、MDN和群交流之后，我才明白原来是Live Server“搞的鬼”。...& :last-of-type :last-child在刚开始的例子中讲过，这里略，只讲一下:last-of-type选择器：选取在一组兄弟元素中指定元素的最后一个。
>a, .pagination >li:last-child >span { border-top-right-radius:4px; border-bottom-right-radius:...>a, .pagination-lg >li:last-child >span { border-top-right-radius:6px; border-bottom-right-radius...>a, .pagination-sm >li:last-child >span { border-top-right-radius:3px; border-bottom-right-radius...>a, .pagination >li:last-child >span { border-top-right-radius:4px; border-bottom-right-radius:...>a, .pagination-lg >li:last-child >span { border-top-right-radius:6px; border-bottom-right-radius
例如这6个比较常用的后代选择器： Child Selectors IE9 IE8 IE7 :first-child √ √ √ :last-child √ × × :nth-child(n) √ ×...列表边框问题： 选择最后一个元素： 一般 last-child 都是用在菜单或者列表用边框分隔的时候，把最后面一个border的设定去掉。...一种方法是给最后一项添加一个 class ，例如 .last-child ，把 border 的值设为 none 。（这个不便于数据绑定，不然又得判断最后一个，麻烦）。...一种方法是通过 js 把最后最后一项的边框值去掉，达到 last-child 的目的： if ($('html').hasClass('lt-ie9')) { $('[data-fix-last-child...因为 last-child 元素是没有紧跟这的元素的， element+element 为CSS2选择器。
{ 34 border-width: 1px 1px 0 1px; 35 } 36 .m-tb td:last-child{ 37...border-width: 1px 1px 0px 1px; 38 } 39 .m-tb tbody > tr:last-child td{ 40...border-width: 1px 0 1px 1px; 41 } 42 .m-tb tbody > :last-child > :last-child{ 43...{ 49 border-top-right-radius: 5px; 50 } 51 .m-tb > :last-child > :last-child...> :last-child > :last-child{ 55 border-bottom-right-radius: 5px; 56 } 57
display: flex; } header > nav > * { display: flex; } header > nav > :first-child, header > nav > :last-child...{ flex: 1 1 0; } header > nav > :last-child { justify-content: flex-end; } 效果如下图所示： 让我们来谈谈这个解决方案...{ flex: 1 1 0; } header > nav > :last-child { justify-content: flex-end; } header > nav > :last-child...} header > nav > * { display: flex; } header > nav > :first-child, header > nav > :last-child...{ flex: 1 1 0; } header > nav > :last-child { justify-content: flex-end; } .desktop-navigation
add border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素…… /* remove border */ .nav li:last-child... { border-right: none; } ……可以直接使用 :not() 伪类来应用元素： .nav li:not(:last-child) { border-right: 1px solid...逗号分隔的列表 让HTML列表项看上去像一个真正的，用逗号分隔的列表： ul > li:not(:last-child)::after { content: ","; } 对最后一个列表项使用 :not...table-layout: fixed; } 用Flexbox摆脱外边距的各种hack 当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child
background-color: beige; transform: translate(100px, 100px); } div:last-child...; left: 100px; /* transform: translate(50%, 50%); */ } div:last-child...left: 100px; */ /* transform: translate(50%, 50%); */ /* } */ /* div:last-child...left: 100px; */ /* transform: translate(50%, 50%); */ /* } */ /* div:last-child...left: 100px; */ /* transform: translate(50%, 50%); */ /* } */ /* div:last-child
-- 第2个子元素div匹配 --> 2、E:first-child：匹配元素类型为E且是父元素的第一个子元素 3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素 4、E >...E:first-child：匹配元素类型为E且是父元素的第一个子元素 E:last-child：匹配元素类型为E且是父元素的最后一个子元素 除了上面根据序号来定位相关元素的样式，还可以使用first-child...和last-child来进行定位。
选择器E:last-child(n)：匹配其父元素下的最后一个子元素。 选择器E:first-child：匹配其父元素下的第一个子元素。...如下是选择器E:last-child的书写形式： ul.breadcrumb li:last-child a { padding: 0; } 2.2 CSS3圆角 主要功能是为标签添加圆角样式，...display: inline-block; opacity: 1; } /*处理第一个导航项*/ ul.breadcrumb li:last-child...a { padding: 0; } ul.breadcrumb li:last-child:hover { padding...: 3px; margin-top: 0; } ul.breadcrumb li:last-child:hover a {
CSS3 :last-child 选择器 指定属于其父元素的最后一个子元素的 p 元素的背景色 p:last-child { background:#ff0000; } CSS3 :nth-last-child...() 选择器 规定属于其父元素的第二个子元素的每个 p 元素，从最后一个子元素开始计数： p:nth-last-child(2) { background:#ff0000; } p:last-child
我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。...举例：第一行字体显示为红色，代码如下： li:first-child{ color: red; } last-child last-child：选择列表中的最后一个标签。...举例，最后一行字体显示为绿色，代码如下： li:last-child{ color: green; } nth-child(n) nth-child(n)：选择列表中的第 n 个标签。
add border */ .nav li { border-right: 1px solid #666; } ……然后再除去最后一个元素…… /* remove border */ .nav li:last-child...{ border-right: none; } ……可以直接使用 :not() 伪类来应用元素： .nav li:not(:last-child) { border-right: 1px solid...逗号分隔的列表 让HTML列表项看上去像一个真正的，用逗号分隔的列表： ul > li:not(:last-child)::after { content: ","; } 对最后一个列表项使用 :not...table-layout: fixed; } 用Flexbox摆脱外边距的各种hack 当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child
transform-style: preserve-3d; } 结构伪类选择器 参考 【CSS3】CSS3 结构伪类选择器 ( E:first-child / E:last-child...选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 ) 博客 , 选择 .box 类标签下的 第二个 div 子盒子 , 可以使用 .box div:last-child...100%; height: 100%; background-color: red; } .box div:last-child...100%; height: 100%; background-color: red; } .box div:last-child
box-sizing: border-box; padding: 10px; cursor: pointer; } .data-v td div{ } .data-v tr td:last-child...: #d3d3d3 1px solid; top:-1px; left: -87px; width: 207px; height: 0px; } .data-v tr:last-child...td:first-child{ border-bottom: 0; } .data-v tr:last-child td:first-child:after{ position: absolute...#d3d3d3 1px solid; bottom:-1px; left: -87px; width: 217px; height: 0; } .data-v tr:last-child...td.selected{ border-bottom: #2277da 1px solid; } .data-v tr:last-child td.selected:after{ position
(2n-1)选取奇数标签，2n-1可以是odd li:nth-child(3n+1){background:#090} :nth-child(3n+1)自定义选取标签，3n+1表示”隔二取一” li:last-child...{background:#090} :last-child选取最后一个标签 li:nth-last-child(3){background:#090} :nth-last-child(3)选取倒数第几个标签
text-decoration: none; background-color: #fff; border: 1px solid #d0d0d0; } #page .pagination > li:last-child... > a, .pagination > li:last-child > span { border-top-right-radius: 4px; border-bottom-right-radius
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
