前端培训丁鹿学堂：css伪类选择器（一）

css结构伪类 :nth-child(n)

css结构伪类是css比较复杂的选择器。了解了怎么使用以后可以在实际项目中更高效率的写样式。
:nth-child(n) 表示当前元素向上查找的父元素的第n个元素
向上再向下，就是当前的元素范围查找第n个

    <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
<style>ul li:nth-child(1){color:red}
</style>

:nth-child(2n)

这里的n是变量，但是是固定写法，不能写2a，2b，2c，表示选择所有的偶数元素

:nth-child(2n+1)

同上，这里表示选中所有的奇数元素

:nth-child(-n+5)

这个表示选择元素的前5个，-n是固定写法。后面的要选择前x个就+x

:nth-last-child(n)

这个用法和:nth-child是一样的，不过nth-child 是从前往后数，而nth-last-child是从后往前数

结构伪类之:nth-type-of(n)

当父元素下面的元素类型不一样的时候，nth-type-of会排除其它类型，而去选择排除后的某个类型的元素的第n个

    <div><span>1</span><span>2</span><span>3</span><p>p4</p><span>span4</span></div>

上面的结构，如果用 div span:nth-child(4) 他不会去排除，而是选第4个，发现第四个是p而不是span，则选不中，没有符合的
如果是用div span:nth-type-of(4) 则会忽略p，直接找第4个span，就会找到span4这个元素了去写样式了

nth-last-type-of

就是从后面往前数，使用方法和nth-type-of是一样的

前端培训丁鹿学堂：css伪类选择器（一）相关推荐

前端学习（219）:css伪类选择器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/str ...
前端培训丁鹿学堂：vue3之计算数据和watch监听深入
setup函数深入 setup会在beforeCreate之前执行一次,它里面的this指向是undefined setup的参数 1.props 用于在setup函数中使用父组件传递的属性 2.co ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字实例说明 :link a:link 选择所 ...
css伪类选择器，:link、:visited、:focus、:hover、:active、:first-child
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪类选择器伪类选择器用于表达在某种状态下的元素. 包括:link.:visited.:focus.:hover.:active ...
CSS 伪类选择器详解：为网页添加交互与美感
介绍 CSS 伪类选择器是一种非常有用的 CSS 选择器,它能够根据元素的状态.位置或其他属性来选择元素并应用样式.伪类选择器的语法为 :pseudo-class,其中 pseudo-class 是一 ...
CSS伪类选择器nth-child 选择3的倍数个元素写法
CSS伪类选择器nth-child 选择3的倍数个元素写法 web开发中,经常有对列表的3倍数列表项单独设置样式的需求. ul li:nth-child(3n+3) { colo ...
html引入scss,使用Sass混合宏来声明CSS伪类选择器
CSS3在选择器方面添加伪类选择器这方面的特性,比如:nth-child(n).:nth-of-type(n)这样的选择器,其好处在这里就不多说了.如果你对这方面感兴趣的话,你可以阅读早前整理有关于C ...
用CSS伪类选择器做一个爱心
用CSS伪类选择器做一个爱心这里我们会用到 position:relative:相对定位 position:absolute;绝对定位 border-radius:圆角属性 transform:变换 ...