这次就不多说什么 了，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
1、标签选择器：给同一种标签添加样式；
2、通用选择器（通配符）：给所有的标签添加样式；
注意：通用选择器是先遍历页面当中所有的标签，然后再给这些标签添加样式，所以这个选择器的性能非常低；
一般只会在测试的时候使用，用于css的初始化，但是在项目当中不要使用；
3、类选择器：给同一类（同一个群体）标签添加样式；要先给同一类标签取一个名字；
注意：一个类名可以给多个标签，一个标签可以有多个类名，多个类名之间用“空格”隔开；
4、id选择器：给某一个标签添加样式；要先取一个id名
*/
/* 后代选择器：选择的是某一个元素的后代元素 */
.two #th{
color: peru;
}
/* 子选择器：选择某个元素的直接后代 */
#one>p{
background: red;
}
/* 相邻兄弟选择器：选择紧挨着该元素的后面的一个元素 */
#one>p+div{
background: orange;
}
/* 通用兄弟选择器：选择的是该元素后面的所有的某一种元素 */
.two>p~p{
background: pink;
}
/* 并集选择器：将两个不相干的元素同时添加相同属性 */
h1,h3{
color: palegreen;
}
/* 交集选择器：当标签和类名（ID名）都冲突的时候，使用交集选择器 */
p.three{
color: red;
}
</style>
</head>
<body style="margin: 100px 200px;">
<div id="one">
<p>我是p1标签</p>
<div>我是div1标签</div>
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
</div><br />
<div class="two">
<p class="three" >我是p2标签</p>
<p>我是p3标签</p>
<p>我是p4标签</p>
<div id="th">我是div2标签</div>
<h3>我是h3标签</h3>
</div>
</body>
</html>
效果：
扫一扫
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
