前端:给表格的第二列增加下划线,排除表头列

1. 代码

先使用css的:not选择器,排除表格第一行,再使用:nth-child()选择器选中表格的第二列

/* 设置除了表头列的第二列都有下划线 */ .TreeGrid tr:not(:first-child) td:nth-child(2) { 	text-decoration: underline; } 

2. 效果图

推荐这些技术文章:

CSS 选择器 选择前几个元素

方法:使用伪类选择器处理
1、选择第n个,n代表数字
  :nth-child(n){ }
2、选择列表中的偶数的标签
  :nth-child(2n){}
  :nth-child(even){ }
3、选择列表中的奇数的标签
  :nth-child(2n - 1){ }
  :nth-child(odd){ }
4、【负方向范围】选择第1个到第3个
  :nth-child(-n + 3)...

结构伪类选择器

伪类:条件
/*ul的第一个子元素*/
ul li:first-child{
background: green;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: seagreen;
}
/*...

CSS兄弟范围选择器

我们想要选择一部分兄弟元素,根据需要试着写了一个

 td:nth-child(4)~td:not(:nth-child(7)~td) {
       display: none;
 }
从第5个元素开始,一直到第7个元素被选中
 
如果是jQuery

 // 需要注意第 ...

css3 nth-child的妙用

CSS3 nth-child()选择前几个元素

一、选择列表中的偶数标签  :nth-child(2n)

二、选择列表中的奇数标签  :nth-child(2n-1)

三、选择从第6个开始的,直到最后:nth-child(n+6)

四、选择第1个到第6个 :nth-child(-n+6)

一、两者结合使用,可以限制选择某一个范围,选择第6个到第9个 &n...

nth-child(n) 选择器

nth-child(n): 选中某个父元素中第n个子元素
p:nth-child(n): 选中p标签,并且该p标签是某个父元素中第n个子标签
<form name="f1">
<textarea name="t2" style="width:200px;height:100px;"></textarea><br>
<input type="...

代码:关于表格样式的CSS

.nodeConfig{

table {
margin-top: 10px;
width: 100%;
// width: 98%;
// margin-left: 2%;

td{
font-size: 1.3rem;
color: white;
border-right: 0px solid white;
...

响应式布局表格

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="widt...

CSS选择器-伪类选择器(深度探索)

first-child选择,讲一讲为啥是这样(   等价于:nth-child(1)   ):
div空格:first-child 选中第一个以及所有子元素的第一个元素,牢记这句话,看下图:

 
 解释一下为啥是,1-1,1-2,2-1,3-1选中了:
第一步:div空格 这个表示选中div的儿子们
第二步::first-child,...

2.前端CSS—css选择器

目录一、CSS简介二、CSS语法三、CSS的三种引入方式3.1 内嵌方式3.2 行内样式3.3 外部样式链接式导入式四、基本选择器4.1 标签选择器4.2 id选择器4.3 类选择器4.4 通用选择器4.5 id选择器和class选择器的比较五、高级选择器5.1 后代选择器5.2 子元素选择器5.3 交集选择器5.4 并集选择器六、属性选择器6.1 根据属性查找6.2 根据属性和值查找6.3 表...

CSS 移入文字的时候让其出现下划线

.right_title {
color: #427aff;
font-size: 14px;
margin: 5px 0 4px 0;
&:hover {
text-decoration: underline;
}
}

text-decoration: underline;

...

文章标题:前端:给表格的第二列增加下划线,排除表头列
文章链接:https://www.dianjilingqu.com/3574.html
本文章来源于网络,版权归原作者所有,如果本站文章侵犯了您的权益,请联系我们删除,联系邮箱:saisai#email.cn,感谢支持理解。
THE END
< <上一篇
下一篇>>