元素选择器
元素选择器是最常用的选择器,也叫类型选择器
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
h2{
color:darkseagreen;
}
span{
color:gold;
font-size:48px;
}
</style>
</head>
<body>
<h2>hello</h2>
<h2>hello</h2>
<span>world</span>
</body>
</html>
类选择器
- 元素选择器可以设置网页中相同标记统一格式,但是如果需要对相同标记中某些个别标记做特殊效果设置时,使用HTML元素标记就无法实现
- 类选择器的定义是以英语原点开头,名称可以任意,但是不能是中文
- 语法格式如下:
<标记名称 class="类选择器名称1 类选择器名称2 ...">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.yourClass{
color:darkseagreen;
}
.myClass{
color:gold;
font-size:48px;
text-decoration: underline;
}
</style>
</head>
<body>
<h2 class="yourClass">hello</h2>
<span class="myClass yourClass">hello</span>
<span>world</span>
</body>
</html>
ID选择器
- ID选择器在引用的时候使用的的是id属性
- 在一个html中,ID选择器只允许使用一次
- ID选择器不能结合使用,因为ID属性不允许有空格分隔的词列表
- 语法格式如下:
<标记名称 id="ID选择器">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<style>
#yourID{
color:darkseagreen;
}
#myID{
color:gold;
font-size:48px;
text-decoration: underline;
}
</style>
</head>
<body>
<h2 id="yourID">hello</h2>
<span id="myID">hello</span>
<span>world</span>
</body>
</html>
包含选择器
当HTML标记发生嵌套时,就可以使用包含选择器
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>包含选择器</title>
<style>
h2 span{
color: greenyellow;
font-size: 48px;
}
</style>
</head>
<body>
<h2>hello<span>world!</span></h2>
<span>world</span>
</body>
</html>
组合选择器
如果某些选择器定义的样式完全相同或部分相同,就可以利用并集选择器为其定义相同的css样式
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style>
h2,span{
color: greenyellow;
font-size: 48px;
}
</style>
</head>
<body>
<h2>hello</h2>
<h3>hello world!</h3>
<span>hello</span>
</body>
</html>
属性选择器
- 它的作用是对带有指定属性的HTML元素进行样式设置
- 例如,定义具有href属性的超链接元素,让其文字显示为红色,其样式定义的语法格式如下所示:
a[href]{
color:red;}
!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
p[align]{
color: indianred;
font-size: 48px;
}
p[align=right]{
color: turquoise;
font-size: 24px;
}
</style>
</head>
<body>
<p align="center">hello world!</p>
<p align="right">hello world too</p>
</body>
</html>