css基础选择器

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

while True: print('studying...')