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>