last-child()和:在IE 8中不工作之后 - 腾讯云开发者社区

那些被遗忘的选择器在IE6~8“统治”网络世界的时代，CSS2版本曾经推出过几种选择器，而这几种选择器由于对IE6支持程度较差，使得前端开发工程师不得不将其舍弃。...，但是请务必注意：:first-child和:last-child并非“师出同门”。...:first-child是CSS2版本时代提出的伪类选择器，得到了IE7及IE7以上的各个主流浏览器的支持； :last-child是CSS3版本时代提出的伪类选择器，得到了IE9及IE9以上的各个主流浏览器的支持...当IE6逝去，IE8还“苟延残喘”之时，:last-child这种CSS3选择器还不能够在PC平台施展拳脚。...兄弟选择器语法 E ~ F {/* 样式代码 */} 代码含义：匹配任何在E元素之后的同级F元素。

6809 0

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

CSS 后代选择器很好用，让我们的工作变的更方便。但是 IE8 及以下对很多后代选择器并不兼容。...例如这6个比较常用的后代选择器： Child Selectors IE9 IE8 IE7 :first-child √ √ √ :last-child √ × × :nth-child(n) √ ×...一种方法是通过 js 把最后最后一项的边框值去掉，达到 last-child 的目的： if ($('html').hasClass('lt-ie9')) { $('[data-fix-last-child...因为 last-child 元素是没有紧跟这的元素的， element+element 为CSS2选择器。...举个栗子：我们希望在每条记录之间加上分隔符，一般会加 border-bottom 属性，但是最后一个下面不能有，我们可以使用 li+li 选择符，改用 border-top 属性即可实现。

2.5K1 1

您找到你想要的搜索结果了吗？

是的

没有找到

分享：12个CSS小技巧，让你的代码简洁高效

注：在IE11中要小心flexbox。...使用负的 nth-child 选择项目在CSS中使用负的 nth-child 选择项目1到项目n。...此外，IE /Edge没有 text-rendering 支持。...表格单元格等宽表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽： .calendar { table-layout: fixed; } 用Flexbox...摆脱外边距的各种hack 当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了： .list {

8612 0

12 个 Css 小技巧

注：在IE11中要小心flexbox。...此外，IE /Edge没有 text-rendering 支持。...对纯CSS滑块使用 max-height 使用 max-height 和溢出隐藏来实现只有CSS的滑块： .slider ul { max-height: 0; overlow: hidden; }...表格单元格等宽表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽： .calendar { table-layout: fixed; } 用Flexbox...摆脱外边距的各种hack 当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了： .list {

1.1K1 0

毕业一年左右的前端妹子面经总结

准备工作要做好，我是因为才去年毕业啦，所以集中准备在基础知识和目前在用的VUE框架这两块啦，其他的知识点我平时在撸代码的时候都有在做笔记，所以都会扫一遍知识点，其他的你实际工作中没有用到的但是比较流行的也不能忽略哦...面试知识点在面两个大公司和一个小公司的时候，尤其是一个传统行业的大型公司时，也有可能是我年限的问题，尤其注意基础，无论是笔试还是技术主管面试的时候都集中在这块，像原生JS、原生Ajax等，，(这些虽然我在工作中用的也不是很多...浏览器兼容性问题因为我的工作主要还在专注在web端，所以浏览器兼容性的问题没有少碰到过，因主要是兼容IE8以上以及其他各个浏览器，这个就当做总结一下吧(在被问到这一块的时候其实我是有加分的，因为回答的比较多.../safari -moz gecko引擎 firefox -ms- trident渲染引擎 IE -o- opeck渲染引擎 opera 过渡不兼容IE8，可以用JS动画实现 background-size...margin不一致的问题，解决方法就是给图片添加diaplay:inline即可 ie8不支持nth-child，但支持first-child和last-child，可以通过转化写法来处理问题，span

5212 0

CSS 中最后一行中元素如何向左对齐

子元素宽度不固定如果每一个子元素宽度不固定，那最后一行如何实现左对齐呢，有以下两种方法。 1. 弹性布局，两边对齐，最后一个元素的右边距设置为自动。...每行列数不固定如果每一行列数不固定，那最后一行如何实现左对齐呢，有以下两种方法。 1. 使用足够的空白标签进行填充占位，具体的占位数量是由最多列数的个数决定的，一行最多几列，就用几个空白标签。...占位的元素的 width 和 margin 设置得和子元素一样即可，其他样式都不需要写。由于占位元素高度为0，因此，并不会影响垂直方向上的布局呈现。...使用格子布局，有天然的间隙和对齐排布，因此，实现最后一行左对齐可以认为是天生的效果。...100px; height:100px; background-color: blue; } 格子布局需然很爽，但是 repeat() 函数有一定兼容性要求，在IE

1.9K1 0

【CSS】364- 让CSS flex布局最后一行左对齐的N种方法

方法一：模拟space-between和间隙也就是我们不使用justify-content:space-between声明在模拟两端对齐效果。中间的gap间隙我们使用margin进行控制。...例如： .list:last-child:nth-child(4n - 1)说明最后一行，要么3个元素，要么7个元素…… .list:last-child:nth-child(4n - 2)说明最后一行...大小设置得和.list列表元素一样即可，其他样式都不需要写。...如果项目需要兼容IE，则此方法需要斟酌。然后，适用范围最广的方法是使用空的元素进行占位，此方法不仅适用于列表个数不固定的场景，对于列表个数固定的场景也可以使用这个方法。...如果你有其他更好的实现，也欢迎反馈与交流，我会及时在文中更新。

8.2K6 2

【CSS】636- 你必须记住的30个css选择器

web设计者经常用它将页面中所有元素的margin和padding设置为0。*选择符也可以在子选择器中使用。...除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera 2....X:after和X:before 这两个伪类与content结合用于在元素的前面或者后面追加内容，看一个简单的例子： h1:after {content:url(/i/logo.gif)} 上面的代码实现了在...需要注意的是，在ie 6中，:hover只能用于链接元素。这里分享一个经验，在设定链接划过时出现下滑线时，使用border-bottom会比text-decoration显得更漂亮些。...如上图所示，唯一的问题是，边框将被应用到无序列表的顶部和底部-看起来很奇怪。让我们使用:first-child和:last-child伪类来解决此问题。

8783 0

一篇文章带你了解CSS Pseudo-classes(伪类 )

注：为了使这些伪类很好地工作，必须按正确的顺序将它们定义 - :link, :visited, :hover, :active, :focuss。...注意：要 :first-child在Internet Explorer 8和更早版本中工作，必须在文档顶部声明a 。...注意： CSS :last-child选择器在Internet Explorer 8和更早版本中不起作用。在Internet Explorer 9及更高版本中支持。...IE8仅在以下情况下支持 is specified. IE8仅在指定a的情况下支持。三、伪类和CSS类伪类可以与CSS类结合使用。在下面的示例中class="red"，带有的链接将显示为红色。 <!

2K1 0

20个常用的CSS技巧，收藏就是捡到

注意：在IE11中要小心flexbox。 6....使用负的 nth-child 选择项目在CSS中使用负的 nth-child 选择项目1到项目n。...此外，IE /Edge没有 text-rendering 支持。 10....表格单元格等宽表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽： .calendar { table-layout: fixed; } 13....用 Flexbox 摆脱外边距的各种 hack 当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了：

4243 0

常用的 CSS 技巧

注意：在IE11中要小心flexbox。...使用负的 nth-child 选择项目在CSS中使用负的 nth-child 选择项目1到项目n。...此外，IE /Edge没有 text-rendering 支持。...表格单元格等宽表格工作起来很麻烦，所以务必尽量使用 table-layout: fixed 来保持单元格的等宽： .calendar { table-layout: fixed; } 用 Flexbox...摆脱外边距的各种 hack 当需要用到列分隔符时，通过flexbox的 space-between 属性，你就可以摆脱nth-，first-，和 last-child 的hack了： .list {

7160 0

干货：CSS 专业技巧

使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格。...垂直居中任何元素不！...注意： IE11 对 flexbox 的支持有点 bug。...利用 Flexbox 去除多余的外边距与其使用 nth-， first-，和 last-child 去除列之间多余的间隙，不如使用 flexbox 的 space-between 属性： .list...使用选择器 :root来控制字体弹性在响应式布局中，字体大小应需要根据不同的视口进行调整。

1.5K5 0

css3 选择器

CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有...这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器，这一点大家在使用中千万要小心加小心。...对于:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。...同样在IE6-8和FF3.0-浏览器不支持“:nth-last-child()”选择器。...； IE6-8和FF3.0-浏览器不支持:only-of-type选择器。

5381 0

CSS3选择器（全部）

(不支持ie6~ie8)。 :nth-of-type()的用法和:nth-child的用法是一样的，不同的是:nth-of-type()指定了元素的类型。...(不支持ie6~ie8)。 :nth-last-of-type()的用法和:nth-last-child()的用法是一样的，不同的是:nth-last-of-type()指定了元素的类型。...(不支持ie6~ie8)。和:first-child类似，不同的是指定了元素的类型，用的不多。 ⑧:last-of-type:选择一个上级元素下的最后一个同类子元素。(不支持ie6~ie8)。...和:last-child类似，不同的是指定了元素的类型，用的不多。 ⑨:only-child:选择的元素是他的父级元素的唯一子元素。(不支持ie6~ie8)。...例如，下面的表单，input:enabled选择器只匹配文本框，不匹配按钮。

7381 0

【CSS3】CSS3 3D 转换示例 - 盒子模型翻转示例 ( 开启透视视图 | 设置过渡动画 | 设置 3D 呈现样式 | 鼠标移动到控件上方效果 | 设置两个子盒子模型背靠背效果 )

这个距离会影响 3D 转换元素的视觉效果 , 具体效果就是 " 近小远大 " ; 如果不设置透视视图效果 , 那么整个三维空间中 , 不管多远 , 显示的标签盒子大小都一样 ; 设置过渡动画...first-child { /* 使用绝对定位 */ position: absolute; } .box div:last-child...user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"> ie...*/ /* z-index: 1; */ } .box div:last-child { /* 使用绝对定位...>正面背面展示效果默认的正面显示效果 : 鼠标移动到盒子模型上之后 , 会绕

3900 0

这30个CSS选择器，你必须熟记（下）

为了兼容现有的样式标准，CSS1和CSS2里使用单冒号来表示伪元素（比如:first-line，:first-letter，:before和:after）浏览器兼容性 IE6+ Firefox Chrome...这样的话第一个和最后一个元素并不需要这么设置区分分割线。我们会通过给第一个和最后一个元素添加样式来解决。稍后我会给到示例。...X:last-child：最后一个子元素选择器有第一个子元素选择器，自然会有最后一个子元素选择器，示例代码如下： ul > li:last-child { color: green; } 比如下面一个例子...方案2 ：使用紧邻同胞选择器 p + ul li:last-child { font-weight: bold; } 上述代码先找到紧跟在p后面的ul，然后找到li序列的最后的元素。...，在实际中去理解和运用，印象才能深刻。

5522 0

css选择器攻略

，e~f 之后的所有，卡可以选择多个；后面三个兼容ie7+ 目标伪类选择器 e:target 针对连接到的部分，兼容ie9+ 动态伪类：linked,:visited,:active,:hover...,:focus 其中active和focus 兼容8+支持语言伪类 :lang(en)可以针对不同语言，兼容ie8+ ui元素状态伪类：checked,:enabled,:disabled ,...兼容ie9+ 结构伪类数量最多的一类，：first-child(css2),:last-child(css3),nth-child(n)筛选第几个，nth-last-child,nth-of-type...(n),:root,:only-child,:empty ,等，兼容ie9+ 否定伪类：not() 针对性排除，兼容ie9+ 伪元素伪元素在新的规范中为双冒号，为了区别伪类，ie6-8只识别单冒号...整体建议还是不要为了使用新的选择器而使用，要找到对应的使用场景，多使用基本选择器能避免低版本ie的适配问题。使用适配的脚本文件，实现让ie6-8ie6-8支持属性选择器，伪类选择器和伪元素。

1.1K3 0

这30个CSS选择器，你必须熟记（下）

为了兼容现有的样式标准，CSS1和CSS2里使用单冒号来表示伪元素（比如:first-line，:first-letter，:before和:after）浏览器兼容性 IE6 Firefox Chrome...这样的话第一个和最后一个元素并不需要这么设置区分分割线。我们会通过给第一个和最后一个元素添加样式来解决。稍后我会给到示例。...X:last-child：最后一个子元素选择器有第一个子元素选择器，自然会有最后一个子元素选择器，示例代码如下： ul > li:last-child { color: green; } 比如下面一个例子...方案2 ：使用紧邻同胞选择器 p + ul li:last-child { font-weight: bold; } 上述代码先找到紧跟在p后面的ul，然后找到li序列的最后的元素。...，在实际中去理解和运用，印象才能深刻。

7520 0

从零开始学 Web 之 CSS3（一）CSS3概述，选择器

E:last-child ：查找E元素的父元素中最后一个指定类型的子元素 /*下面这句样式查找：li的父元素中的第一个li元素 1.相对于当前指定元素的父元素 2.查找的类型必须是指定的类型*/ li:...first-child{ color: red; } li:last-child{ background-color: skyblue; } 注意：在查找的时候并不会限制查找的元素的类型，也就是如果第一个元素不是...必须添加 content , 哪怕不设置内容，也需要content:""，否则不会起作用。...E::before：定义在一个元素的内容之前插入 content 属性定义的内容与样式。 E::after：定义在一个元素的内容之后插入 content 属性定义的内容与样式。...注意： IE6、IE7与IE8（怪异模式Quirks mode）不支持此伪元素 CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念，CSS3中提出伪元素的概念 E:

8493 0

【CSS3】CSS3 3D 转换 ⑤ ( 3D 呈现效果 - transform-style 属性 | transform-style 属性语法 | 设置透视视图效果 | 结构伪类选择器 )

transform-style 属性语法父盒子中如果有子盒子 , 假如父盒子有 3D 变换的效果 , 那么子盒子的 3D 效果则需要使用特殊的属性 transform-style 进行设置 ; 在...CSS3 样式中 , 使用 transform-style 属性定义在 3D 空间中呈现被 3D 转换的父元素元素的子元素是否继承父容器的 3D 变换效果 ; transform-style...{ /* 设置透视视图效果 */ perspective: 500px; } 设置后的效果如下 : 设置父容器 3D 呈现效果在...选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 ) 博客 , 选择 .box 类标签下的第二个 div 子盒子 , 可以使用 .box div:last-child...user-scalable=no,maximum-scale=1.0,minimum-scale=1.0"> ie

8381 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

IE6已逝，遗忘在角落的选择器，赶快用起来

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

分享：12个CSS小技巧，让你的代码简洁高效

12 个 Css 小技巧

毕业一年左右的前端妹子面经总结

CSS 中最后一行中元素如何向左对齐

【CSS】364- 让CSS flex布局最后一行左对齐的N种方法

【CSS】636- 你必须记住的30个css选择器

一篇文章带你了解CSS Pseudo-classes(伪类 )

20个常用的CSS技巧，收藏就是捡到

常用的 CSS 技巧

干货：CSS 专业技巧

css3 选择器

CSS3选择器（全部）

【CSS3】CSS3 3D 转换示例 - 盒子模型翻转示例 ( 开启透视视图 | 设置过渡动画 | 设置 3D 呈现样式 | 鼠标移动到控件上方效果 | 设置两个子盒子模型背靠背效果 )

这30个CSS选择器，你必须熟记（下）

css选择器攻略

这30个CSS选择器，你必须熟记（下）

从零开始学 Web 之 CSS3（一）CSS3概述，选择器

【CSS3】CSS3 3D 转换 ⑤ ( 3D 呈现效果 - transform-style 属性 | transform-style 属性语法 | 设置透视视图效果 | 结构伪类选择器 )

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐