一个评论框，后面的按钮有点赞或者发送评论两种状态，其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。 如果用JS实现，需要输入框的change和focus事件，比较麻烦。但是用CSS中的伪类就可以实现相近效果。 所以CSS3中的伪类和伪元素非常多，其中一些如果用的巧妙，可以实现很多原本需要JS才可以实现的效果。 因为一些原因，我们有时候用带有contenteditable属性的div而不是input或者textarea来作为输入框。比如，div可以根据内容自动调整高度。但是div元素不支持placeholder属性。怎么在div内容为空的时候显示一个默认文字呢?可以利用:empty伪类。
我们需要在城市列表这个区域画一个格子。我们当然首先想到的是用border属性，但是设计师有个要求是，如果最后一行只有一个或者两个城市，为了美观后面也要有空白的格子。像这样子：
分别创造了两个高度为100%的伪元素，利用它们的边框作为表格的竖线。这种方案可以实现设计师的要求，又不会增加空白的页面元素，语义。但是局限性就是最多只能画四条竖线列。 纯CSS实现Tab切换也是可以的。主要是利用了单选框元素的:checked伪类和相邻选择器。因为是单选框，所以了同一时间只有一个tab处于激活状态。如果不要求更复杂的效果，这样纯CSS实现的tab切换效果，要比JS简单可靠很多。 另外利用表单元素的伪类，可以label元素来代替单选框、复选框等表单元素的本身，因为为表单元素本身定义样式十分困难。 这个是我看过的最复杂的一个技巧之一，来自这篇文章，不依靠JS实现了根据子元素的个数来应用不同的样式。 :nth-last-child(n+4)这一个选择器的意思就是倒数第四个以及之前的元素，后面加了~ li，就是表示符合前面条件的元素之后的li元素。 如果元素总数不足4，则不会存在符合:nth-last-child(n+4)的元素(一共没有四个，也就不存在倒数第四个)，那么li:nth-last-child(n+4) ~ li就不会选择任何的元素了。 白人节也是国外流行的一个节日，为了纪念罗马一对情侣至死不渝的爱情而设立，最开始流行...[详细] 每日头条、业界资讯、热点资讯、爆料，全天微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与，TechWeb微博期待您的关注。
|
