nth-child选择器与style标签的位置

最新推荐文章于 2023-02-07 00:30:00 发布
最新推荐文章于 2023-02-07 00:30:00 发布
阅读量324 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35496505/article/details/86595970
版权

我一直以为style标签的位置是可以看心情的,毕竟写到heml标签外边,浏览器也认

直到有一天,我写出了这样的无聊代码

变红的竟然不是第五个p,而是第四个,

聪明如我,略一思索,果断给style标签换一下位置,此过程只掉了半根头发

这是为啥呢?可能是因为stye标签属于父元素的一个子元素吧

直觉告诉我,这个nth-child,没那么简单

于是,常尝试了一个下午之后,我果断放弃

毕竟,谁没事写像下边这样的代码,加一个class不香吗

qq_35496505
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于:nth-child(n)伪类的一些理解
opt1997的博客
09-26 1444
要想知道nth-child(n)到底作用到了哪些标签上，我们就不得不从选择器开始说起。 选择器 当我们使用了选择器，到底选中的是什么? 结论：不论选择器多复杂，最终选择到的都是标签 举一个例子：html的代码如下： 首先来看个简单的CSS代码： body {} 十分明显，我们这里选择的是body标签。如果再加一点： body ul{} 显而易见，我们这里选择的是body里所有的ul。也就是说...
style中的选择器
Shao_yihao的博客
10-15 2023
用style中的color属性修改颜色。注意：style声明应以分号结尾。 <h1 style = "color : red;"> XXX </h1> 这是指定元素样式的一种方法，除此之外还可以在代码的顶部，创建一个 style 声明区域： <style> h1 { color: red; } </style> 除了指定对某种标签实现某种效果之外，还可以自定义一个class选择器来实现更灵活的使用该效果，多个 HTML 元素可以使用相同的
CSS中的:nth-child，:first-child，:last-child
12-30 1999
【代码】CSS中的:nth-child。
CSS学习笔记——样式书写位置
weixin_43900407的博客
01-25 1602
1.内部样式表（内嵌式） 将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，style标签一般放在head标签中，也可以放在HTML文档的任何地方。 <style type="text/CSS"> div { font-size:24px; color:red; } </style> 2.内联样式（行内式） 通过标签的...
CSS中的nth-child()属性
热门推荐
欢欢的博客
10-27 3万+
first-child、last-child、nth-child、nth-last-child、nth-of-type first-child，last-child可直接使用，例如 ul li:first-child，ul li:last-child， 但是其余的选择都需要在后面加入()，例如ul li:nth-child(n); ->选中ul元素下面第n个li元素，且n是从1开始的，这里和JavaScript中的eq()不同，eq选择也是从第1个开始的，但是索引值是从0开始 1、fi...
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
`nth-child()`选择器是CSS3引入的一个强大工具，允许我们根据元素在同级元素中的位置来应用样式。例如，`nth-child(1)`会选择父元素的第一个子元素，`nth-child(3)`会选择第三个子元素。然而，这个特性在IE8及以下...
使用css属性:nth-child(n)匹配选择第n个子元素
12-13
加入要让第二个 th 占table表格总宽度的50%. 复制代码代码如下: <...:nth-child(n) 选择器匹配属于其父元素(在这里就是tr)的第 N （这里选择第2个）个子元素（这里子元素是th），不论元素的类型。
jQuery+css last-child实现选择最后一个子元素操作示例
10-17
// 使用:last-child选择器 $('div p:last-child').addClass("red"); // 这段代码将选择所有div元素内的最后一个直接子元素p，即使其他div内也有同名的p元素，只有每个div内的最后一个p会被选中 }); <p>...
CSS中的各种选择器与样式优先级小结
09-24
- 元素选择器（如`div`）：根据元素标签名称定位。 - 类选择器（如`.class`）：根据元素的class属性值定位。 - ID选择器（如`#id`）：根据元素的ID属性值定位，ID在页面中应具有唯一性。 - 通配符选择器（如`*`...
excel-style-demo2.rar
01-21
`来实现无间隙的边框，使用`:nth-child()`选择器来为奇偶行添加不同的背景色。 3. **JavaScript库** 多个JavaScript库，如Handsontable、ag-Grid、Datatables等，提供了更高级的功能，如排序、过滤、分页等，同时...
html面试题：关于在h5中style标签所处位置带来的影响
lalala_dxf的博客
02-07 1457
前面两者样式使用的位置基本是固定的，第三个嵌入式的位置可以随意插入到文档的任意位置，页面都能够将样式渲染出来。你可以将style标签放在head标签中，也可以将之放到body标签之内任何一个位置，也可以放在body结束标签之后，html结束标签之前，甚至可以放在html结束标签之后。，假如你把style标签放置在body标签中，或者放到html结束标签之后，当文档加载解析到了style标签的时候，发现他给页面的某些标签设置了样式，于是浏览器。，在这个过程中，时间明显的浪费了，这也就导致页面的加载速度变慢。
HTML中style标签和script标签的存放位置
小特
07-22 8582
html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。所以，一般将script放在body之后是因为避免长时间执行script脚本而延迟阻塞。而有一些页面的效果的实现，是需要预先动态的加载一些js脚本，所以这些脚本应该放在...
详解CSS3中:nth-child的用法
aa_mmnn的博客
09-10 1955
CSS3中:nth-child的实际用途：不适用低版本的IE浏览器！ （1）:nth-child(n + 4)选取大于等于4的标签，其中"n"为整数，下同 .demo01 li:nth-child(n+4){background:#090} （2）:nth-child(-n + 4)选取小于等于4的标签 .demo01 li:nth-child(-n+4){background:#090} （3）:nth-child(2n)选取偶数标签，其中的2n也可以写
css 使用 :nth-child() 实现斑马条纹、对齐边缘、指定区间列表高亮、动态列表自适应布局
朝阳39的博客
12-22 555
:nth-child() 伪类选择器通常用于动态列表/表格 斑马条纹表格 table { border-spacing: 0; width: 300px; text-align: center; border: 1px solid #ccc; } tr { background-color: #fff; } tr:nth-child(even) { background-color: #eee; } 对齐边缘 li { float: left;
CSS基本语法和选择器的使用
1900's 88 keys的博客
10-08 465
目录CSS的使用方法内联样式（Lnline Style）内部样式表(Lnternal Style Sheet)外部样式表(External Style Sheet)CSS的选择器使用基本选择器通用选择器元素选择器类选择器ID 选择器复合选择器交集选择器并集选择器后代选择器子元素选择器相邻兄弟选择器通用兄弟选择器伪元素选择器::first-line::first-letter::before::after::selection伪类选择器动态伪类选择器:link:visited:hover:activeUI伪类
html实现各行变色nth,利用CSS选择器nth-child实现隔行设置不同样式
weixin_33754744的博客
07-02 608
奇葩老板就会有奇葩需求，他要求像上图一样，每两行用一条横线隔开，但这是循环出来的呀，怎么才能每隔一行选中5个呢？可以用 CSS 选择器 nth-child 来实现：nth-child 有不少扩展应用，比如：nth-child(odd)匹配奇数个(1、3、5)。nth-child(odd) 匹配偶数个(2、4、6)。nth-child(3n) 匹配3的倍数个(3、6、9)。nth-child(3n...
带你熟练掌握 css 基础
qq_54219272的博客
02-19 2854
Css 基础 文章目录Css 基础一、Css是什么二、基本语法规则2.1 css的注释2.2 格式规范三、选择器的种类四、基础选择器4.1 标签选择器4.2类选择器 （常用选择器）4.3 id 选择器4.4 通配符选择器五、复合选择器5.1 后代选择器5.2 子选择器5.3 并集选择器5.4 伪类选择器六、字体属性七、文本属性八、背景属性九、圆角矩形十、元素的显示模式十一、盒模型十二、弹性布局 一、Css是什么 ​ 层叠样式表：同一个元素上可以应用多种样式。这些样式之间会产生叠加，从而实现页面变得更好看效果
nth-child 实用技巧
大概关于
01-16 6479
nth-child 是 CSS 里，一个不太注目、但在某些场景下很实用的选择器，本文记录码者搬砖过程中使用 nth-child 的一些案例。 选择器是什么 类似： #container 选择页面上 id 为 container 的元素 .wrapper 选择别面上 class 为 wrapper 的元素 p 选择页面上所有 p 元素 … nth-child 同以上这些一样，只不过没那么常见...
php里style标签,style标签怎么用？
weixin_42303107的博客
03-11 2826
style标签的用法是：1、style标签放在head标签里；2、作为属性放在元素的开始标签中，每个属性值之间使用【;】分开；3、使用属性color，添加style属性的字体颜色。style标签的用法是：1、style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 ...
nth-child选择器最后一个
最新发布
08-16
:nth-child选择器最后一个可以使用:nth-last-child(1)来选择。这个选择器会选取父元素的最后一个子元素。所以如果想要选择最后一个标签，可以使用:nth-last-child(1)。 [1<span class="em">1</span><span class="em...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值