选择器是用来选择标签用的
一、标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>id选择器</div>
</body>
</html>
标签选择器可以把某一类属性全都选择出来
二、类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
span {
font-size: 200px;
}
.g {
color: #4285f4;
}
.o1 {
color: #ea4436;
}
.o2 {
color: #fbbc07;
}
.l {
color: #35a954;
}
</style>
</head>
<body>
<span class="g">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="o1">e</span>
</body>
</html>
上面.声明下面class调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
.red {
color: red;
}
.font20 {
font-size: 20px;
}
</style>
</head>
<body>
<div class="red font20">多类名选择器</div>
<div>多类名选择器</div>
<div class="red">多类名选择器</div>
<div>多类名选择器</div>
</body>
</html>
多类名选择器
样式显示效果跟HTML元素中类名先后顺序没有关系，受CSS样式书写的上下顺序有关
各个类名之间用空格隔开
三、id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
#id {
color: red;
}
</style>
</head>
<body>
<div id="id">id选择器</div>
</body>
</html>
每个界面不能有重复的id
四、通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>通配符选择器</div>
<p>通配符选择器</p>
</body>
</html>
代表所有标签
五、后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
div a {
color: #f00;
}
</style>
</head>
<body>
<div>
<a>div的后代</a>
</div>
<a>不是div的后代</a>
</body>
</html>
后代选择器中间用空格隔开
六、子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
div > a {
color: #f00;
}
</style>
</head>
<body>
<div>
<a>div的子代</a>
<span>
<a>div的后代，不是子代</a>
</span>
</div>
</body>
</html>
子代选择器中间用 大于号 > 隔开
七、交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
div.red {
color: #f00;
}
</style>
</head>
<body>
<div>交集选择器</div>
<div>交集选择器</div>
<div class="red">交集选择器</div>
<p>交集选择器</p>
<p>交集选择器</p>
<p class="red">交集选择器</p>
</body>
</html>
用的较少，特殊情况使用
八、并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
div , p {
color: #f00;
}
</style>
</head>
<body>
<div>并集选择器</div>
<div>并集选择器</div>
<div>并集选择器</div>
<p>并集选择器</p>
<p>并集选择器</p>
<p>并集选择器</p>
<a>并集选择器</a>
<a>并集选择器</a>
<a>并集选择器</a>
<a>并集选择器</a>
<h1>并集选择器</h1>
<h1>并集选择器</h1>
<h1>并集选择器</h1>
</body>
</html>
适合用于相同样式的集体声明
九、伪类选择器
1.连接伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
a:link { /*未访问过的链接*/
color: #333;
font-size: 50px;
text-decoration: none; /*取消下划线*/
font-weight: 700;
}
a:visited { /*已访问过的链接*/
color: orange;
}
a:hover { /*鼠标经过时*/
color: #f10215;
}
a:active { /*鼠标点击的时候*/
color: #2fceff;
}
</style>
</head>
<body>
<a href="lianxi.css">练习</a>
</body>
</html>
link visited hover active 这四个的顺序不能改变
网友评论