拒绝JavaScript，这三大CSS技巧你一定要用上

.cs-empty:empty{宽度：120px;填充：20px；border:10pxdashed;}此时div元素会匹配:empty伪类，显示虚线框，如图2.1隐藏空元素例如模块中的内容是动态的，可能是一个列表，或者按钮，这些模块容器中往往会包含一些影响布局的CSS属性，比如margin和padding属性等。当然，当这些模块中有内容时，布局显示效果很好，但是一旦这些模块中的内容modules为空，页面会出现一大片明显的空白，效果不好。这种情况最好使用:empty伪类来控制：.cs-module:empty{display:none;}无需额外的JavaScript逻辑判断，直接使用CSS即可实现动态样式效果。唯一需要注意的是当list内容缺失时，一定要去掉空格，否则:empty伪类匹配不到。2.2缺失字段智能提示例如下面的HTML

姓名：

张三

性别：

手机：

邮箱：

用户部分信息字段缺失，开发者应使用其他占位符表示此处无内容，如破折号（-）或直接使用文字提示。但是多年的开发经验告诉我，开发者很容易忘记这里的特殊处理，最终导致布局混乱，信息难以理解。dt{float:left;}但是现在，我们不用担心这样的配合问题，我们可以直接用CSS来处理这种情况，代码很简单：dd:empty::before{content:'none';color:gray;}此时字段缺失后的布局效果如下：2.3数据为空，提示实际开发中有很多类似的场景。比如表中的remark信息经常为空，可以这样处理：td:empty::before{content:'-';color:gray;}另外还有一类典型场景需要用到:empty伪类，即动态Ajax加载数据为空。新用户进入产品时，很多模块内容是不可用的。如果以前，我们需要在Javascript代码中做if判断，如果没有值，就得吐出“无结果”或“无数据”的信息。但是现在，有了:empty伪类，只需将工作交给CSS即可。例如：.cs-search-module:empty::before{content:'Nosearchresults';显示：块；行高：300px；文本对齐：居中；color:gray;}另一个例子：.cs-article-module:empty::before{content:'你还没有发表任何文章';显示：块；行高：300px；文本对齐：居中；color:gray;}总之这个方法非常好用，可以节省很多开发时间，同时有更好的体验和更方便的维护，因为可以使用相同的类名来保持全站提示信息一致：.cs-article-module:empty::before{content:'Nodatayet;显示：块；行高：300px；文本对齐：居中；color:gray;}3.善用:only-child伪类：only-child是一个非常强大的伪类，尤其是在处理动态数据时。它可以节省大量编写JavaScript逻辑的成本。:only-child表示匹配一个没有任何兄弟元素的元素。例如，下面的p元素可以匹配:only-child伪类，因为它前后没有其他兄弟元素：确定删除该内容吗？