复杂选择器
1. 后代选取器
后代选取器匹配元素所有的内部元素，无论嵌套多少层都可以被选择。
实例：demo01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选取器</title>
<style type="text/css">
#content .child{
color: red;
}
</style>
</head>
<body>
<div id="content">
<div class="child">
第一层前套的子元素1
<div class="child">
第二层前套的子元素1
</div>
</div>
<div class="child">
第一层前套的子元素2
<div class="child">
第二层前套的子元素2
</div>
</div>
</div>
</body>
</html>
2. 直接子元素选择器
与后代选择器相比，直接子元素选择器（Child selectors）只能选择作为某元素直接子元素，嵌套的不能被选中。
直接子元素使用“>”符号来表示
实例：demo02
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>直接子元素选择器</title>
<style type="text/css">
#content > .child2-1{
color: red;
}
</style>
</head>
<body>
<div id="content">
<div class="child1-1">
第一层前套的子元素1
<div class="child2-1">
第二层前套的子元素1
</div>
</div>
<div class="child1-1">
第一层前套的子元素2
<div class="child2-1">
第二层前套的子元素2
</div>
</div>
</div>
</body>
</html>
3. 相邻兄弟选择器
相邻兄弟选择器（Adjacentsibling selector）可选择紧接在一个元素后的元素，且二者有相同父元素。只能选择一个。
相邻兄弟选择器使用“+”符号来表示
实例：demo03
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
p + .child1-1{
color: red;
}
</style>
</head>
<body>
<div id="content">
<p>段落</p>
<div class="child1-1">第一层前套的子元素1</div>
<div class="child1-1">第一层前套的子元素2</div>
</div>
</body>
</html>
4. 后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
后续兄弟选择器使用“~”符号来表示
实例：demo04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后续兄弟选择器</title>
<style type="text/css">
p ~ .child1-1{
color: red;
}
</style>
</head>
<body>
<div id="content">
<p>段落</p>
<div class="child1-1">第一层前套的子元素1</div>
<div class="child1-1">第一层前套的子元素2</div>
</div>
</body>
</html>
5. 伪类选择器
选择器 |
示例 |
示例说明 |
:checked |
input:checked |
选择所有选中的表单元素 |
:disabled |
input:disabled |
选择所有禁用的表单元素 |
:empty |
p:empty |
选择所有没有子元素的p元素 |
:enabled |
input:enabled |
选择所有启用的表单元素 |
:first-of-type |
p:first-of-type |
选择每个父元素是p元素的第一个p子元素 |
:in-range |
input:in-range |
选择元素指定范围内的值 |
:invalid |
input:invalid |
选择所有无效的元素 |
:last-child |
p:last-child |
选择所有p元素的最后一个子元素 |
:last-of-type |
p:last-of-type |
选择每个p元素是其母元素的最后一个p元素 |
:not(selector) |
:not(p) |
选择所有p以外的元素 |
:nth-child(n) |
p:nth-child(2) |
选择所有p元素的第二个子元素 |
:nth-last-child(n) |
p:nth-last-child(2) |
选择所有p元素倒数的第二个子元素 |
:nth-last-of-type(n) |
p:nth-last-of-type(2) |
选择所有p元素倒数的第二个为p的子元素 |
:nth-of-type(n) |
p:nth-of-type(2) |
选择所有p元素第二个为p的子元素 |
:only-of-type |
p:only-of-type |
选择所有仅有一个子元素为p的元素 |
:only-child |
p:only-child |
选择所有仅有一个子元素的p元素 |
:optional |
input:optional |
选择没有"required"的元素属性 |
:out-of-range |
input:out-of-range |
选择指定范围以外的值的元素属性 |
:read-only |
input:read-only |
选择只读属性的元素属性 |
:read-write |
input:read-write |
选择没有只读属性的元素属性 |
:required |
input:required |
选择有"required"属性指定的元素属性 |
:root |
root |
选择文档的根元素 |
:target |
#news:target |
选择当前活动#news元素(点击URL包含锚的名字) |
:valid |
input:valid |
选择所有有效值的属性 |
:link |
a:link |
选择所有未访问链接 |
:visited |
a:visited |
选择所有访问过的链接 |
:active |
a:active |
选择正在活动链接 |
:hover |
a:hover |
把鼠标放在链接上的状态 |
:focus |
input:focus |
选择元素输入后具有焦点 |
:first-letter |
p:first-letter |
选择每个<p> 元素的第一个字母 |
:first-line |
p:first-line |
选择每个<p> 元素的第一行 |
:first-child |
p:first-child |
选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
:before |
p:before |
在每个<p>元素之前插入内容 |
:after |
p:after |
在每个<p>元素之后插入内容 |
:lang(language) |
p:lang(it) |
为<p>元素的lang属性选择一个开始值 |
实例1：提示框文字
实例：demo04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#content{
position: relative;
width: 200px;
}
.cart{
display: none;
position: absolute;
top: 0;
left: 0;
margin-top: -35px;
padding: 5px 10px;
height: 20px;
background-color: black;
border-radius: 5px;
color: white;
}
.cart:after{
content: "";
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -5px;
}
#content:hover .cart{
display: inline-block;
}
</style>
</head>
<body>
<br /><br /><br /><br />
<div id="content">
请把鼠标移上来
<div class="cart">
提示文字
</div>
</div>
</body>
</html>
6. 属性选择器
选择器 |
描述 |
[attribute] |
用于选取带有指定属性的元素。 |
[attribute=value] |
用于选取带有指定属性和值的元素。 |
[attribute~=value] |
用于选取属性值中包含指定词汇的元素。 |
[attribute|=value] |
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
[attribute^=value] |
匹配属性值以指定值开头的每个元素。 |
[attribute$=value] |
匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] |
匹配属性值中包含指定值的每个元素。 |
实例1：输入元素
实例：demo05
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选取器</title>
<style type="text/css">
form{
border-radius: 5px;
display: inline-block;
padding: 5px;
border: 1px solid rgba(0,0,0,0.3);
box-shadow: 1px 3px 1px rgba(0,0,0,0.4),
-1px 4px 1px rgba(0,0,0,0.3),
2px 5px 3px rgba(0,0,0,0.2),
-2px 6px 3px rgba(0,0,0,0.1);
}
input {
height: 30px;
margin: 0;
padding: 0px 10px;
border: 1px solid rgba(0,0,0,0.4);
border-radius: 5px;
font-size: 18px;
color: #DC143C;
}
input[type=button]{
}
input:focus{
border: 1px solid rgba(255,0,0,1);
outline: 0;
}
input:active{
border: 1px solid rgba(0,0,255,1);
outline: 0;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />
<input type="button" value="登陆" />
</form>
</body>
</html>
[作业实验]
1. 实现如下效果图，其中右边两个白色区块，当鼠标进入的时候图片切换成二维码
2. 实现如下效果，要求表格每三行的颜色不同，当鼠标进入头像单元格时图片方法，以单元格顶对齐、左对齐。
