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

在CSS中使用伪类、伪元素和相邻元素选择器有哪些技巧？很多新手对此不是很清楚。为了帮助大家解决这个问题，下面小编就为大家详细讲解一下。需要的人可以从中学习，希望你能有所收获。

几天前，我遇到了这样一个页面需求：

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

需求：

没有文字，没有焦点；mdash竖起大拇指

没话说，专注于mdashmdash灰色发送

有词mdashmdash发送红色

如果用JS实现的话，在输入框中监控变化和焦点事件就比较麻烦了。但是，在CSS中使用伪类也可以达到类似的效果。

type=' text ' class=' input ' required ddiv class=' like ' like/div div class=' send ' send//div . send { display : none；}.input:focus~。发送{ display:block}.input:valid~。发送{ display:blockcolor:red}.input:focus~。比如， input:valid~。像{ display:none}(如果注释框由contenteditable属性的div元素实现，则可以使用：空的伪类来代替：valid。)

因此，CSS3中有很多伪类和伪元素，其中一些如果运用巧妙，可以达到很多原来JS需要的效果。

contenteditable属性的div占位符

出于某些原因，我们有时使用带有contenteditable属性的div，而不是input或textarea作为输入框。比如div可以根据内容自动调整高度。但是，div元素不支持占位符属性。当div内容为空时，如何显示默认文本？可以使用：空伪类。

div class=' input ' contentitableplaceholder='请在{content3360 attr(占位符)前输入text '/div . input : empty :3360；}画格子

这是在美团手机页面看到的：

我们需要在城市列表的这个区域画一个网格。当然，我们首先想到的是使用边框属性，但是设计师有一个要求，如果* * *线只有一两个城市，为了美观，后面应该有一个空白网格。像这样：

美团的页面上，网格的竖线是怎么画的？它是用：after和： after元素绘制的。

{ content : }之前的. table :位置：绝对；宽度：25%；left :25%；高度：nb

sp;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。

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

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注行业资讯频道，感谢您对的支持。