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

最新推荐文章于 2024-08-19 17:04:41 发布
最新推荐文章于 2024-08-19 17:04:41 发布
阅读量376 收藏
点赞数
分类专栏： 常见问题 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smallnut/article/details/129197766
版权
在编程时遇到一个模块，由于样式简单，选择了行内式而非less文件。当需要使用nth-child选择器时，提出了一种方法：通过变量配置的行内样式处理last-child的样式，并利用数据长度和当前索引对内容样式进行动态操作，适应于Angular框架。
摘要由CSDN通过智能技术生成

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

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

花心小坚果
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css nth-child( ) 的各种常见写法
lszyzs的博客
08-23 1007
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
表格nth-child设置行列样式
生而为人我很抱歉
08-10 1470
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(
:last-child | CSS属性参考
初晴
09-19 1779
CSS :last-child伪类选择器用于匹配父元素中的最后一个子元素。 :last-child伪类选择器仅仅会匹配某个父元素中的最后一个子元素，例如： article>   p>     第一个段落...   p>   p>     第二个段落...   p> article>
CSS引入方式: 行内式、内嵌式、链接式和导入式
icontent
05-09 849
转自：http://www.pinlue.com/article/2019/04/1503/138670718637.html
CSS选择器 :first-of-type/:last-of-type/ :first-child/:last-child 用法
momo_mom177的博客
04-07 1022
官方链接：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 6870
: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...
first-child first-of-type last-child last-of-type 伪类选择器总结
JiM-W 的博客
01-16 783
伪类选择符E:first-child{ } :。 ；E:first-of-type{ }
CSS3-标签集合.pdf
08-11
伪类选择器如`:first-child`、`:last-child`、`:nth-child(n)`和`:nth-of-type(n)`等，提供了基于元素位置的样式应用。 在CSS3中，字体和文本样式有了更多控制选项。`font-family`可以设置字体系列，`font-size`...
css-知识点简介与梳理
08-21
结构伪类选择器如:first-child、:last-child和:nth-child等，能够根据元素在父元素中的位置来选择元素。UI伪类选择器则涉及表单元素的状态，例如:enabled、:disabled、:checked等。 伪元素选择器则允许对元素的特定...
web前端基础——CSS入门
01-20
- 结构伪类选择器：`:first-child`、`:last-child`、`:nth-child(n)`、`:nth-last-child(n)`，用于选择元素的特定子元素。 - 目标伪类选择器：`:target`，用于选择URL锚点指向的元素。 3. 字体样式： - `font-...
css选择器.docx
10-14
- **结构性伪类**，如`:first-child`,`:last-child`,`:nth-child(n)`,`:nth-last-child(n)`,`:only-child`,`:root`,`:empty`,`:first-of-type`,`:last-of-type`,`:nth-of-type(n)`,`:nth-last-of-type(n)`,`:only-...
css常用属性速查表1
08-04
- `:last-child`、`:nth-child(n)`、`:nth-last-child(n)`、`:only-child`等用于选取特定位置的子元素。 6. **属性选择器**： - `[attribute^=value]`选取属性值以指定字符串开头的元素。 - `[attribute$=value]...
CSS基本语法和选择器的使用
1900's 88 keys的博客
10-08 631
目录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 465
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 1745
CSS学习 CSS样式规则和基本选择器 CSS样式规则 选择器{属性:属性值; 属性:属性值;} --------- 声明 在上面的样式规则中: 1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。 2.属性和属性值以“键值对”的形式出现。 3.属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。 4.属性和属性值之间用英文“:”连接。 5.多个“键值对”之间用英文“;”进行区分。 可以用段落和表格的对齐的演示。
学习之路：css基本语法
mmccjin的博客
03-19 293
话不多说，继续行走我的新手之路 这次想给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学习笔记（学习中）
a2028535133的博客
03-10 552
HTML 多媒体与语义化标签 图片标签 。。。。。。。。。。。 相对路径 相对路径：描述从网页出发，如何找到图片。 <img src="images/gugong.jpg"> 随着网页和图片的位置关系不同，插入图片的代码随之改变 如果需要回退层级，使用../这样的写法 绝对路径 绝对路径：描述图片精准地址。 <img src="https://i0.hdslb.com/bfs/feed-admin/9a30607625e6c07da570bb2eb07ebdcc4b2
CSS三种引入方式，选择器，伪类
weixin_57727027的博客
02-28 788
CSS三种引入方式，选择器，伪类 ——CSS有三种不同的引入方式 行内样式表，内部样式表，外部样式表。 ​ 行内样式是通过style属性引入CSS样式 eg： ​ 内部样式表是在style标签里面写CSS样式 eg： ​ 外部样式表是将CSS代码保存到外部的CSS的文件里面，HTML文件通过link标签引用该CSS样式表。 eg： ——CSS选择器 选择器 1、CSS样式的语法格式： p {color:red;} 元素选择器(元素选择器是最简单的选择器) 选
前端字符串将其分割成长度为 32 的子字符串数组
最新发布
人与人之间最小的差别是智商，最大的差别是坚持。
08-19 192
要实现这个需求，可以编写一个简单的 JavaScript 函数来处理字符串并将其分割成长度为 32 的子字符串数组。将字符串切割后，对list数据进行数据处理。
first-child last-child nth-child
07-14
`first-child`, `last-child`, 和 `nth-child` 是 CSS 选择器，它们用于选取 HTML 元素集合中的特定元素。 1. **first-child**: 这个选择器匹配列表（如有序列表 `<ol>` 或无序列表 `<ul>`) 中的第一个子元素。它只...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值