一、CSS全局应用
父标签div下包含两个子标签div，当子标签dvi全部向左float，此时父标签设置的背景色是不显示的
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.div_a{ ???????????background: red; ???????} ???????.div_a1,.div_a2{ ???????????float: left; ???????} ???</style></head><body> ???<div class="div_a"> ???????<div class="div_a1">div_a1</div> ???????<div class="div_a2">div_a2</div> ???</div></body></html>如果想显示父标签的背景色，可以在子标签中再加一个div，则代码为：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.div_a{ ???????????background: red; ???????} ???????.div_a1,.div_a2{ ???????????float: left; ???????} ???????.div_a3{ ???????????clear: both; ???????} ???</style></head><body> ???<div class="div_a"> ???????<div class="div_a1">div_a1</div> ???????<div class="div_a2">div_a2</div> ???????<div class="div_a3">div_a3</div> ???</div></body></html>设想下假如一个项目中有很多这样的父子div，需要显示父级的背景色，那么没个父子块都需要单独设置样式是非常繁琐的事，那么通过什么方式解决呢？
首先：div:afer{content:"abcd"}这样的方式可以在标签的后面加上内容，实质上通过after加上的内容也作为一个内联标签存在的。
所以通过after的方式可以实现上面的效果：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.div_a:after{ ???????????content: "abcd"; ???????????display: block; ???????????clear: both; ???????} ???????.div_a{ ???????????background: red; ???????} ???????.div_a1,.div_a2{ ???????????float: left; ???????} ???????.div_a3{ ???????????clear: both; ???????} ???</style></head><body> ???<div class="div_a"> ???????<div class="div_a1">div_a1</div> ???????<div class="div_a2">div_a2</div> ???</div></body></html>现在需要把加上的内容去掉，并且可以应用的其他父子模块：
visibility: hidden 可以隐藏模块，并且不占用位置，而display:none是隐藏并占据原来的位置
visibility用在after中还要加上height:0px 才能不占用位置，否则还占据abcd那一行的位置
定义通用模块只需要在style中自定义一个名字叫clearfix的class就可以，.clearfix{}，然后如果有相同的模块想用这种格式，只需要在标签class的属性值中添加clearfix就可以
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.clearfix:after{ ???????????content: "abcd"; ???????????display: block; ???????????clear: both; ???????????visibility: hidden; ???????????height: 0; ???????} ???????.div_a{ ???????????background: red; ???????} ???????.div_a1,.div_a2{ ???????????float: left; ???????} ???????.div_a3{ ???????????clear: both; ???????} ???</style></head><body> ???<div class="div_a clearfix"> ???????<div class="div_a1">div_a1</div> ???????<div class="div_a2">div_a2</div> ???</div></body></html>二、父类和子类元素hover样式设置
当父类中包含子类，当鼠标放在父类元素上，父类元素样式变化的同时子类也变化，这个样式怎么设置呢？
首先来看一个给父类增加边框的实例：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.div_a:hover{ ???????????border: solid red 2px; ???????} ???</style></head><body> ???<div class="div_a"> ???????<div class="div_a1">aaaaa</div> ???????<div class="div_a2">vvvvv</div> ???</div></body></html>那么鼠标放到父类上，子类样式也变化呢？
只需要：选择父类元素:hover 选择子类元素{color:red}
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.div_a:hover{ ???????????border: solid red 2px; ???????} ???????.div_a:hover .div_a2{ ???????????color: red; ???????} ???</style></head><body> ???<div class="div_a"> ???????<div class="div_a1">aaaaa</div> ???????<div class="div_a2">vvvvv</div> ???</div></body></html>【html、CSS-5】clearfix
原文地址：https://www.cnblogs.com/sunshuhai/p/9060892.html