1.元素选择器
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
position: relative;
left: 100px;
width: 50px;
height: 50px;
background-color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 元素选择器 格式 元素名{}-->
<!-- 如果有相同元素则都有效果 -->
<div >11</div>
<div >22</div>
</body>
</html>
效果图如下:
2.1class选择器 (匿名)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.d{
position: relative;
left: 100px;
width: 50px;
height: 50px;
background-color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- class选择器(匿名) 格式 class值{}-->
<!-- 如果有class值相同则都有效果 -->
<div >
<p class="d">我是标题1</p>
</div>
<p class="d">我是标题2</p>
</body>
</html>
效果图如下 :
2.2class选择器 (有名)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div.d{
position: relative;
left: 100px;
width: 50px;
height: 50px;
background-color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- class选择器(有名) 格式 .class值{}-->
<!-- 只有div下的class="d"有效果 p标签不会有效果 -->
<div class="d" >我是标题1</div>
<p class="d">我是标题2</p>
</body>
</html>
效果图如下 :
3.id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#d{
position: relative;
left: 100px;
width: 50px;
height: 50px;
background-color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- id选择器 格式 #idclass值{}-->
<!-- id值相同都有效果 -->
<div id="d" >我是标题1</div>
<p id="d">我是标题2</p>
</body>
</html>
效果图如下:
选择器优先级问题
id选择器>class选择器>元素选择器
样式表优先级问题
内嵌>内联>外联>浏览器自带
4.分组选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#id,.class,h2{
position: relative;
left: 100px;
width: 50px;
height: 50px;
background-color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 分组择器 格式 ,隔开{}-->
<!-- 无论是id class 还是 元素 选择器 只要写了都有效果 -->
<div id="id" >我是标题1</div>
<p class="class">我是标题2</p>
<h2 >我是标题2</h2>
</body>
</html>
效果图如下:
5.子类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div .class{
position: relative;
left: 100px;
width: 50px;
height: 50px;
background-color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<!-- 子类择器 格式 1元素空格2元素{}-->
<!-- 只要1元素下的2元素才有效果 -->
<div >
<p class="class">我是标题1</p>
</div>
<p class="class">我是标题2</p>
</body>
</html>
效果图如下: