CSS中一些利用伪类、伪元素和相邻元素选择器的技巧实现评论点赞
2016-10-18 17:29
886 查看
前几天遇到一个页面需求是这样的:
一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。
需求:
没有文字,没有聚焦——点赞
没有文字,聚焦——灰色发送
有文字——红色发送
如果用JS实现,需要监听输入框的change和focus事件,比较麻烦。但是用CSS中的伪类就可以实现相近效果。
(如果评论框用
所以CSS3中的伪类和伪元素非常多,其中一些如果用的巧妙,可以实现很多原本需要JS才可以实现的效果。
因为一些原因,我们有时候用带有
这个是在美团的移动端页面上看到的:
我们需要在城市列表这个区域画一个格子。我们当然首先想到的是用
美团的页面中,格子的竖线是怎么画的呢?是用
分别创造了两个高度为100%的伪元素,利用它们的边框作为表格的竖线。这种方案可以实现设计师的要求,又不会增加空白的页面元素,破坏语义。但是局限性就是最多只能画四条竖线,也就是说表格最多有5列。
纯CSS实现Tab切换也是可以的。主要是利用了单选框元素的
另外利用表单元素的伪类,可以
这个是我看过的最复杂的一个技巧之一,来自这篇文章,不依靠JS实现了根据子元素的个数来应用不同的样式。
比如这样的CSS:
可以实现这样的效果:如果
这是怎么实现的呢?
如果元素总数不足4,则不会存在符合
但是如果只用
这样也就实现了根据元素个数的多少来应用不同的样式。
一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。
需求:
没有文字,没有聚焦——点赞
没有文字,聚焦——灰色发送
有文字——红色发送
如果用JS实现,需要监听输入框的change和focus事件,比较麻烦。但是用CSS中的伪类就可以实现相近效果。
<input type="text" class="input" required> <div class="like">点赞</div> <div class="send">发送</div>
.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伪类。
<div class="input" contenteditable placeholder="请输入文字"></div>
.input:empty::before { content: attr(placeholder); }
画格子
这个是在美团的移动端页面上看到的:我们需要在城市列表这个区域画一个格子。我们当然首先想到的是用
border属性,但是设计师有个要求是,如果最后一行只有一个或者两个城市,为了美观后面也要有空白的格子。像这样子:
美团的页面中,格子的竖线是怎么画的呢?是用
::after和
::before元素画的。
.table:before { content: ''; position: absolute; width: 25%; left: 25%; height: 100%; border-left: 1px solid #ddd8ce; border-right: 1px solid #ddd8ce; } .table:after { content: ''; position: absolute; width: 10%; left: 75%; height: 100%; border-left: 1px solid #ddd8ce; border-right: none; }
分别创造了两个高度为100%的伪元素,利用它们的边框作为表格的竖线。这种方案可以实现设计师的要求,又不会增加空白的页面元素,破坏语义。但是局限性就是最多只能画四条竖线,也就是说表格最多有5列。
Tab切换
纯CSS实现Tab切换也是可以的。主要是利用了单选框元素的:checked伪类和相邻选择器。因为是单选框,所以保证了同一时间只有一个tab处于激活状态。如果不要求更复杂的效果,这样纯CSS实现的tab切换效果,要比JS简单可靠很多。
<input id="tab1" type="radio" name="tabs" checked> <label for="tab1">TAB1</label> <input id="tab2" type="radio" name="tabs"> <label for="tab2">TAB2</label> <div id="content1" class="tab-content">CONTENT1<div> <div id="content2" class="tab-content">CONTENT2</div>
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。
这样也就实现了根据元素个数的多少来应用不同的样式。
相关文章推荐
- CSS中一些利用伪类、伪元素和相邻元素选择器的技巧
- CSS中一些利用伪类、伪元素和相邻元素选择器的技巧
- 利用CSS让元素垂直居中的两种实现方法
- CSS中存在一些比较特殊的属性,伪类,伪元素
- CSS中 伪类和伪元素的用法 --实现元素前后添加[]框
- 利用css的target选择器实现纯css相册
- CSS中伪类选择器及伪元素
- 利用YaHoo YUI实现Javascript CSS 压缩 分类: C# 2014-07-13 19:07 371人阅读 评论(0) 收藏
- CSS中 伪类和伪元素的用法 --实现元素前后添加[]框
- CSS中 伪类和伪元素的用法 --实现元素前后添加[]框
- CSS中 伪类和伪元素的用法 --实现元素前后添加[]框
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
- CSS中 伪类和伪元素的用法 --实现元素前后添加[]框
- CSS中 伪类和伪元素的用法 --实现元素前后添加[]框
- CSS中 伪类和伪元素的用法 --实现元素前后添加[]框
- CSS相邻选择器(>)选择子元素而不包含该子元素的子元素,及如何让DIV中的内容垂直居中
- [CSS]利用伪元素实现一些特殊图形
- Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)
- CSS中 伪类和伪元素的用法 --实现元素前后添加[]框
- CSS中伪类选择器及伪元素