css问题清单与经验

Posted 2022-12-03 牧码厂

目录

• 1、web动态修改样式值、修改style标签里面的css样式、document、querySelector、setProperty
• 2、css之最后列表项去除border-bottom属性、last-child、not(:last-child)

---

1、web动态修改样式值、修改style标签里面的css样式、document、querySelector、setProperty

document.querySelector(".el-upload").style.setProperty("border", "1px dashed transparent");

这里也可以使用id精确设置属性值，删除属性无效，只能重设属性值，亲测有效。在需要设置的函数/方法里面添加此代码即可。

---

2、css之最后列表项去除border-bottom属性、last-child、not(:last-child)

普通写法

.item 
	border-bottom: 1px solid red;


.item:last-child 
	border-bottom: 1px solid transparent;

此写法的优点是能保证每一项的盒子大小一致，缺点是代码量多。

---

伪类写法

.item:not(:last-child) 
	border-bottom: 1px solid red;

此写法的优点是代码量少，缺点是最后一项缺少1px的高度。

---

相关链接
1、20个CSS快速提升技巧