常用的css

CSS技巧精粹

最新推荐文章于 2025-04-28 22:56:23 发布

原创最新推荐文章于 2025-04-28 22:56:23 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

5 篇文章

订阅专栏

文章目录

1.选择器
2. 遮罩
3. 伪元素
4.媒体查询
5. 滚动条
6 超过显示省略号
- 6.1 单行
- 6.2 两行
7. calc
8. 图片hover显示文字

1.选择器

偶数.index_tab:nth-child(even) 

基数.index_tab:nth-child(odd)

最后一个.index_tab:last-child

第一个.index_tab:first-child

第几个:nth-child(1)

2. 遮罩

.mllc__master{
  position: fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:10;
  background:rgba(0,0,0,0);
}

3. 伪元素

<style type="text/css">
    #div1 {
        width: 200px;
        height: 200px;
        background: red;
    }

    #div1::after {
        content: "World";
        color: white;
    }

    #div1:before{
        content: "Hello";
        color: white;
    }
</style>
</head>
<body>
<div id="div1">111</div>
</body>

4.媒体查询

@media screen and (max-width: 1500px) {


}

5. 滚动条

.no_scroll::-webkit-scrollbar {
    display: none;
}

.scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 7px;
}

.scrollbar::-webkit-scrollbar-thumb {
    background: rgba(160, 160, 160, 0.9);
    border-radius: 0px;
    scrollbar-highlight-color: blue;
}

.scrollbar::-webkit-scrollbar-track {
    background: #f0f0f0;
}

6 超过显示省略号

6.1 单行

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

6.2 两行

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

7. calc

  width: -moz-calc(100%);
  width: -webkit-calc(100%);
  width: calc(100%);

8. 图片hover显示文字

div:hover::after {
	content: attr(data-title); 
	display: inline-block;
	padding: 2px 4px;
	border: 1px solid #ddd;
	border-radius: 5px;
	position: absolute;
	top: 20px;
	left: 0px;
	background: #ddd;
	cursor: pointer;
}


<div data-title="hello, world">hello...</div>
	<img title="51312" src="https://images2017.cnblogs.com/blog/962554/201710/962554-20171019180820334-1614887402.jpg" alt="" />