css选择器
选择器
选择器{
key:value;
key:value;
......
}
- 元素选择器
- 元素名作为选择器，针对所有这样的元素修饰
- eg：
<!--元素选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style type="text/css">
p{
font-size:20px;
}
div{
background-color: yellow;
}
</style>
</head>
<body>
<p>这是一个段落</p>
<p>这是一个段落</p>
<div>这是一个div</div>
<div>这是一个div</div>
</body>
</html>
- 类选择器
- 可以给元素指定类，class属性，可以有多个类别值，多个值用空格隔开
- 类选择器：
.类{}
- 针对这个类所有的元素修饰
- eg:
<!--类选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.one{
background-color: yellow;
}
.two{
color:deeppink;
}
</style>
</head>
<body>
<p class="one">这是一个段落</p>
<p class="two">这是一个段落</p>
<div class="one">这是一个div</div>
<div class="two">这是一个div</div>
<div class="one two">这是一个div</div> <!--加多个类别-->
</body>
</html>
- id选择器
- 可以给元素加id属性，
- 一个页面建议id不重复，利用id代表唯一的它
- CSS中可以通过id修饰这个元素
- JS中可以通过id找到这个元素操作它
- id选择器
#id{}
- 一个元素，不存在多个id之说
- eg：
<!--id选择器-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#one{
background-color: yellow;
}
#two{
color:deeppink;
}
</style>
</head>
<body>
<!--一般不嵌套多个-->
<p id="one">这是一个段落</p>
<div id="two">这是一个div</div>
</body>
</html>
- 选择器组合
- 多个选择器用逗号隔开
- 选择器组合中的每个选择器有同样的属性
- eg
<!--选择器组合-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器组合</title>
<!--组合选择器中的每个选择器有同样的属性-->
<style type="text/css">
#one,p,div{
font-size: 20px;
background-color: lightcyan;
}
</style>
</head>
<body>
<h2 id="one">标题</h2>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<div>div</div>
</body>
</html>
- 选择器嵌套
-
selector1,selector2{}
- selector1对应的元素里面符号selector2的元素，儿子，孙子都可以
- eg
<!--选择器嵌套-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器嵌套</title>
<style type="text/css">
p span{
color: red;
}
div span{
color: red;
}
</style>
</head>
<body>
<p>段落中有一个<span>这是p中的span</span></p><!--也可以直接在p中span加，但嵌套选择器更方便-->
<div> <!--不是直接子元素也可以-->
<p>段落中有一个<span>这是p中的span</span></p>
</div>
<span>这是一个独立的span</span>
</body>
</html>
- 选择器的优先级
- 字体，颜色，列表等样式，子元素继承父元素的样式
- 继承的样式优先级低于当前元素新增加的样式
- 对于当前元素的样式：
- 可以加权计算
- id选择器，加100
- 类选择器，加10
- 元素选择器，加1
- 结果大的优先级最高
- 结果一样的按照先后顺序，后面的覆盖前面的
- eg：
<!--选择器优先级测试-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器优先级测试</title>
<style type="text/css">
div span{ /*权值为2 1+1*/
color:purple;
}
span{ /*权值为1*/
color:blue;
}
p{
color:red;
}
.one span{ /*权值为11 10 + 1*/
color: yellow;
}
</style>
</head>
<body>
<div> div
<p class="one"> 段落
<span>这是一个span1</span> <!--span继承了红色，但又加了蓝色和紫色和黄色，
这三个优先级都高于继承的红色，根据加权计算，最后是黄色-->
</p>
</div>
<p>这是一个段落</p>
<span>这是一个span</span>
</body>
</html>
| 
转播
