.input:empty::before{content:attr(placeholder);}绘制网格这个在美团移动端看到：我们需要在城市列表的这个区域画一个网格。当然，我们首先想到的是使用border属性，但是设计者有一个要求，如果第一行只有一两个城市，为了美观，后面必须有一个空白的格子。看起来是这样的：在美团的页面中，网格的竖线是怎么画的？它是用::after和::before元素绘制的。.table:before{content:'';position:absolute;width:25%;left:25%;height:100%;border-left:1pxsolid#ddd8ce;border-right:1pxsolid#ddd8ce;}.table:after{content:'';position:absolute;width:10%;left:75%;height:100%;border-left:1pxsolid#ddd8ce;border-right:none;}分别创建两个高度为100%的伪元素使用它们的边框作为表格的垂直线。该解决方案无需添加空白页面元素和破坏语义即可满足设计者的要求。但限制是最多只能画4条竖线，也就是说表格最多有5列。也可以使用纯CSS切换选项卡。它主要使用单选按钮元素的:checked伪类和相邻选择器。因为是单选按钮，所以保证同一时间只有一个tab是激活的。如果不需要更复杂的效果，纯CSS实现的tab切换效果要比JS简单可靠得多。TAB1TAB2CONTENT1

CONTENT2

输入,.tab-content{display:none;}#tab1:checked~#content1,#tab2:checked~#content2{display:block;}另外，利用form元素的伪类，可以用label元素代替单选框、复选框等。表单元素本身，因为很难为表单元素本身设置样式。感知子元素的数量这是我见过的最复杂的技术之一。从这篇文章来看，它不依赖JS根据子元素的数量应用不同的样式。比如这样的CSS：.listli:nth-last-child(n+4)~li,.listli: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。这样就可以根据元素的数量应用不同的样式。