使用行内式设置first-child，nth-child，last-child

原创 于 2023-02-24 11:45:00 发布 · 530 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

在编程时遇到一个模块，由于样式简单，选择了行内式而非less文件。当需要使用nth-child选择器时，提出了一种方法：通过变量配置的行内样式处理last-child的样式，并利用数据长度和当前索引对内容样式进行动态操作，适应于Angular框架。

今天coding的时候遇到一个模块，因为样式内容少所以没使用less文件而是使用行内式，结果又要使用nth-child，于是想到一个方法可以适用
以我想要额外设置last-child的样式为例
在这里插入图片描述
内容一的话根据使用可通过变量配置的style行内式语法来配置需要的样式
使用内容二的data长度与当前index对内容样式进行操作

(我这边例子中使用的是angular语法，自己根据使用的框架的语法相对套进去即可)

【鸿蒙开发从0到1-day03】
qq_63713328的博客
08-31 912
本章主要学习盒子模型的一些操作,内外边距,绘制圆形,胶囊形状的盒子,盒子模型的一些塌陷问题,margin的合并问题,以及详细的解决这些问题的方法
Tailwind CSS 学习笔记(四)
u011575498的博客
03-24 1465
2.5.1、使用任意变体2.5.2、创建插件。
表格nth-child设置行列样式
生而为人我很抱歉
08-10 1569
table tr:nth-child(odd){background:#efefef;}#奇数行 table tr:nth-child(even){background:#efefef;}#偶数行 table td:nth-child(odd){color:red;}#奇数列 table td:nth-child(even){color:black;}#偶数列 table tr:nth-child(
css nth-child( ) 的各种常见写法
lszyzs的博客
08-23 1120
ul li:nth-child(odd){background-color:green;}/设置单行样式/ ul li:nth-child(even){background-color:gray}/设置双行样式/ ul li:nth-child(3n){background-color:green;}/* 3,6,9,12… */ ul li:nth-child(4){background-color:green;}/单独设置第四个li/ ul li:nth-child(3n+2){background-c
first-child first-of-type last-child last-of-type 伪类选择器总结
JiM-W 的博客
01-16 876
伪类选择符E:first-child{ } :。 ；E:first-of-type{ }
:last-child | CSS属性参考
初晴
09-19 1970
CSS :last-child伪类选择器用于匹配父元素中的最后一个子元素。 :last-child伪类选择器仅仅会匹配某个父元素中的最后一个子元素，例如： article>   p>     第一个段落...   p>   p>     第二个段落...   p> article>
CSS引入方式: 行内式、内嵌式、链接式和导入式
icontent
05-09 913
转自：http://www.pinlue.com/article/2019/04/1503/138670718637.html
HTML5中 :first-child选择器用于为父标签中的最后一个子标签设置样式。这句话对不对
最新发布
06-20
首先，用户的问题是关于CSS的:first-child选择器是否用于为父元素中的最后一个子元素设置样式。用户明确问：“HTML5:first-child选择器是否用于父元素最后一个子元素样式”，意思是:first-child选择器是否适用于父...
帮我出十道和CSS3和浮动、定位、弹性布局、nth-child、css选择器、css定义、css引入方式的高难度判断题
09-18
:first-child选择器用于选择第一个子元素，那么:last-child选择器用于选择什么样的元素？ 答案：:last-child选择器用于选择最后一个子元素。 10. 在CSS中，可以通过选择器的组合来选择特定的元素。例如，选择class...
CSS基础班笔记(三)
m0_61083409的博客
02-21 238
web前端剑法之css ??web前端剑法之css 地址 ??CSS基础班笔记(一) https://blog.youkuaiyun.com/Augenstern_QXL/article/details/115560532 ??CSS基础班笔记(二) https://blog.youkuaiyun.com/Augenstern_QXL/article/details/115560502 ??CSS基础班笔记(三) https://blog.youkuaiyun.com/Augenstern_QXL/article/details/115726
CSS选择器 :first-of-type/:last-of-type/ :first-child/:last-child 用法
momo_mom177的博客
04-07 1183
官方链接：CSS3 :first-of-type 选择器 <div class="parent"> <span class="child child1">child1</span> <span class="child child2">child2</span> <div class="child child3"> child3 <div>child3-1</div>
:nth-child和:nth-of-type的区别
潜行IT的博客
10-10 7593
:nth-child()表示父元素下的第n个子元素。比如div p:nth-child(2)表示div下的第二的元素、如果不是p元素则没有匹配的元素 　:nth-of-type()表示父元素下的第ｎ个类型的元素　比如div p:nth-of-type(2)表示div下的第二个ｐ元素。 基本代码如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;hea...
CSS基本语法和选择器的使用
1900's 88 keys的博客
10-08 1607
目录CSS的使用方法内联样式（Lnline Style）内部样式表(Lnternal Style Sheet)外部样式表(External Style Sheet)CSS的选择器使用基本选择器通用选择器元素选择器类选择器ID 选择器复合选择器交集选择器并集选择器后代选择器子元素选择器相邻兄弟选择器通用兄弟选择器伪元素选择器::first-line::first-letter::before::after::selection伪类选择器动态伪类选择器:link:visited:hover:activeUI伪类
CSS基础②
weixin_66768178的博客
04-29 562
1、什么是CSS3层叠样式表 Cascading Style Sheet层叠样式表，可以通过多个样式去表现。 2、div属于块级元素，占一整行。 3、span属于行内元素，出现新的span并不会换行。 <div>元素</div> <div>元素</div> <span>元素</span> <span>元素</span> 样式如上 4、CSS的基本语法结构 <style&g
CSS学习
Hermione_m的博客
12-03 1925
CSS学习 CSS样式规则和基本选择器 CSS样式规则 选择器{属性:属性值; 属性:属性值;} --------- 声明 在上面的样式规则中: 1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。 2.属性和属性值以“键值对”的形式出现。 3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。 4.属性和属性值之间用英文“:”连接。 5.多个“键值对”之间用英文“;”进行区分。 可以用段落和表格的对齐的演示。
学习之路：css基本语法
mmccjin的博客
03-19 367
话不多说，继续行走我的新手之路 这次想给CSS的基础语法做个大概总结与归纳。 语法 selector{property:value} 选择器 { 属性 : 值} 引入方式 1.行内样式 <div style = "color:red">hello world</div> 2.嵌入式 p{ color:red; } 3.链接式 将外部写好的格式引入，“xxx.css"为预先写好的CSS文件 <link rel="stylesheet" hr
CSS三种引入方式，选择器，伪类
weixin_57727027的博客
02-28 913
CSS三种引入方式，选择器，伪类 ——CSS有三种不同的引入方式 行内样式表，内部样式表，外部样式表。 ​ 行内样式是通过style属性引入CSS样式 eg： ​ 内部样式表是在style标签里面写CSS样式 eg： ​ 外部样式表是将CSS代码保存到外部的CSS的文件里面，HTML文件通过link标签引用该CSS样式表。 eg： ——CSS选择器 选择器 1、CSS样式的语法格式： p {color:red;} 元素选择器(元素选择器是最简单的选择器) 选
CSS学习笔记（学习中）
a2028535133的博客
03-10 707
HTML 多媒体与语义化标签 图片标签 。。。。。。。。。。。 相对路径 相对路径：描述从网页出发，如何找到图片。 <img src="images/gugong.jpg"> 随着网页和图片的位置关系不同，插入图片的代码随之改变 如果需要回退层级，使用../这样的写法 绝对路径 绝对路径：描述图片精准地址。 <img src="https://i0.hdslb.com/bfs/feed-admin/9a30607625e6c07da570bb2eb07ebdcc4b2
html行内样式选择器怎么写,巧用CSS伪类选择器实现九种样式的九宫格
weixin_34305091的博客
06-03 1909
三剑客传说在前端界有这么三剑客——HTML、CSS、JavaScript。HTMLHTML——无非就是一些标签，配上一些属性，算不上编程语言，所以可能很多人对其是看不上眼的，小学生都会，但其实HTML只是深藏不露。如果它使出“语义化”大概很多人，包括很多工作多年的前端er们都要“死”在它的刀下。更别说都9012年了还div/span一把梭的还大有人在。虽然关于HTML的语义化也值得学习研究和讨论。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值