初始样式
<style>
body {
margin: 0;
padding: 0;
font: 12px/1.5 'Microsoft YaHei', 'HanHei SC', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', 'sans-serif', \5b8b\4f53;
}
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
blockquote,
p {
padding: 0;
margin: 0;
}
table,
td,
tr,
th {
font-size: 12px;
}
ol,
ul {
list-style: none;
}
li {
list-style-type: none;
}
img {
vertical-align: top;
border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
}
address,
cite,
code,
em,
th,
i {
font-weight: normal;
font-style: normal;
}
.clearfix {
*zoom: 1;
}
.clearfix:after {
display: block;
overflow: hidden;
clear: both;
height: 0;
visibility: hidden;
content: ".";
}
a:link,
a:visited {
text-decoration: none;
}
input,
button {
outline: 0;
border: none;
}
</style>
获取奇数偶数
#Ulist li:nth-of-type(odd){ margin-left: 20px;}奇数行
#Ulist li:nth-of-type(even){margin-left: 10px;}偶数行
<ul id="Ulist">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
//等比例缩放
.trial li{
transition: all 1s;
}
.trial li:hover {
transform: scale(1.2);
/* animation: moveTop 1s linear infinite alternate; */
}
//图片撑满盒子
object-fit: cover;
//文章缩进
text-indent:2em;
//两端对齐
text-align: justify;
//查找第几个
.detail_img img:nth-child(2){}
//不换行
white-space: nowrap;
//换行
white-space: break-spaces;
//改变子元素
.newbox:hover p {
color: #2d76ff;
}
//终极查找类
.el-table >>> td div{
text-align: initial;
}
//显示省略号
.hidn {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
//多行溢出隐藏
.hide{
overflow:hidden;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
//旋转
transform: rotate(-7deg);
//改变图片滤镜
filter: brightness(5);
// 给最外层的盒子添加伪元素,列不满则左对齐
.v1-box:after {
content: "";
width: 30%;
}
//垂直居中
display:table-cell;
vertical-align: middle;
//把div元素中的文本划分成三列:
column-count:3;
//option占位
<option value="" disabled selected>请选择公司名称</option>
//添加一个类
$(() => {
$("#gszc").addClass("togle_cor")
})