CSS中一些利用伪类、伪元素和相邻元素选择器的技巧

BigNerdCoding 发布于2019-08-29 11:25 / 2500人阅读

摘要：像这样子美团的页面中，格子的竖线是怎么画的呢是用和元素画的。主要是利用了单选框元素的伪类和相邻选择器。另外利用表单元素的伪类，可以元素来代替单选框复选框等表单元素的本身，因为为表单元素本身定义样式十分困难。

前几天遇到一个页面需求是这样的：

一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。

需求：
没有文字，没有聚焦——点赞
没有文字，聚焦——灰色发送
有文字——红色发送

如果用JS实现，需要监听输入框的change和focus事件，比较麻烦。但是用CSS中的伪类就可以实现相近效果。


点赞
发送

.send {
  display: none;
}

.input:focus ~ .send {
  display: block;
}

.input:valid ~ .send {
  display: block;
  color: red;
}


.input:focus ~ .like, .input:valid ~ .like {
  display: none;
}

（如果评论框用contenteditable属性的div元素实现，可以用:empty伪类代替:valid。）

所以CSS3中的伪类和伪元素非常多，其中一些如果用的巧妙，可以实现很多原本需要JS才可以实现的效果。

contenteditable属性的div的placeholder

因为一些原因，我们有时候用带有contenteditable属性的div而不是input或者textarea来作为输入框。比如，div可以根据内容自动调整高度。但是div元素不支持placeholder属性。怎么在div内容为空的时候显示一个默认文字呢？可以利用:empty伪类。

.input:empty::before {
  content: attr(placeholder);
}

画格子

这个是在美团的移动端页面上看到的：

我们需要在城市列表这个区域画一个格子。我们当然首先想到的是用border属性，但是设计师有个要求是，如果最后一行只有一个或者两个城市，为了美观后面也要有空白的格子。像这样子：

美团的页面中，格子的竖线是怎么画的呢？是用::after和::before元素画的。

.table:before {
  content: "";
  position: absolute;
  width: 25%;
  left: 25%;
  height: 100%;
  border-left: 1px solid #ffffd8ce;
  border-right: 1px solid #ffffd8ce;
}

.table:after {
  content: "";
  position: absolute;
  width: 10%;
  left: 75%;
  height: 100%;
  border-left: 1px solid #ffffd8ce;
  border-right: none;
}

分别创造了两个高度为100%的伪元素，利用它们的边框作为表格的竖线。这种方案可以实现设计师的要求，又不会增加空白的页面元素，破坏语义。但是局限性就是最多只能画四条竖线，也就是说表格最多有5列。

Tab切换

纯CSS实现Tab切换也是可以的。主要是利用了单选框元素的:checked伪类和相邻选择器。因为是单选框，所以保证了同一时间只有一个tab处于激活状态。如果不要求更复杂的效果，这样纯CSS实现的tab切换效果，要比JS简单可靠很多。

  
  TAB1
  
  TAB2

  CONTENT1  
  CONTENT2

  input, .tab-content{
    display: none;
  }
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

另外利用表单元素的伪类，可以label元素来代替单选框、复选框等表单元素的本身，因为为表单元素本身定义样式十分困难。

感知子元素的个数

这个是我看过的最复杂的一个技巧之一，来自这篇文章，不依靠JS实现了根据子元素的个数来应用不同的样式。

比如这样的CSS：

.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child {
  color: red
}

可以实现这样的效果：如果.list里面li元素个数大于等于4，则显示为红色。

这是怎么实现的呢？

:nth-last-child(n+4)这一个选择器的意思就是倒数第四个以及之前的元素，后面加了~ li，就是表示符合前面条件的元素之后的li元素。

如果元素总数不足4，则不会存在符合:nth-last-child(n+4)的元素（一共没有四个，也就不存在倒数第四个），那么li:nth-last-child(n+4) ~ li就不会选择任何的元素了。

但是如果只用~ li，是不会匹配到第一个li的，所以又加上了li:nth-last-child(n+4):first-child。

这样也就实现了根据元素个数的多少来应用不同的样式。

云服务器 GPU云服务器伪元素获取伪元素 css元素元素选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111642.html

CSS选择器（CCS第三版）

摘要：元素选择器针对元素的选择器，用于寻找指定的元素。通用选择器通用选择器可设置全部的元素，由一个表示。使用表示伪类选择器。伪类选择器包含两种状态伪类和结构伪类。层叠规定了选择器的特殊性，将特殊性分为，，，四个登记，各等级特殊性逐渐降低即。什么是选择器？ showImg(https://segmentfault.com/img/remote/1460000016763315?w=784&h...

dabai 2019-08-29 17:02 评论0 收藏0
CSS选择器（CCS第三版）

摘要：元素选择器针对元素的选择器，用于寻找指定的元素。通用选择器通用选择器可设置全部的元素，由一个表示。使用表示伪类选择器。伪类选择器包含两种状态伪类和结构伪类。层叠规定了选择器的特殊性，将特殊性分为，，，四个登记，各等级特殊性逐渐降低即。什么是选择器？ showImg(https://segmentfault.com/img/remote/1460000016763315?w=784&h...

Flink_China 2019-08-02 11:46 评论0 收藏0
善用CSS伪类，不用JS也能做出选项卡功能

摘要：取决于你的高度咦还是不能动因为我们还需要运用的两个重要技巧伪类和通用兄弟元素选择器，才能让选项卡与内容块做切换。加入伪类与通用兄弟元素选择器我们为加上伪类，表示当这个被选中时等于对应的标签被选中使才会呈现的样式。先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例页面讲到选项卡（...

XUI 2019-08-26 13:49 评论0 收藏0
善用CSS伪类，不用JS也能做出选项卡功能

摘要：取决于你的高度咦还是不能动因为我们还需要运用的两个重要技巧伪类和通用兄弟元素选择器，才能让选项卡与内容块做切换。加入伪类与通用兄弟元素选择器我们为加上伪类，表示当这个被选中时等于对应的标签被选中使才会呈现的样式。先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例页面讲到选项卡（...

levius 2019-08-30 10:55 评论0 收藏0
善用CSS伪类，不用JS也能做出选项卡功能

摘要：取决于你的高度咦还是不能动因为我们还需要运用的两个重要技巧伪类和通用兄弟元素选择器，才能让选项卡与内容块做切换。加入伪类与通用兄弟元素选择器我们为加上伪类，表示当这个被选中时等于对应的标签被选中使才会呈现的样式。先看看Demo: showImg(https://segmentfault.com/img/bVbsMDs?w=481&h=395); CODEPEN 示例页面讲到选项卡（...

luoyibu 2019-08-02 15:07 评论0 收藏0