①：element1.element2（给同时满足有element1和element2 2个类名的元素添加样式）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .test1.test2 { color: red; } </style> </head> <body> <div class="test1">123</div> <div class="test1 test2"> 123 </div> </body> </html>
②：[attribute^=value] （匹配属性值以指定值开头的每个元素，如下面demo，给属性为href且值以http开头的所有a元素添加样式）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> a { display: block; border-bottom: 1px solid #ccc; } [href^=http]::after { content: 'after伪元素'; display: inline-block; margin: 20px; width: 50px; height: 50px; color: #fff; text-align: center; background-color: #000; } </style> </head> <body> <a href="#">123</a> <a href="http://www.baidu.com">百度</a><br> <a href="http://bilibili.com">B站</a><br> </body> </html>
③：element1 + element2（给紧接在element1元素后的第1个兄弟元素添加样式）
<html> <head> <meta charset="utf-8" /> <title></title> <style> .test1 + .test2 { font-size: 50px; } </style> </head> <body> <div class="test1">666</div> <div class="test2">888</div> <div class="test2">999</div> <div class="test3">000</div> </body> </html>
④：element1 ~ element2（给紧接在element1元素后的所有兄弟元素添加样式）
<html> <head> <meta charset="utf-8" /> <title></title> <style> .test1 ~ div { font-size: 50px; } </style> </head> <body> <div class="test1">666</div> <div class="test2">888</div> <div class="test3">999</div> <div class="test4">000</div> </body> </html>