CSS选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style type="text/css">
/*选择器*/
/*标签选择器，需要修改哪个标签的样式，就可以用标签名{}这种方式来修改。
标签选择器里的样式会改变所有这种类型的标签的样式*/
div{
color: red;
}
/*ID选择器（修改某一个标签的样式）
1、在需要修改的样式的标签里面添加id属性，设置id
2、在style标签里面通过#id{}来修改样式
注意：一个标签只能有一个id
一个id名只能给一个标签使用*/
#p1{
background-color: blue;
}
#p2{
background-color: red;
}
/*类选择器
（给某一类标签添加样式）
1、给需要修改样式的标签添加类名。
2、在style标签里面用过的 .类名{} 修改样式
注意：一个标签可以有多个类名，类名之间用空格隔开，一个类名可以被多个标签使用。*/
.sp{
color: red;
}
/*后代选择器
开放的过程中为了避免两个人起相同的名，可以在选择器的前面添加父级的选择器用于区别
后代选择器只对整个选择器里面的最后一个选择器生效*/
#huangtong p{
color: black;
}
#baiyin p{
color: darkcyan;
}
#huangjin p{
color: chartreuse;
}
/*群组选择器
可以给多个选择器同一个样式。
多个选择器之间使用逗号隔开*/
#huangjin, #huangjin p{
color: cyan;
}
/*通配选择器*/
*{
background-color: lightcyan;
}
</style>
</head>
<body>
<div>我是一个div</div>
<p id="p1">你是P</p>
<p id="p2">你还是p</p>
<span class="sp">靴鞋</span>
<span class="sp">箱包</span>
<span class="sp">房产</span>
<div id="huangtong">
<p>段落1</p>
</div>
<div id="baiyin">
<p>段落2</p>
</div>
<div id="huangjin">dsa
<p>段落3</p>
</div>
</body>
</html>
选择器的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.divF{
font-size: 40px;
color: red;
}
/*同名或者同类型的选择器
同名的选择器样式都会被添加，出现重复的样式的时候后面会覆盖前面的样式*/
.divF{
font-size: 100px;
}
.divFF{
color:white;
background-color: greenyellow;
}
/*p{
background-color: red;
color: blue;
}
*{
font-size: 55px;
color: greenyellow;
}*/
/*不同类型的选择器同时出现的时候，如果有样式的冲突，则按权值来计算优先级
1、* 0
2、标签选择器 1
3、类选择器 10
4、id选择器 100
5、style行间样式 1000
6、！important 10000
6、后代选择器 看里面的组成*/
div p{
color: blue;
}
#first p{
color: red;
}
</style>
</head>
<body>
<!--<div class="divF divFF">我是一个div</div>-->
<!--<p>AKL</p>-->
<div id="first">
<p class="pp">p1</p>
</div>
<div id="second">
<p class="pp">p2</p>
</div>
<div>
<div>
<div>
<div>
<p>p3</p>
</div>
</div>
</div>
</div>
</body>
</html>
网友评论