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> <a name="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属性值的元素*/