经过漫长的寒假，我与大家又见面了，这次让我们来看看CSS3的新增选择器都有什么吧：

一：<style>

//带有data属性的div被选中

div[data]{

background-color: red;//背景色变为红色

}

//带有data属性，属性值只有一个a或者a两边没有东西（被空格隔开）的选中

div[data~="a"]{

background-color: red;

}

</style>

<div class="demo" data="a">data</div>

二：<style>

//设置输入框提示文字的样式

.text input::placeholder{

color: red;

}

//含abc的class标签被选中

.text div[class*=abc]{

color: aqua;

}

//不含有abc的class标签被选中

.text div:not(abc){

color: red;

}

//class的值以d结尾的被选中

.text div[class$='d']{

color: blueviolet;

}

</style>

<div class="text">

<input type="text" placeholder="账号">

<div class="abc">1</div>

<div class="abc">2</div>

<div class="ab">3</div>

<div class="abc">4</div>

<div class="abc">5</div>

<div class="ad">6</div>

</div>

效果展示

三：

span:selection{

//更改选中后的样式

} 效果展示：

视频加载中...

小编感觉这个还是有点用的，可以在一堆乱七八糟的文字中显示如你想要得文字，可以用来玩游戏，甚至用来摆放一个图形。

三：

//为偶数的span标签被选中

.text2 span:nth-child(2n){

background-color: red;

}

//为奇数的span标签被选中

.text2 span:nth-child(2n+1){

background-color: green;

}

四：

//设置选择框选择后的样式

.text3 input:checked{

width: 30px;

height: 30px;

}

CSS3的选择器还有很多，欢迎大家探讨，这次就到这里了[再见][再见][再见]