伪类选择器表示被选中的元素的一种状态
1.not选择器
not选择器表示除了某个符合条件的选择器
//结构
<div class="demo"></div>
<div class="demo"></div>
<div class="test"></div>
<div></div>
//样式
<style>
div {
width: 200px;
height: 200px;
background-color: wheat;
}
/* 将不是.test的div背景颜色改成pink */
/* div:not(.test) {
background-color: pink;
} */
/* 将类名不是demo的div背景颜色改成pink */
div:not([class="demo"]) {
background-color: pink;
}
/* 选择没有class的div */
div:not([class]) {
background-color: purple;
}
/* 选择有class的div */
div[class] {
background-color: black;
}
</style>
实际开发中not选择器的使用场景:在页面中有一个list列表，html结构是这样的:
<ul>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
我们拿到的ui设计图是这样的:
list.png
这有何难，两分钟不到优秀的你就写完了样式，代码如下:
* {
margin: 0;
padding: 0;
}
ul {
width: 320px;
border: 1px solid #333;
text-align: center;
margin: 50px;
}
li {
height: 50px;
line-height: 50px;
font-size: 18px;
border-bottom: 1px solid #333;
}
这时候，问题就出现了，你实现完的样式是这样的:
my.png
细心地同学就会发现，最后一个li的border比其他li的border要粗，那要怎么解决这个问题呢？这个时候我们的伪类选择器
not就出场了，修改代码如下:
* {
margin: 0;
padding: 0;
}
ul {
width: 320px;
border: 1px solid #333;
text-align: center;
margin: 50px;
}
li {
height: 50px;
line-height: 50px;
font-size: 18px;
}
li:not(:last-child) {
border-bottom: 1px solid #333;
}
这样写问题就被我们轻松解决了，艾玛真香
2.root选择器
root选择器表示选择根节点，在html中root选择器就等价于html元素
比如我在css中写:
:root{
background-color: green;
}
和写:
html {
background-color: green;
}
效果是一模一样的
3.target选择器
target选择器表示选择目标元素
一起看个案例:
结构：
<!-- 哪个div变成location.hash的值以后哪个div就是target了 -->
<a href="#box1">选择box1</a>
<a href="#box2">选择box2</a>
<div id="box1"></div>
<div id="box2"></div>
样式：
div {
height: 50px;
width: 100%;
}
div:target {
border: 5px solid red;
background-color: wheat;
}
这样就实现了一个点击哪个div给被点击的这个div加边框和背景色的效果.
接下来我们结合这三个选择器做一个好玩的demo，最终的效果如下所示:
demo.png
可以看到页面上有三个按钮，分别写着
skyblue,green,pink,我们要实现的是利用纯css实现点击其中某个按钮让页面的背景颜色切换成对应的值，一起来看下demo的代码吧:结构:
<body>
<div class="wrapper">
<a href="#skyblue" class="bgskyblue">skyblue</a>
<a href="#green" class="bggreen">green</a>
<a href="#pink" class="bgpink">pink</a>
</div>
<div id="skyblue"></div>
<div id="green"></div>
<div id="pink"></div>
</body>
样式:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#skyblue,
#green,
#pink {
height: 100%;
width: 100%;
}
#skyblue {
background-color: skyblue;
}
#green {
background-color: green;
}
#pink {
background-color: pink;
}
.wrapper {
position: absolute;
top: 50%;
width: 100%;
}
.wrapper a {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
background-color: purple;
text-decoration: none;
line-height: 50px;
text-align: center;
}
div[id]:not(:target) {
display: none;
}
在写这个demo的时候需要注意这里必须给html和body设置height:100%,否则的话即使我们给div设置height:100%,他仍然是没有高度的，因为css中的height:100%是继承的的父级元素的高度，但是html默认高度是被内容所撑开的，也就是说如果没有可以撑开html高度的元素，那么它的初始高度则为0,这样它的子集通过height:100%所得到的高度也就自然而然的全是0了.
