HTML簡單知識點整理
阿新 • • 發佈：2021-06-19
css的選擇器（Selector）
“選擇器”指明瞭{}中的“樣式”的作用物件，也就是“樣式”作用於網頁中的哪些元素
基礎選擇器
''' ＊ ： 通用元素選擇器，匹配任何元素 * { margin:0; padding:0; } E ： 標籤選擇器，匹配所有使用E標籤的元素 p { color:green; } .info和E.info: class選擇器，匹配所有class屬性中包含info的元素 .info { background:#ff0; } p.info { background:blue; } #info和E#info：id選擇器，匹配所有id屬性等於footer的元素 #info { background:#ff0; } p#info { background:#ff0; }'''
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="keywords" content="css的四種基本選擇器"> <meta name="description" content="study"> <meta http-equiv="Refresh" content="60;https://www.baidu.com"> <meta http-equiv="x-ua-compatible"content="IE=EmulateIE7"> <title>Title</title> <link rel="icon" href="https://www.baidu.com/favicon.ico"> <link rel="stylesheet" href="day103.css"> </head> <body> hello world <div>hello div</div> <p>hello p</p> <aname="abc">hello a</a> <p>hello p2</p> <div id="littleD">hello div2</div> <!--id為標籤的唯一身份認證，不能有重複--> <div class="name">hello div3</div> <div class="name">hello div4</div> <p class="name">hello p3</p> <!--class為標籤的名字，可以有重複--> </body> </html>
*{ color: red; } /**代表通用元素選擇器，匹配任何元素，就連body標籤也算，比如body標籤裡面的hello world(例項：*{margin:0;padding:0})*/ p{ color:red; } /*E：標籤選擇器，匹配所有使用E標籤的元素*/ #littleD{ background-color: yellow; color: red; } /*id選擇器*/ .name{ background-color: red; color: yellow; } /*class選擇器，匹配所有class屬性中包含name屬性值的元素*/ p.name{ background-color: gold; color: green; } /*匹配所有p標籤class屬性中包含name屬性值的元素*/