css 注意

最新推荐文章于 2023-04-20 16:19:50 发布

Dwill1

最新推荐文章于 2023-04-20 16:19:50 发布

阅读量735

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css

本文链接：https://blog.youkuaiyun.com/Dwill1/article/details/110938347

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了三种实用的CSS技巧：如何为并列div设置最后一个div的样式；如何利用伪元素实现div后的气泡小三角效果；以及如何正确设置position属性来实现特定布局。这些技巧对于前端开发者来说非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、并列div的最后一个div样式设置

div:last-of-type{}

2、div后气泡小三角实现

.class {
  width: 23%;
  background: #04A55F;
  border-radius: 3px;
  position: relative;
  float: right;
  margin-right: 23%;
  padding: 8px;
  margin-top: 6%;
}

.class:after {
  content: "";
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  border-top: 16px solid #04A55F;
  margin: 0% 43%;
}

3、position的设置（来自w3school）