目录
一、Relationship Selectors(关系选择器)
三、Pseudo-Element Selectors(伪元素选择器)
四、pseudo-classes(伪类选择器)——被选则元素的一种状态
一、Relationship Selectors(关系选择器)
E + P:选择下一个满足条件的兄弟元素节点
E ~ P:选择所有满足条件的兄弟元素节点
<html lang="en">
<head>
<style>
*{
margin: 10px 10px ;
}
div {
float: left;
margin-right: 5px;
}
div + p {
color: #fff;
}
div ~ p {
background-color: #ca0a16;
}
p, span {
width: 50px;
margin-left: 2px;
height: 20px;
line-height: 20px;
text-align: center;
display: block;
float: left;
font-size: 14px;
}
</style>
</head>
<body>
<div>div</div>
<p>1</p>
<p>2</p>
<span>span</span>
<p>3</p>
</body>
</html>
【结果】
二、Attribute Selectors(属性选择器)
E[attr~="val"]:选择满足条件的属性值中含有独立val的元素
<html lang="en">
<head>
<style>
div {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
margin-left: 5px;
}
div[class ~= "a"] {
background-color: teal;
}
</style>
</head>
<body>
<div class="a">1</div>
<div class="ab">2</div>
<div class="a b">3</div>
</body>
</html>
【结果】
E[attr |= "val"]:选中满足条件的且属性值以“val”开头或者“val-”的元素
<html lang="en">
<head>
<style>
div {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
margin-left: 5px;
}
div[class |= 'a'] {
background-color: #ca0a16;
}
</style>
</head>
<body>
<div class="a">1</div>
<div class="a-test">2</div>
<div class="b-test">3</div>
<div class="b-a-b">4</div>
</body>
</html>
【结果】
E[attr ^= "val"]:选择满足条件的且属性值以val开头的元素
E[attr $= "val"]:选择满足条件的且属性值以val结尾的元素
<html lang="en">
<head>
<style>
div {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
margin-left: 5px;
}
div[class ^= 'a'] {
background-color: #ca0a16;
}
div[class $= 'st'] {
color: #fff;
}
</style>
</head>
<body>
<div class="a">1</div>
<div class="a-test">2</div>
<div class="ba">3</div>
</body>
</html>
【结果】
E[attr *= "val"]:选择满足条件的属性值中含有val的元素
<html lang="en">
<head>
<style>
div {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
float: left;
margin-left: 5px;
}
div[class *= 'a'] {
background-color: #ca0a16;
}
</style>
</head>
<body>
<div class="a">1</div>
<div class="a-test">2</div>
<div class="ba">3</div>
<div class="b">4</div>
</body>
</html>
【结果】
三、Pseudo-Element Selectors(伪元素选择器)
E::placeholder 不太好解释,用代码说明吧
<html lang="en">
<head>
<style>
input::placeholder {
color: teal;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入用户名">
</body>
</html>
【注】placeholder只可改变颜色这一个属性
【结果】
E::selection:代码说明+1
<html lang="en">
<head>
<style>
div {
margin-bottom: 5px;
}
.jwh::selection {
background-color: #424242;
color: steelblue;
}
.zal::selection {
background-color: slategray;
color: #424242;
}
</style>
</head>
<body>
<div class="jwh">JWH:我们不是一个世界的人</div>
<div class="zal">张爱玲:如果是龙,也是两张画上的,纵然两幅画卷在一起,也还是两张画上的,各归各</div>
<div>总结:我没有文化</div>
</body>
</html>
【注】只能改变颜色和背景颜色两个属性
四、pseudo-classes(伪类选择器)——被选则元素的一种状态
1.基本过滤选择器
E:not():选择除满足括号内条件的E元素,常用于列表最后一个元素不设置底边线
<!DOCTYPE html>
<html lang="en">
<head>
<style>
ul {
margin: 0;
padding: 0 5px;
list-style: none;
width: 300px;
border: 1px solid #999;
background-color: #fcc;
}
li {
height: 80px;
line-height: 80px;
padding: 0 20px;
color: #fff;
font-size: 20px;
}
li:not(:last-of-type) {
border-bottom: 1px solid #999;
}
</style>
</head>
<body>
<ul>
<li>红玫瑰与白玫瑰</li>
<li>花凋</li>
<li>年轻的时候</li>
<li>殷宝滟送花楼会</li>
<li>桂花蒸 阿小悲秋</li>
</ul>
</body>
</html>
【结果】
:root:选择根节点,html文件中,该选择器等于html标签选择器,xml文件同理,举例在下例中
E:target:先举例再说明吧
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* :root实例 */
/* 该方法可以使height:100%继承给后代 */
:root,body {
margin: 0;
height: 100%;
}
.btnWrap {
position: absolute;
top: 20px;
left: 50%;
margin-left: -115px;
}
.btnWrap a {
text-decoration: none;
background-color: thistle;
color: #fff;
font-size: 24px;
padding: 5px 10px;
border-radius: 5px;
}
div[id] {
width: 100%;
height: 100%;
}
#blue {
background-color: slategrey;
}
#black {
background-color: #424242;
}
#pink {
background-color: #fcc;
}
/* :target可选中location.hash 的值为id值的元素,即被锚点标记*/
div[id]:not(:target) {
display: none;
}
</style>
</head>
<body>
<div class="btnWrap">
<a href="#blue" class="bgblue">blue</a>
<a href="#black" class="bfblack">black</a>
<a href="#pink" class="bgpink">pink</a>
</div>
<div id="blue"></div>
<div id="black"></div>
<div id="pink"></div>
</body>
</html>
【结果】
2.子元素过滤选择器
E:first-child:如果E是某元素的第一个子元素,则将样式赋予E
【例1】
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
width: 50px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
margin-left: 3px;
}
p:first-child {
background-color: slategrey;
}
</style>
</head>
<body>
<p class="demo">0</p>
<div>
<p class="test">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>
</html>
【结果】class为demo的p元素是body的第一个子元素,class为test的p元素是div的第一个子元素,因此将样式赋予它俩
【例2】
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
}
p,span {
width: 50px;
height: 50px;
line-height: 50px;
float: left;
text-align: center;
margin-left: 3px;
margin-top: 10px;
}
span {
display: block;
}
p:first-child {
background-color: slategrey;
}
</style>
</head>
<body>
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>
</html>
【结果】因为p元素不是div的第一个子元素,因此不赋予样式
E:last-child:与:first-child同理
E:only-child:若E是某元素的唯一一个子元素,则赋予样式
【例】
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
margin-left: 3px;
}
p:only-child {
background-color: steelblue;
}
</style>
</head>
<body>
<div>
<p>1</p>
</div>
<p>2</p>
</body>
</html>
【结果】因为内容为1的p元素是div唯一一个子元素,因此赋予样式,而内容是2的元素还有兄弟元素div,即不是body唯一的子元素,因此不赋予样式
E:nth-child(n):若E在其兄弟节点中排第n位,则将样式赋予E
【注】n为自然数,从0开始计数,css从1开始计数
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
}
p,span {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
margin: 20px 5px;
}
span {
display: block;
}
p:nth-child(2n) {
background-color: steelblue;
color: #fff;
}
p:nth-child(2n+1) {
background-color: #333;
color: #faa;
}
</style>
</head>
<body>
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>
</html>
【结果】给在兄弟节点中排偶数位的p元素设置背景颜色steelblue,字体颜色白色,奇数位的p元素设置背景颜色黑色,字体颜色位粉色,而第一个子元素span则不带它玩
E:nth-last-child(n):与nth-child(n)倒序
【例】
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
}
div::after {
content: '';
display: block;
clear: both;
}
p,
span {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
margin: 20px 5px;
}
span {
display: block;
}
p:nth-child(2n) {
background-color: steelblue;
color: #fff;
}
p:nth-last-child(2n) {
border-radius: 10px;
background-color: tan;
color: #424242;
}
</style>
</head>
<body>
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>
</html>
【结果】
type系列选择器均在与E同类型的兄弟元素中进行选择
E:first-of-type
E:last-of-type
E:only-of-type
E:nth-of-type(n)
E:nth-of-last-type(n)
【例】
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
}
div {
margin: 10px;
}
span,p {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
margin-right: 5px;
background-color: thistle;
float: left;
color: #fff;
}
span {
display: block;
}
p:first-of-type {
background-color: slategray;
}
p:last-of-type {
background-color: #333;
}
span:only-of-type {
background-color: teal;
}
p:nth-of-type(2n) {
border: 2px solid steelblue;
}
p:nth-of-type(2n+1) {
border-radius: 10px;
}
</style>
</head>
<body>
<div>
<span>0</span>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>
</html>
【结果】
3.内容过滤选择器
E:empty:选择内容完全为空的E
【例】
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: steelblue;
float: left;
margin-left: 5px;
position: relative;
}
span {
width: 50px;
height: 50px;
line-height: 50px;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
background-color: #424242;
color: #fff;
}
div:empty {
border-radius: 20px;
}
</style>
</head>
<body>
<div></div>
<div><span>1</span></div>
<div>2</div>
<div><span></span></div>
</body>
</html>
【结果】
4.表单对象属性过滤选择器
E:checked
E:disabled
E:enabled
E:read-only
E:read-write
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.demo1 input:checked + span {
background-color: #fcc;
padding: 2px 5px;
}
.demo1 input:checked + span::after {
content: '爱是热,被爱是光';
color: #fff;
}
input[type='text'] {
width: 250px;
height: 30px;
text-indent: 10px;
border: none;
display: block;
margin-top: 3px;
border-radius: 10px;
outline: none;
}
.demo2 input:disabled {
background-color: #fcc;
}
.demo2 input:enabled {
background-color: thistle;
}
.demo3 input:read-only {
background-color: #666;
color: #fff;
}
.demo3 input:read-write {
background-color: #cfc;
}
</style>
</head>
<body>
<div class="demo1">
<!-- checked -->
<label for="demo">张爱玲语录</label>
<input type="checkbox" id="demo">
<span></span>
</div>
<div class="demo2">
<!-- disabled, enabled -->
<input type="text" disabled>
<input type="text">
</div>
<div class="demo3">
<!-- read-only, read-write -->
<input type="text" readonly value="红玫瑰与白玫瑰">
<input type="text">
</div>
</body>
</html>
【结果】