前言
CSS是Web前端开发重要的一步，如今，在即将到来的CSS4时代，程序员们的CSS知识库也越来越丰富，而不会偷懒的程序员不是一个好程序员，冗余重复的代码是程序员的大忌，本文从部分选择器入手，致力于减少代码冗余，提高开发效率。
1.is(ele1,ele2…)
解释：对多个元素进行选择，另外可以对多个元素添加伪类选择器
<style>
.top{
background:red
}
.middle{
background-color: green;
}
.bottom{
background-color: blue;
}
:is(.top,.bottom) div:hover{
background-color: pink;
}
</style>
<body>
<div class="top">
<div>
top_box1
</div>
</div>
<div class="middle">
<div>
middle_box1
</div>
</div>
<div class="bottom">
<div>
bottom_box1
</div>
</div>
</body>
说明：这里其实也是一个简便的写法，(尽量用最简便的写法)
:is(.top,.bottom) div:hover{
background-color: pink;
}
等价于
:is(.top div,.bottom div) :hover{
background-color: pink;
}
等价于
.top div:hover{
background-color: pink;
}
.top div:hover{
background-color: pink;
}
2.:where()
:where()的作用其实和:is()是一样的，唯一的不同是优先级不同，当样式冲突时，where()作用的样式默认为优先级最低，而is()作用的样式需要计算冲突样式的优先级
<style>
:is(.is) p {
color: red;
}
:where(.where) p {
color: orange;
}
#footer p {
color: blue;
}
</style>
<body>
<h2>:is()</h2>
<div class="is">
<p>111</p>
</div>
<div class="is">
<p>222</p>
</div>
<div class="is" id="footer">
<p>333</p>
</div>
<p>---------------------------------------------------------------</p>
<h2>:where()</h2>
<div class="where">
<p>111</p>
</div>
<div class="where">
<p>222</p>
</div>
<div class="where" id="footer">
<p>333</p>
</div>
</div>
</body>
说明：:where()的优先级默认最低，所以，当有样式冲突的时候就会被覆盖，所以这里蓝色覆盖橙色；:is()的优先级需要计算，这里是一个class选择器和一个标签选择器，优先级的值为11，而#footer p 的优先级是id选择器和一个标签选择器，优先级的值是101，所以，蓝色覆盖红色
3.:not(ele1,ele2…)
解释：给除了括号内元素之外的所有元素添加样式，不能用于伪类选择器
<style>
p {
color: #f00;
}
span{
color:#0f0
}
:not(p,span) {
color: #00f;
}
</style>
<body>
<div>111</div>
<div>222</div>
<p>333</p>
<span>444</span>
</body>
这里说明一下：:not（ele1,ele2）是:not(ele)的进阶，这里只是增加了多选的功能，另外:not(p,span)起作用前提是给p元素和span元素单独设置样式，如果这里不给p元素和span元素单独设置样式，那么:not（）不会起作用。
4.:has()
解释：给x元素内所有y元素添加样式
<script src="../js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
$(".box:has(span)").css("color","red");
});
</script>
<body>
<div class="box">
<span>111</span>
<div>222</div>
<p>333</p>
<span>444</span>
</div>
</body>
持续更新中…