<DOCTYPE html>
<html lang="zh-cn">
<head>
<meat charset="gb2312">
<title>還是CSS選擇器</title>
<link rel="stylesheet" type="text/css" href="啦啦啦.css">
</head>
<body>
【b.abc{}類選擇器單獨定義b】
<b class="abc"> zzhu1i</b>
<span class="abc def">axohs</span>
【 [href]屬性選擇器、超鏈接】
<a href="http://hovertree.com/url/?h=http://www.baidu.com">百度</a>
【 [href^"http"]{} 限制開頭是http】
<a href="http://hovertree.com/url/?h=http://www.baidu.com">百度</a>
【[href$=".cn"]{}限制結尾是.cn】
<a href="http://hovertree.com/url/?h=http://www.360.cn">360</a>
【 [href*="baidu"]{} 模糊查詢】
<a href="http://hovertree.com/url/?h=http://www.baidu.com">百度</a>
【單獨定義】
[class~=""]{}
【[lang|="en"]{}單獨定義帶段橫槓的，""裡是橫槓前 i這是傾斜啊~啊~】
<i lang="en-us">帶橫槓的啊~</i>
【[type="password"]單獨定義password、表格】
<input type="text">
<input type="password">
【復合選擇器~】
p,b,i,span{}
【分組選擇器~】
#abc,.abc,i,span{}
<p id="abc">啦啦啦<b>啦啦啦</b></p>
【後代、派生選擇器】
p b{} <ul>
<li>兒子
<ol start="2">
<li>孫子</li>
<li>孫子</li>
</ol>
</li>
<li>兒子</li>
<li>兒子</li>
ul li｛border：1px solid red｝ li全加邊框
ul>li｛border：1px solid red｝ 只有ul後的li加邊框
<p>周五啊~</p>
<b>時間啊~~ </b>
【p + b{}相鄰兄弟選擇器 匹配p後的b元素】
【p ~ b{}普通兄弟選擇器 匹配P之後的所有b元素】
【偽元素選擇器】
<p>企鵝企鵝企鵝企鵝屋企鵝企鵝企鵝屋鵝企鵝企鵝企鵝屋企鵝企鵝企鵝屋</p>
<div>潇灑寫啊寫啊寫啊寫啊寫啊寫啊寫啊寫啊寫啊寫啊啊啊啊啊啊啊啊啊啊</div>
【首行選定】
div::first-line{}
<p>tiosaioxjao</p>
<span>dqdqiudhq</span>
【塊級首字母改變】
::first-letter{}
<a href="http://hovertree.com/url/?h=http://www.baidu.com">百度</a>
【a::before{ content:"點擊"} 鏈接前插入字】
【a::after{ content:"搜索"} 鏈接後插入字】
</body>
</html>