MENU

比较常用的码子记录一下(HTML/CSS/JS笔记)

• November 18, 2021 • Read: 10737 • 学习笔记

css同级元素设置不同样式

/* :nth-child(2)选取第几个标签,“2可以是你想要的数字” */
.demo li:nth-child(2){background:#090}

/* :nth-child(n+4)选取大于等于4标签,“n”表示从整数 */
.demo li:nth-child(n+4){background:#090}

/* :nth-child(-n+4)选取小于等于4标签 */
.demo li:nth-child(-n+4){background:#090}

/* :nth-child(2n)选取偶数标签,2n也可以是even */
.demo li:nth-child(2n){background:#090}

/* :nth-child(2n-1)选取奇数标签,2n-1可以是odd */
.demo li:nth-child(2n-1){background:#090}

/* :nth-child(3n+1)自定义选取标签,3n+1表示“隔二取一” */
.demo li:nth-child(3n+1){background:#090}

/* :last-child 选取最后一个标签 */
.demo li:last-child{background:#090}

/* :nth-last-child(3)选取倒数第几个标签,3表示选取第3个 */
.demo li:nth-last-child(3){background:#090}

实现img图片不能被拖动的两种简单方法

  1. 在img标签中添加属性 draggable="false"
  2. 通过css样式设置
img {
    -webkit-user-drag: none;
}

文本溢出处理

//单行
.single{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

//多行
.more{
    overflow:hidden;
    work-break: break-all;
    text-overflow:ellipsis;
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; //指定行数
}
// 利用控制台停止页面的所有js
var id = setInterval(function() {}, 0);
while (id--) clearInterval(id);

持续记录...

比较常用的码子记录一下(HTML/CSS/JS笔记) - 原文链接:https://blog.isww.cn/1258.html

Last Modified: June 2, 2022
Archives QR Code Tip
QR Code for this page
Tipping QR Code
开往-友链接力