前言
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>
持续更新中…