在使用css的时候,少不了接触伪类,而not这种选择器之前基本没有写过,在今天遇到后,就来和大家一起探索探索。
1、案例1:
<style>
p{
color:#000000;
}
:not(p){
color:#ff0000;
}
</style>
<div class="test1">div样式1</div>
<div class="test2">div样式2</div>
<p>p样式1</p>
效果:
p标签是黑色,div标签是红色(not选择器);
2、案例二:
<style>
p{
color:#000000;
}
:not(p){
color:#ff0000;
}
</style>
<div class="test1">div样式1</div>
<div class="test2">
div样式2
<p>嵌套在div中的p样式</p>
</div>
<p>p样式1</p>
<a>a样式1</a>
<br />
<i>i样式1</i>
<ul>
<li>li样式</li>
</ul>
效果:
p标签黑色(纯p标签,嵌套在div中的p标签),div 、a、i、li标签红色(非p标签)
3、案例三
<style>
div {
width: 100px;
height: 100px;
margin: 5px 10px;
display: inline-block;
color: white;
float: left;
}
.red {
background: red;
}
.orange {
background: orange;
}
div.red:not(.orange){
border: 4px solid deepskyblue;
}
</style>
<div class="red">red</div>
<div class="orange">orange</div>
<div class="red orange">red + orange</div>
效果:
含red、不含orange的为红色,含red的orange为橙色。含red的且不含其他class的显示border为蓝色。
即:div.red:not(.orange)可以这样理解: 含red但是不含orange的元素。【用于同一元素含多个样式的选择性渲染】
【分析】在style中orange位于red之后,同时作用在div上,会以在style中加载最后的那一个为主,渲染dom元素。
4、案例四
<style>
div {
width: 100px;
height: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 5px 10px;
display: inline-block;
color: white;
float: left;
}
.red {
background: red;
}
.orange {
background: orange;
}
.blue {
background: blue;
}
div.red:not(.orange){
border: 4px solid deepskyblue;
}
div.red.blue{
clear: both;
}
div.red.orange.blue{
width: 150px;
}
</style>
<div class="red">red</div>
<div class="orange">orange</div>
<div class="blue">blue</div>
<div class="red orange">red + orange</div>
<div class="red blue">red+blue</div>
<div class="red orange blue">red+orange+blue</div>
<div class="blue orange">blue+orange</div>
效果:
我们会发现,有red,但是没有orange的元素被添加了border,也就是这样说not可以被理解选择为不含()里面的元素。
总结:
1):not(selector)
是指不含selector样式的其他所有的元素
2)xx标签.class:not(selector)
是指含class的xx标签,但不含selector样式的所有xx元素的 【即(含class和非selector的xx标签的元素)】