展开

关键词

详解:last-child first-child 5

<meta charset="UTF-8"> <title>Document</title> <style type="text/css"> li:last-child { color: red; } .box1 p:last-child { color: blue; } .box1 p:first-child { color:yellow; } </style

1

2

3

4

</body> </html> 核心:first-child :第一个,所在元素的哦 last-child:最后一个,所在元素的哦

13320

CSS3中:last-child及其选择器的用法

简单用实例来给大家讲解下:nth-child的实际用途: :nth-child(2)选取第几个标签,“2可以是你想要的数字” .talklee li:nth-child(2){background:# ddd} :nth-child(n+4)选取大于等于4标签,“n”表示从整数,下同 .talklee li:nth-child(n+4){background:#ddd} :nth-child(-n+4 )选取小于等于4标签 .talklee li:nth-child(-n+4){background:#ddd} :nth-child(2n)选取偶数标签,2n也可以是even .talklee li:nth-child :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

14110
  • 广告
    关闭

    什么是世界上最好的编程语言?丨云托管征文活动

    代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    让IE78使用CSS中first-childlast-child样式属性

    最原始的写法是: 1: #tabnav li:last-child 2: { 3: border-right:none; 4: } 在常用的浏览器中测试都通过了。 既然last-child是针对最后一个元素进行样式设定的,那么我们可以通过jQuery达到同样的效果。也不需要给最后一个li添加lastitem的样式了。

    33680

    详解:nth-last-of-type(2) nth-of-type(2) nth-child(2) 6

    <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box1 p:nth-child } .box1 p:nth-of-type(2) { color: blue; } .box1 p:nth-last-of-type

    17830

    CSS 选择器 nth-child 的几种用法

    举例:第一行字体显示为红色,代码如下: li:first-child{     color: red; } last-child last-child:选择列表中的最后一个标签。 举例:第五行及以后背景色设置为蓝色,代码如下: li:nth-child(n+5){     background: #0ab1fc; } nth-last-child(n) nth-last-child 举例:倒数第三元素字体设置为红色,代码如下: li:nth-last-child(3){     color: red; } 同样可以使用上面的方法进行拓展,方法如下: nth-last-child(n nth-last-child(3n) nth-last-child(3n):选择第 3、6、. . .  个元素,选择三的倍数。 举例:第3、6、 . . .   三的倍数行背景色设置为橙色,代码如下: li:nth-child(3n){     background: orange; } nth-last-child(3n+1) nth-last-child(3n

    1.1K00

    CSS选择器 低版本IE浏览器的兼容

    例如这6个比较常用的后代选择器: Child Selectors IE9 IE8 IE7 :first-child √ √ √ :last-child √ × × :nth-child(n) √ × × :nth-last-child(n) √ × × :first-of-type(n) √ × × :first-last-of-type(n) √ × × IE9 对这些后代选择器都兼容,IE8、 一种方法是通过 js 把最后最后一项的边框值去掉,达到 last-child 的目的: if ($('html').hasClass('lt-ie9')) {     $('[data-fix-last-child ,也就是不用 last-child 都可以了。 因为 last-child 元素是没有紧跟这的元素的, element+element 为CSS2选择器。

    59711

    CSS 1.0~3.0选择器(下)

    ; }tr:nth-child(2n+11) { background:#ff0; }tr:nth-last-child(2) { background:#ff0; }p:last-child { background 1E:nth-last-child(n)匹配其父元素的倒数第n个子元素,第一个编号为1E:nth-of-type(n)与:nth-child()作用类似,但是仅匹配使用同种标签的元素E:nth-last-of-type (n)与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素E:last-child匹配父元素的最后一个子元素,等同于:nth-last-child(1)E:first-of-type 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)E:last-of-type匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)E:only-of-type匹配父元素下使用同种标签的唯一一个子元素

    38830

    选择最后一个元素及nth-child和nth-of-type的区别

    CSS3 :last-child 选择器 指定属于其父元素的最后一个子元素的 p 元素的背景色 p:last-child { background:#ff0000; } CSS3 :nth-last-child () 选择器 规定属于其父元素的第二个子元素的每个 p 元素,从最后一个子元素开始计数: p:nth-last-child(2) { background:#ff0000; } p:last-child 等同于 p:nth-last-child(1) CSS3 :nth-last-of-type() 选择器 规定属于其父元素的第二个 p 元素的每个 p,从最后一个子元素开始计数: p:nth-last-of-type ,意味着选择一个元素: 选择父标签的第二个段落子元素 例子: p:nth-child(2)悲剧了,其渲染的结果不是第二个p标签文字变红,而是第一个p标签,也就是父标签的第二个子元素。 您可以狠狠地点击这里::nth-child测试demo2 p:nth-of-type(2)的表现显得很坚挺,其把希望渲染的第二个p标签染红了,如下截图: ?

    1.5K10

    python学习之selenium~css定位完整版,附代码

    p标签元素(所有的p标签的父标签对应的第二个子标签元素) :nth-last-child(n) p:nth-last-child(2),选择属于父元素的倒数第二个子元素的每个p标签元素(所有的p标签的父标签对应的倒数第二个子标签元素 (n)   p:nth-last-of-type(2),选择属于其父标签元素的倒数第二个p标签的每个p标签元素(所有p标签对应的父标签的倒数第二个p标签元素,也就是这个和p标签平级) :last-child ,选择父元素里面只有一个标签的每个p标签元素(父标签里面只有一个p标签) #:nth-last-child(n) p:nth-last-child(2),选择属于父元素的倒数第二个子元素的每个p标签元素 ').click() #:nth-last-child(n) p:nth-last-child(2),选择属于父元素的倒数第二个子元素的每个p标签元素(所有的p标签的父标签对应的倒数第二个子标签元素) ('#item_0\$Menu>li:nth-last-of-type(2)').click() time.sleep(1) #:last-child        p:last-child,选择属于其父标签元素最后一个子元素是

    80320

    8则未必知道且超级实用的纯CSS布局排版技巧 | 网易4年实践

    (n) 元素中指定顺序索引的元素 3 √ :nth-last-child(n) 元素中指定逆序索引的元素 3 × :first-child 元素中为首的元素 2 √ :last-child 元素中为尾的元素 :first-child:nth-last-child(3) ~ .item:nth-child(2), .item:first-child:nth-last-child(3) ~ .item:nth-child .item:first-child:nth-last-child(4), .item:first-child:nth-last-child(4) ~ .item:nth-child(2), .item :first-child:nth-last-child(4) ~ .item:nth-child(3), .item:first-child:nth-last-child(4) ~ .item:nth-child :nth-last-child(7) ~ .item:nth-child(3) { border-top-right-radius: 10px; } .item:first-child:nth-last-child

    17720

    两款非常漂亮的markdown格式css样式

    important; } body > *:last-child { margin-bottom: 0 ! : 0; } dl dt > :first-child { margin-top: 0; } dl dt > :last-child { margin-bottom: 0; } dl dd last-child { margin-bottom: 0; } blockquote { border-left: 4px solid #ECF0F3; /*padding: { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } table { padding: 0;border-collapse , table tr td :first-child { margin-top: 0; } table tr th :last-child, table tr td :last-child {

    2.8K50

    第91天:CSS3 属性选择器、伪类选择器和伪元素选择器

    (3){  //选中第三个li  color: deeppink; } E:nth-last-child(n) 同E:nth-child(n) 相似,只是倒着计算; div>ul>li:last-child color: red;     }  (3)  选中前面五个    li:nth-child(-n+5){        color: red;    }   (4) 选中后面五个    li:nth-last-child  选择某个元素的第一个子元素; :last-child  选择某个元素的最后一个子元素; :nth-child()  选择某个元素的一个或多个特定的子元素; :nth-last-child()   选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算; :nth-of-type()  选择指定的元素; :nth-last-of-type()  选择指定的元素,从元素的最后一个开始计算 ; :first-of-type  选择一个上级元素下的第一个同类子元素; :last-of-type  选择一个上级元素的最后一个同类子元素; :only-child  选择的元素是它的父元素的唯一一个了元素

    62730

    css3的nth-child选择器的详细探讨

    :first-child :first-of-type :last-of-type :only-of-type :only-child :nth-child(n) :nth-last-child (n) :nth-of-type(n) :nth-last-of-type(n) :last-child 具体每个有什么差异,可以CSS 选择器参考手册页面进行查询. 我们需要换一个选择器,这个选择器就是 nth-last-child. nth-last-child选择器的用法,和 nth-child 选择器的用法是完全一致的,只有一个不同,那就是 nth-child 是从第一个开始计数的,而nth-last-child是从倒数第一个开始计数的 那么上面的问题,就有答案了. ul.list li:nth-last-child(-n+2){background: #000 方法2 ul.list li:not(:last-child){background: #000;} 方法2为简写的方法.方法1为原理性写法.

    7410

    CSS选择器如此之多,你了解多少?

    :last-child p:last-child 表示其父元素的最后一个子元素,且这个元素是css指定的元素,才可以生效(注意和:last-of-type做区分) ? :last-of-type p:last-of-type 代表在一群兄弟元素中的最后一个指定类型的元素。(注意和:last-child做区分) ? :nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个

    元素。 ? :nth-child(odd)或者:nth-child(2n+1) 奇数行、:nth-child(even)或者:nth-child(2n+2) 偶数行 ? :nth-last-child(n) p::nth-last-child(n) 同上,从最后一个子元素开始计数。 ?

    21420

    CSS3新特性应用之结构与布局

    和only-child、nth-child的应用 only-child:选择只有一个子元素的元素 nth-child:选择第几个元素 nth-last-child:选择第几个元素,从最后一个开始计数 选择指定兄弟元素 li:first-child:nth-last-child(n+6):nth-last-child(-n+8)分析: first-child:选择第一个元素 nth-last-child (n+6):选择从最后一个开始计数的,下标大于6的元素 nth-last-child(-n+8):选择从最后一个开始计数的,下标小于8的元素 选择有6 - 8个兄弟元素的li。 (4), li:first-child:nth-last-child(4)~li{ background: indianred; } li:first-child:nth-last-child(n+6):nth-last-child(-n+8), li:first-child:nth-last-child(n+6):nth-last-child

    30990

    我可能学到了“假”的CSS:伪类伪元素

    :last-child :only-child :nth-child() :nth-last-child() :empty :first-of-type :last-of-type :only-of-type } /*匹配不到*/ h2:last-child {} /*Pen*/ :nth-child() 和 not() 一样,:nth-child() 和 :nth-last-child() 也是函数式的伪类选择器 :nth-last-child() 和 :nth-child() 规则相同,唯一的区别在于从最后一个元素反向计算 :only-child 匹配相对于其父元素类型唯一的子元素 :empty 匹配空的元素 (),:nth-last-of-type() 基本用法和 *-child 一样 和 *-child 不同的是, 索引只针对选择器指定的类型,而非同级的所有兄弟元素 [2.5] 表单元素 :enabled :last-child :nth-child :nth-last-child :only-child :first-of-type :last-of-type :nth-of-type :nth-last-of-type

    39810

    CSS选择器笔记

    E:nth-child(n) 匹配其父元素的第n个子元素,第一个编号为1 34. E:nth-last-child(n) 匹配其父元素的倒数第n个子元素,第一个编号为1 35. E:nth-last-of-type(n) 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素 37. E:last-child 匹配父元素的最后一个子元素,等同于:nth-last-child(1) 38. E:only-child 匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) 41. :#f00; } tr:nth-child(2n+11) { background:#ff0; } tr:nth-last-child(2) { background:#ff0; } p:last-child

    23820

    这30个CSS选择器,你必须熟记(下)

    li:nth-child(odd) { background: red; } 浏览器兼容性 IE9+ Firefox 3.5+ Chrome Safari 23、 X:nth-last-child( n) :从后往前计算选择每第 n 个元素选择器 X:nth-last-child(n) 与 X:nth-child(n) 相反,这里从后往前数,比如你的元素很多,你不会一个一个从前往后数吧,li:nth-child (397),使用 nth-last-child 这个伪类更会方便些 代码示例: li:nth-last-child(2) { color: red; } 浏览器兼容性 IE9+ Firefox 3.5 X:nth-last-of-type(n):从后往前计算选择每第n个某种元素选择器 比如我们可以使用nth-last-of-type来选择倒数第n个元素。 方案3: 多种选择器的组合,示例代码如下: ul:first-of-type li:nth-last-child(1) { font-weight: bold; } 上述我们先找到页面的第一个ul

    22720

    css选择器

    3 :only-child p:only-child 选择属于其父元素的唯一子元素的每个

    元素。 3 :nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个

    元素。 3 :nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。 3 :nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。 3 :last-child p:last-child 选择属于其父元素最后一个子元素每个

    元素。 3 :root :root 选择文档的根元素。

    38160

    一个非常实用的CSS小技巧,帮你应对各种场景

    172, 163, 163); line-height: 98px; } /* 此处为重点要看的样式 */ .last 'child last' : 'child' el.innerHTML = v container.appendChild(el) }) </script> </body> </html> 上述代码中,假设我们不知道一共要往容器中添加多少个子元素,所以只能每次添加时都判断一下是否为最后一个,若是的话,就添加一个 last 类名用于清除 'child last' : 'child' el.innerHTML = v container.appendChild(el) + .child 表示选择类名为 child 之后的所有同一层级的类名为 child 的元素,因此第一个类名为 child 的元素是无法被选择到的,因此为了达到效果,我们选择为选择到的每个元素设置 border-top

    12710

    相关产品

    • 云服务器

      云服务器

      云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。 腾讯云服务器(CVM)为您提供安全可靠的弹性云计算服务。只需几分钟,您就可以在云端获取和启用云服务器,并实时扩展或缩减云计算资源。云服务器 支持按实际使用的资源计费,可以为您节约计算成本。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券