:nth-last-of-type(n)和:nth-last-child(n) 与:nth-of-type(n)和:nth-child(n)基本一致,只是从后面开始计数 结合:nth-last-child(n)与:first-child可以匹配出列表中不同元素数量的不同样式 比如:nth-last-child(3):first-child表示从后往前数选中第3个子元素,同时也是第一个元素,那么就可以判断改列表...
1.nth-child:按照个数来算。 nth-of-type:按照类型来计算,如果是class那么碰到不同类型的,单独一类,符合条件的选中。 2.在不指定类型时,nth-child(n)选中的是父元素下的第N个子元素。nth-of-type(n)选中的是父元素下的不同类型标签的第N个。 3.ele:nth-child(n)要求不仅仅是第n个子元素,并且这个子...
虽然它使用JavaScript，但您可以在不更改标记的情况下对奇数元素进行样式化：
如何通过css选择器直接选取到最后一个class属性为dialog的元素?方式一:#app .dialog:nth-child(3)但是感觉这个方法不太灵活,毕竟是获取的#app元素下所有的.dialog元素,然后通过nth-child再去拿到对应的元素。如果#app里面的子节点,孙节点等都含有这个dialog元素的话,那么必须要对页面结构非常的熟悉才能通过nth-child...
The :nth-of-type() pseudo-class selects the elements of the same type based on their index. The :nth-of-type() can be specified by a number, a keyword, or a formula. The :nth-of-type selector is similar to :nth-child but there is a difference: it is more specific. The :nth...
.ul li:nth-child(2) { color: red; } /*ul下的第2个li*/ .ul li:nth-of-type(2) { color: green; } zero one <!-- red --> two <!-- green--> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. ...
虽然它使用JavaScript，但您可以在不更改标记的情况下对奇数元素进行样式化：
我给:nth-of-type(3)的元素设置了字体颜色,可以看到,第3个class='pp'的p元素和class='pp'的span元素的字体颜色都发生了改变,因为:nth-of-type是根据标签类别排序的,所以存在多个选择的情况 总结啦 虽然.pp:nth-child(3)和.pp:nth-of-type(3)这两种写法,都是先写了选择器,后排序选择,但是我觉得应该是...
:nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) :optional :out-of-range :required ::selection :target :valid 浏览器兼容 :fullscreen ::placeholder :read-only :read-write ::selection 注意事项 区分大小写 不要以数字开头 锚伪类 区别 id 选择器与类选择器的区别 ...
nth-of-type和nth-child的区别我这里就不说了,只说nth-of-type。 首先我们设定下面这样一个结构,然后通过下面四个例子真正理解nth-of-type 1.这是div 2.这是div.common 3.这是p.common 4.这是div.common 5.这是p.common 一、通过div标签选择第2个div div:...