3 选择器
所谓选择器，指的是选择施加样式目标的方式。
3.1 元素选择器
用标签名作为选择器，选中所有相应的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
font-size:24px;
color: red;
}
p{
font-size: 32px;
color:blue;
}
</style>
</head>
<body>
<div>元素选择器</div>
<p>元素选择器1</p>
<p>元素选择器2</p>
</body>
</html>
3.2 id选择器
顾名思义，是根据id来选择元素，其样式定义形式为：
#idname{
……
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {
width: 200px;
height: 200px;
background-color: red;
}
#div2 {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
显示结果为
3.3 类选择器
根据class属性来选择元素，其样式定义形式为：
.className{
……
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.even {
width: 200px;
height: 200px;
background-color: red;
}
.odd {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
</body>
</html>
显示结果为：
从结果可以看出: .odd{……}定义的样式会施加到所有class="odd"的元素上，比如上例中的第一个和第三个
。
3.4属性选择器
选择器 描述
[attribute] 选取带有指定属性的元素。
[attribute=value] 选取带有指定属性和值的元素。
[attribute~=value] 选取属性值中包含指定词汇的元素。
[attribute|=value] 选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 100px;
height: 50px;
border: 1px solid gray;
}
[title] {
background-color: green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="a div">4</div>
<div title="div a">5</div>
<div title="div">6</div>
</body>
</html>
运行结果：
从结果可以看出，只有第3个div没有背景色，因为只有它没有title属性。
修改选择器为
[title = 'div']
显示结果为
从结果可以看出，只有第6个div应用了绿色背景的样式，因为只有第6个div的title属性等于div
~=：选中属性值包含指定完整单词的元素,类似word中的全字匹配
将上例选择器修改为
[title ~= 'div']
修改选择器
[title |= 'div']
修改选择器
[title ^= 'div']
修改选择器
title $= 'div'
修改选择器
title *= 'div'
3.5关系选择器
选择器 描述
E F 选择E元素的后代元素F
E > F 选择E元素的直接后代元素F
E + F 选择E元素的第一个弟元素F
E ~ F 选择E元素的所有弟元素F
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
border: 1px solid green;
min-height: 30px;
max-width: 300px;
margin-left: 50px;
background-color: white;
}
#myself div{
background-color:greenyellow;
}
</style>
</head>
<body>
<div>大哥</div>
<div id="myself">
我
<div>
大儿
<div>大孙子</div>
<div>二孙子</div>
</div>
<div>二儿</div>
<div>三儿</div>
<div>四儿</div>
</div>
<div>三弟</div>
<div>四弟</div>
</body>
</html>
修改选择器
#myself>div
结果：
修改选择器
#myself+div
结果：
修改选择器
#myself~div
结果：
3.6并选择器：
将相同的样式放在一起，类名直接用英文逗号分隔。
写法：E,F（中间用英文的逗号分隔）
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#div1,#div3 {
position: relative;
width: 100px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>
<div id="div3">我是div3</div>
</body>
</html>
3.7通配符选择器：
通配符选择器可以选中页面所有的标签
写法：*{}
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
max-width: 200px;
min-height: 60px;
margin: 5px;
border: 1px green solid;
}
</style>
</head>
<body>
<div>我是div1</div>
<div>
我是div2
<p>我是p1</p>
<p>我是p2</p>
<p>我是p3</p>
</div>
<div>我是div3</div>
</body>
</html>
3.8 伪类、伪元素选择器
伪类选择器：
根据元素不同的状态选择元素。
伪类名 描述
:active 选择激活的元素
:focus 选择有输入焦点的元素
:hover 选择鼠标悬停在上方的元素
:link 选择未访问的链接
:visited 选择已访问的链接
:first-child 选择第一个子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a:link{
color: gray;
}
a:visited{
color: green;
}
</style>
</head>
<body>
<a href="#1" target="_self">伪类选择器</a>
<a href="#2" target="_self">伪类选择器</a>
<a href="#3" target="_self">伪类选择器</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
img:hover{
width: 240px;
height: 200px;
}
input:focus{
border: 1px skyblue solid;
}
input:active{
background-color: red;
}
</style>
</head>
<body>
<img src="榴莲.png" />
<br>
<label>数量：</label>
<input type="text" size="3" value="1"/>
<input type="button" value="购买"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
border: 1px green solid;
min-height: 30px;
max-width: 300px;
margin-left: 50px;
background-color: white;
}
div:first-child{
border: 1px gold dotted;
}
div:hover{
min-height: 40px;
background-color: green;
}
</style>
</head>
<body>
<div>大哥</div>
<div id="myself">
我
<div>
大儿
<div>大孙子</div>
<div>二孙子</div>
</div>
<div>二儿</div>
<div>三儿</div>
<div>四儿</div>
</div>
<div>三弟</div>
<div>四弟</div>
</body>
</html>
伪元素选择器
伪元素名 描述
:first-letter 选择文本的首字母
:first-line 选择文本的首行
:after 在元素后面添加内容
:before 在元素前面添加内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p:first-letter{
font-size: 24px;
color: red;
}
p:first-line{
color: green;
}
p:before{
content: url("右三角.jpg");
}
p:after{
content: url("左三角.jpg");
}
</style>
</head>
<body>
<h1>选择器总结</h1>
<p>1 元素选择器，按照标签名选择</p>
<p>2 id选择器，按照id属性选择</p>
<p>3 类选择器，按照class属性选择</p>
<p>4 属性选择器，按照指定属性选择</p>
<p>5 关系选择器，按照元素的关系选择<br>
E F:选择E元素的后代元素F<br>
E > F:选择E元素的直接后代元素F<br>
E + F:选择E元素的第一个弟元素F<br>
E ~ F:选择E元素的所有弟元素F
</p>
</body>
</html>
3.9 选择器总结
什么是选择器？
选择器：描述后面的样式施加到哪些目标，或者说是根据某个依据来选择应用样式的目标。
根据选择依据的不同，就产生了各种不同的选择器。
元素选择器
按照标签（元素）的名称来选择相应的目标
div{
background-color:red;
}
id选择器
根据元素的id属性来选择，比方下例中的选择器就是选中id="tt"的目标，书写格式是：
#idname
#tt{
font-size:24px;
}
类选择器
根据元素的class属性来选择，比方下例中的选择器选中class="tt"的元素，其书写格式为：
.classname
.tt{
font-size:24px;
}
属性选择器
根据属性的特征来选择应用样式的目标，所以从这个意义上来讲，它包含了id选择器和类选择器，书写格式为
[title]:选择设置了title属性的元素
[title=“tt”]:选择title属性等于"tt"的元素
[title^=“tt”]:选择title属性以"tt"开头的元素
[title$=“tt”]:选择title属性以"tt"结尾的元素
[title~=“tt”]:选择title属性包含完整"tt"单词的元素
[title*=“tt”]:选择title属性包含"tt"的元素
关系选择器：
根据元素见的家族关系来选择目标
E F：在选择器E选中的目标中再去选中后代满足F选择器的目标
E>F:选择直接后代
E+F:选择第一个“弟”元素
E~F:选择所有的“弟”元素
学习方法的提示：这些细节有可能记不住了，但是只要理解了就好，需要用的时候不记得查一下就行。
伪类、伪元素选择器
伪元素：其效果与增加一个元素来实现的效果等价，所以称之为伪元素
伪类：其效果与增加一个类来实现的效果等价，所以称之为伪类
组合选择器：多个选择器使用同一个样式描述，以逗号隔开
685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
