文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS3---first-child或者nth-child(1) 不起作用的原因

一、零碎      1、first-child、last-child、nth-child(n)、nth-child(2n)、nth-child(2n-1)、nth-child(odd)、nth-child...(even)、nth-last-child(3)（倒数第三个）           注意点： 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。           ...1、先找到该伪类调用者（元素）的父类           2、其次找到父类下的第n个子元素           3、最后看该子元素是不是1中的伪类调用者，如果是，则应用css，否则不应用          ...----》有时候first-child或者nth-child(1) 不起作用的原因 /*此时first-child不起作用，是因为.tap_con的父元素win的第一个子元素是.top，此时找到第一个子元素... ========================================================== .tab_con:first-child

3K50

css3 nth-child选择器

css3 nth-child选择器 css3的nth-child选择器，乍看起来很简单，其实不是那么容易。...但是:nth-child(n+m)中的n+m是从1开始计算的,也就是说子元素的起始计算序号是1，不存在0这样子的元素。第一个元素就是1，不是0。...这和程序里面的数组起始序号还有jQuery的选择器都是不一样的。 这样子就很好理解了。...当我们要选择哪些元素的时候，只要把参数根据n的递增算出来的值对应到子元素在父元素里面的位置序列就好了 比如查找第一个元素 :nth-child(1) 查找序列大于等于10的元素 :nth-child(n...+10) 就这样子的 css3中还有一些其他的子元素选择器 比如 :first-child // 第一个元素 :last-child // 最后一个元素 :nth-last-child // 从最后一个子元素开始计数

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

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

    其实很多时候我们都能用到css的选择器功能，比如调用N篇文章，想设置奇数行显示一种颜色，偶数行显示一种颜色，然后代码一般都是“foreach”循环语句，不建议直接写在代码里，那么css就能轻而易举的解决这个问题...简单用实例来给大家讲解下: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...:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一” .talklee li:nth-child(3n+1){background:#ddd} :last-child选取最后一个标签...(3){background:#ddd} :nth-child的这些用法在实际中很用得着，不用单独给需要选取的标签加上ID或Class，您学会了吗？

    84510

    【CSS3】CSS3 结构伪类选择器 ( E:first-child E:last-child 选择器 | E:nth-child(n) 选择器 | E:nth-of-type 选择器 )

    一、CSS3 结构伪类选择器 ---- 常见的 结构伪类选择器 : E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器 选择 匹配的父容器 中的 第一个 E 类型标签 子元素...: 该选择器 选择 匹配的父容器 中的 第 n 个 E 类型标签 子元素 ; E:nth-child(n) 选择器 缺陷 : 如果 父容器 中的子元素类型不同 , 那么使用 E:nth-child...父容器中第 n 个 E 类型标签 ; 二、E:first-child / E:last-child 选择器 ---- 1、E:first-child 选择器 E:first-child 选择器 : E...(n) 选择器 ---- 1、E:nth-child(n) 选择器语法说明 E:nth-child(n) 选择器 : 该选择器 选择 匹配的父容器 中的 第 n 个 E 类型标签 子元素 ; E:nth-child...(n) 选择器 : 该选择器 选择 匹配的父容器 中的 第 n 个 E 类型标签 子元素 ; E:nth-child(n) 选择器 缺陷 : 如果 父容器 中的子元素类型不同 , 那么使用 E:nth-child

    1.3K30

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

    在开发过程中，会碰到一些选择器的需求： 例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . .  等等。...我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。...下面介绍它们的使用方法： first-child first-child：选择列表中的第一个标签。...举例：第一行字体显示为红色，代码如下： li:first-child{     color: red; } last-child last-child：选择列表中的最后一个标签。...上面是几种比较常见的选择方法，我们还可以通过 CSS 更灵活的进行选择，有下面几种方法： nth-child(-n+n) nth-child(-n+n)：选择第 n 个之前的元素（此处的 n 是后面的那个

    4.5K00

    css选择器中:first-child与:first-of-type的区别

    http://www.cnblogs.com/2050/p/3569509.html :first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。...  匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素； 然后，在css3中又定义了:first-of-type这个选择器，这个跟:first-child有什么区别呢？...这里div有两个为span的子元素，匹配到的是它们中的第一个。 所以，通过以上两个例子可以得出结论： :first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。...:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。...同样类型的选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也可以这样去理解。 分类: css+html

    1.1K10

    CSS中:nth-child的用法

    做前端一定要记住:nth-child(2)这个选择器，它可以帮你轻松选择你想要的标签并给与修改添加样式 下面通过几个例子说明，相信你一看就明白 li:nth-child(2){background:#090...} :nth-child(2)表示选取第几个标签，”2可以是你想要的数字” li:nth-child(n+4){background:#090} :nth-child(n+4)选取大于等于4标签，”n”...表示从整数 li:nth-child(-n+4){background:#090} :nth-child(-n+4)选取小于等于4标签 li:nth-child(2n){background:#090}...:nth-child(2n)选取偶数标签，2n也可以是even li:nth-child(2n-1){background:#090} :nth-child(2n-1)选取奇数标签，2n-1可以是odd...} :last-child选取最后一个标签 li:nth-last-child(3){background:#090} :nth-last-child(3)选取倒数第几个标签,3表示选取第3个

    64710

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

    css3的nth-child选择器的详细探讨 前言 在十年前开始的div+css布局兴起之时,我就开始了CSS的学习和实践.在当年,对于CSS选择器,基本上是没有什么选择性的,只有ID选择器,CLASS...在那个蛮荒时代,各大浏览器对CSS的支持是相当那啥了.于是,我们为了实现一些效果,比如要控制列表中的最后一个元素,我们会给最后一个元素加上一个CLASS,来方便我们特殊处理.如果要做各行变色这种特殊效果...当我们把 nth-child 这个选择器用到极致的时候,可以说,我们在处理任何列表的时候,是不需要给这些列加上class的. 有哪些 nth-child ?...nth-child 不仅仅只有一个,而是有一系列的这样的选择器,可以供我们在各种情况下使用....提供的这些强大的选择器,可以让我们在具体的项目当中,灵活的运用.正是因为这些美好的CSS3属性,让我们前端工程师对于自己的工作是越来越喜爱了.

    50510

    在nodejs中创建child process

    在nodejs中创建child process 简介 nodejs的main event loop是单线程的，nodejs本身也维护着Worker Pool用来处理一些耗时的操作，我们还可以通过使用nodejs...注意，worker_threads创建的是子线程，而child_process创建的是子进程。 在child_process模块中，可以同步创建进程也可以异步创建进程。...子进程将会在message事件中，将该handle传递给Callback函数，从而可以在子进程中进行处理。...('connection', (socket) => { socket.end('由子进程处理'); }); } }); 可以看到子进程接收到了server handle，并且在子进程中监听...他们的区别就在于在windows的环境中，如果要执行.bat或者.cmd文件，没有shell终端是执行不了的。这个时候就只能以exec来启动。execFile是无法执行的。

    3.3K30

    CSS魔法堂：选择器及其优先级

    E:nth-last-child(n)：与E:nth-child(n)效果一样，只不过是反方向遍历。n从1开始。（IE5.5~IE8不支持）     5....（IE5.5~IE8不支持）     7. E:last-child：当E元素作为其父元素下最后一个子元素时，匹配成功。（IE5.5~IE8不支持）     8....（IE5.5~IE8不支持）     10.E:only-child：当E元素为其父元素下的唯一一个子元素，匹配成功。...（IE5.5~IE8不支持）   注意：nth-child(n)中n的合法写法如下   ①.纯数字，指定位置索引，索引从1开始；   ②.n，指定匹配所有位置索引，n会自动从0开始自增长，至于何时才停止就不得而知了...永远不要在全局CSS规则中使用;    2. 永远不要在自制的插件中使用;    3. 只在需要覆盖全局或外部插件的css规则（如Extjs、YUI插件的样式）的特定页面中才使用;    4.

    92460

    CSS3选择器（全部）

    CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，让编写代码更加轻松。...CSS3在CSS2的基础上新增了3个属性选择器，分别是E[attr^=”value”]、E[attr$=”value”]、E=[attr*=”value”]。...比如我们这里的这个demo，你想让列表中的第一个”li”具有与其他”li”有不同的样式，我们就可以使用:first-child来实现。...:not()表示否定伪类选择器，TA可以排除掉特定元素，TA和jQuery中的:not选择器用法一模一样。 ※当在浏览器中打开这个文件，在URL后面附加”#demo1“，以锚点方式链接到时，该元素的样式就会发生相应的变化

    73810
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券