02、css选择器
一、css
# CSS是Cascading Style Sheets的简称，中文称为层叠样式表
二、导入CSS文件
1、链接式
<link rel="stylesheet" href="css.css">
# 通过html这个语言规范里引入的 <link> 标签 # 先把css准备好，css没准备好，html就不加载完，所以只要看到结果就是完整的
2、导入式
<style> @import "css.css"; </style>
# <style>里面是css代码，是按照css语法引入过来的 # 先加载html，后加载css，所以有时会先看到只有html的页面闪一下css页面加载完，才显示一个完整的页面
三、基本选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div{*/ /* 标签名称：元素选择器 */ /* width: 100px;*/ /* height: 100px;*/ /* background-color: red;*/ /*}*/ #d1{ /* 选择器{css属性名：属性值} id选择器*/ width: 100px; height: 100px; background-color: red; } .c1{ /* 选择器{css属性名：属性值} id选择器*/ width: 200px; height: 100px; background-color: blue; } /*#d3{ !* 选择器{css属性名：属性值} id选择器*!*/ /* width: 200px;*/ /* height: 100px;*/ /* background-color: blue;*/ /*}*/ </style> </head> <body> <div id="d1"></div> <div id="d2" class="c1"></div> <div id="d3" class="c1"></div> <div id="d4"></div> </body> </html>
1、* 通用元素选择器
*{width:100px;}
2、元素选择器
div{width:100px;} <!--标签名称{css属性:值}-->
3、id选择器
<!--html示例代码:--> <div id="d1"> </div> <!--css写法:--> #d1{ background-color: green; width: 100px; height: 100px; }
4、类选择器
<!--html代码:--> <div id="d1" class="c1"> 李晨浩 </div> <div id="d2" class="c2"> 李海煜 </div> <div id="d3" class="c1"> 张建志 </div> <!--css写法--> .c1{ background-color: green; width: 100px; height: 100px; }
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div{*/ /* 标签名称：元素选择器 */ /* width: 100px;*/ /* height: 100px;*/ /* background-color: red;*/ /*}*/ #d1{ /* 选择器{css属性名：属性值} id选择器*/ width: 100px; height: 100px; background-color: red; } .c1{ /* 选择器{css属性名：属性值} id选择器*/ width: 200px; height: 100px; background-color: blue; } /*#d3{ !* 选择器{css属性名：属性值} id选择器*!*/ /* width: 200px;*/ /* height: 100px;*/ /* background-color: blue;*/ /*}*/ </style> </head> <body> <div id="d1"></div> <div id="d2" class="c1"></div> <div id="d3" class="c1"></div> <div id="d4"></div> </body> </html>
四、属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> [kxq]{ color:red; } p[kxq]{ font-family: "Times new reoman"; font-size: 30px; } div[kxq="dasb"]{ font-family: "fasdf"; font-size: 50px; } /* ~ 取多个值里面的一个*/ [kxq~="Li"]{ color: aqua; } /*以指定开头的*/ [kxq^="s"]{ color: blue; } /* 以指定结尾的*/ [kxq^="i"]{ color: blue; } /*只要包含就行*/ [kxq*="s"]{ color: blue; } </style> </head> <body> <div>hello1</div> <!--属性有两个值 一个是sb 一个是Li--> <div kxq="sb Li">kxq ss</div> <div kxq="dasb">hellol</div> <p kxq="dasb">hello2</p> <div class="div1 div2">hello1</div> </body> </html>
""" E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）
p[kxq] { color:#f00; } E[att=val] 匹配所有att属性等于“val”的E元素
div[class=”error”] { color:#f00; } E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; } E[attr^=val] 匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;} E[attr$=val] 匹配属性值以指定值结尾的每个元素
div[class$="test"]{background:#ffff00;} E[attr*=val] 匹配属性值中包含指定值的每个元素
div[class*="test"]{background:#ffff00;} """
五、后代选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*.c1 .c2{*/ /* 后代选择器 */ /* color:blue;*/ /*}*/ .c1 > span{ /* 儿子选择器 */ color:blue; } /*.c1 span{*/ /* color:blue;*/ /*}*/ </style> </head> <body> <div id="d1"> <span class="c2">span1</span> </div> <div id="d2" class="c1"> <span class="c2">span2</span> <div> <span>span4</span> </div> </div> <div id="d3" class="c1"> <span class="c2">span3</span> </div> </body> </html>
六、组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /**{*/ /*color: red;*/ /*}*/ /*div{*/ /*background-color: aquamarine;*/ /*}*/ /*#littleP{*/ /*background-color: aquamarine;*/ /*}*/ /*.kxq{*/ /*background-color: green;*/ /*}*/ /*!*名字是div标签 class是kxq*!*/ /*div.kxq{*/ /*color: bisque;*/ /*}*/ /*想让 div 和 pppp 都变红怎么办 逗号*/ #littleP,div.kxq{ color: blue; } /*后代选择器 空格*/ /*E F*/ /*后代选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔*/ /*div后代的 div为 div为div2的*/ .div1 .div2{ color: red; } /*找div标签 class为div1的后代 class为P的*/ .div1 .P { color: red; } /*E > F*/ /* 子元素选择器，匹配所有E元素的子元素F*/ /*只是在儿子这一层找没有 div1 > P 的*/ /*把上面注释 找不到 >P*/ .div1>.P { color: red; } .div1>.div2 { color: red; } </style> </head> <body> hello body <div>hello div</div> <!--id 相当于身份证 class相当于名字有可能两个人名字一样--> <p id="littleP">pppp</p> <p class="kxq">ppp</p> <p class="kxq">pp</p> <!--只想让div标签变化 就不能单独用一种选择器了--> <div class="kxq">div</div> <div class="div1"> <div> <a href="">a</a> <p class="P">ppp</p> <div>div3</div> </div> <p>p ele</p> <div class="div2">div2</div> </div> </body> </html>
''' E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）
p[kxq] { color:#f00; } E[att=val] 匹配所有att属性等于“val”的E元素
div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
td[class~=”name”] { color:#f00; } E[attr^=val] 匹配属性值以指定值开头的每个元素
div[class^="test"]{background:#ffff00;} E[attr$=val] 匹配属性值以指定值结尾的每个元素
div[class$="test"]{background:#ffff00;} E[attr*=val] 匹配属性值中包含指定值的每个元素
div[class*="test"]{background:#ffff00;} """
