css选择器:
一.基础选择器
-标签(元素)选择器
<!DOCTYPE html> <html> <head> <title>css的基础选择器</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div id="container"> <h3>抖音</h3> <p> 张磊清仓的也不光是中概股,也涉及到美国的互联网公司FAANG, 对大热的苹果,FB,亚马逊张磊也是毫不留情, 也许对互联网 赛道的兴趣减弱了 </p> <img src="images/index01.png" alt="一个成功人士" title="帅哥" width="200"> <p> 高瓴资本对互联网兴趣减弱,全面All in投入生物制药。特别是美国的生物创新药 </p> <img src="images/index02.png" alt="一个美女" title="老婆" width="200"> </div> </body> </html>
-类(class)选择器
-id(身份证号)选择器
</head> <body> <div id="container"> <h3 class="active title">抖音</h3> <p> 张磊清仓的也不光是中概股,<span class="active">也涉及到美国的互联网公司 FAANG,</span> 对大热的<span id='张磊'>苹果,FB,亚马逊张磊也是毫不留情, 也许对互联网 赛道的兴趣减弱了</span> </p> <img src="images/index01.png" alt="一个成功人士" title="帅哥" width="200"> <p> <span id='高领'>高瓴资本</span>对互联网兴趣减弱,全面All in投入生物制药。 特别是美国的生物创新药 </p> <img src="images/index02.png" alt="一个美女" title="老婆" width="200"> <!-- --> <p class='lv big'>eddie</p> <p class="lv bold">eddie</p> <p class="big bold">eddie</p> </div> </body> </html>
#index.css 代码
p{ color: orange; font-size: 14px; font-weight: bold; } #张磊{ color: blue; } #高领{ color: green; } .active{ color: black; } .title{ font-size: 30px } .lv{ color: green; } .big{ font-size: 20px; } .bold{ font-weight: bold; } /* # id选择器名称{ 样式 } */
二.高级选择器
-后代选择器
-子代选择器
-组合选择器
-交集选择器
-伪类选择器