二 css的选择器（Selector）
“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
1 基础选择器
＊ ： 通用元素选择器，匹配任何元素 * { 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; }
2 组合选择器
E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 div,p { color:#f00; }
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 li a { font-weight:bold;
E > F 子元素选择器，匹配所有E元素的子元素F div > p { color:#f00; }
E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F div + p { color:#f00; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1>p{
background-color: aqua;
color: deeppink;
}
.main2>div{
background-color: blueviolet;
color: chartreuse;
}
</style>
</head>
<body>
<div class="div1">hello1
<div class="div2">hello2
<div>hello4</div>
<p>hello5</p>
</div>
<p>hello3</p>
</div>
<p>hello6</p>
<hr>
<div class="main2">1
<div>2
<div>
4
</div>
</div>
<div>
3
</div>
</div>
</body>
</html>
用pycharm新建select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
font-size: 45px;
}
</style>
</head>
<body>
<p>hello p</p>
<div>hello div</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
font-size: 45px;
}
</style>
</head>
<body>
<p>hello p</p>
<div>hello div
<span>hello span</span>
</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
font-size: 45px;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<p>hello p</p>
<div>hello div
<span>hello span</span>
<p>p2....</p>
</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
font-size: 45px;
}
p{
background-color: yellow;
}
div{
color: darkgreen;
}
</style>
</head>
<body>
<p>hello p</p>
<div>hello div
<span>hello span</span>
<p>p2....</p>
</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
font-size: 45px;
}
p{
background-color: yellow;
}
div{
color: darkgreen;
}
#p1{
font-style: italic;
}
</style>
</head>
<body>
<p>hello p</p>
<div>hello div
<span>hello span</span>
<p id="p1">p2....</p>
</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
font-size: 45px;
}
p{
background-color: yellow;
}
div{
color: darkgreen;
}
#p1{
font-style: italic;
}
.c1{
background-color: paleturquoise;
}
</style>
</head>
<body>
<p>hello p</p>
<div>hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
font-size: 45px;
}
p{
background-color: yellow;
}
div{
color: darkgreen;
}
#p1{
font-style: italic;
}
.c1{
background-color: paleturquoise;
}
</style>
</head>
<body>
<p class="c1">hello p</p>
<div>hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
font-size: 45px;
}
p{
background-color: yellow;
}
div{
color: darkgreen;
}
#p1{
font-style: italic;
}
.c1{
background-color: paleturquoise;
}
</style>
</head>
<body>
<p class="c1">hello p</p>
<div>hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
</div>
<div class="c1">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
div p{
font-size: 50px;
}
</style>
</head>
<body>
<p class="c1">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
</div>
<div class="c1">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
div .c1{
font-size: 50px;
}
</style>
</head>
<body>
<p class="c1">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
</div>
<div class="c1">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
div .c1{
font-size: 50px;
}
</style>
</head>
<body>
<p class="c1">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
<div class="c2">
<p class="c1">p4......</p>
</div>
</div>
<div class="c1">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
#outer .c1{
font-size: 50px;
}
</style>
</head>
<body>
<p class="c1">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
<div class="c2">
<p class="c1">p4......</p>
</div>
</div>
<div class="c1">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
#outer .c2 .c1{
font-size: 50px;
}
</style>
</head>
<body>
<p class="c1">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
<div class="c2">
<p class="c1">p4......</p>
</div>
</div>
<div class="c1">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
<!-- #outer .c2 .c1{-->
<!-- font-size: 50px;-->
<!-- }-->
#outer> .c1{
font-size: 50px;
}
</style>
</head>
<body>
<p class="c1">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
<div class="c2">
<p class="c1">p4......</p>
</div>
</div>
<div class="c1">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
<!-- #outer .c2 .c1{-->
<!-- font-size: 50px;-->
<!-- }-->
#outer> .c1{
font-size: 50px;
}
</style>
</head>
<body>
<p class="c1">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
<div class="c1">
<p class="c1">p4......</p>
</div>
</div>
<div class="c1">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
<!-- #outer .c2 .c1{-->
<!-- font-size: 50px;-->
<!-- }-->
#outer{
color: red;
}
#outer> .c1{
font-size: 50px;
}
</style>
</head>
<body>
<p class="c1">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
<div class="c1">
<p class="c1">p4......</p>
</div>
</div>
<div class="c1">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
<!-- #outer .c2 .c1{-->
<!-- font-size: 50px;-->
<!-- }-->
<!-- #outer{-->
<!-- color: red;-->
<!-- }-->
#outer>.c1>.c3{
font-size: 50px;
}
</style>
</head>
<body>
<p class="c1">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
<div class="c1">
<p class="c3">p4......</p>
</div>
</div>
<div class="c1">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
<!-- #outer .c2 .c1{-->
<!-- font-size: 50px;-->
<!-- }-->
<!-- #outer{-->
<!-- color: red;-->
<!-- }-->
<!-- #outer>.c1>.c3{-->
<!-- font-size: 50px;-->
<!-- }-->
#p,#p1{
color: saddlebrown;
}
</style>
</head>
<body>
<p id="p">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
<div class="c1">
<p class="c3">p4......</p>
</div>
</div>
<div class="c1">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
<!-- #outer .c2 .c1{-->
<!-- font-size: 50px;-->
<!-- }-->
<!-- #outer{-->
<!-- color: red;-->
<!-- }-->
<!-- #outer>.c1>.c3{-->
<!-- font-size: 50px;-->
<!-- }-->
#p,#p1,.c6{
color: saddlebrown;
}
</style>
</head>
<body>
<p id="p">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
<div class="c1">
<p class="c3">p4......</p>
</div>
</div>
<div class="c6">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
<!-- #outer .c2 .c1{-->
<!-- font-size: 50px;-->
<!-- }-->
<!-- #outer{-->
<!-- color: red;-->
<!-- }-->
<!-- #outer>.c1>.c3{-->
<!-- font-size: 50px;-->
<!-- }-->
<!-- #p,#p1,.c6{-->
<!-- color: saddlebrown;-->
<!-- }-->
#outer+p{color: red}
</style>
</head>
<body>
<p id="p">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
<div class="c1">
<p class="c3">p4......</p>
</div>
</div>
<p>ppp</p>
<p>pppppp</p>
<div class="c6">div3</div>
</body>
</html>
点击pycharm上面浏览器
修改select_css.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- *{-->
<!-- font-size: 45px;-->
<!-- }-->
<!-- p{-->
<!-- background-color: yellow;-->
<!-- }-->
<!-- div{-->
<!-- color: darkgreen;-->
<!-- }-->
<!-- #p1{-->
<!-- font-style: italic;-->
<!-- }-->
<!-- .c1{-->
<!-- background-color: paleturquoise;-->
<!-- }-->
<!-- #outer .c2 .c1{-->
<!-- font-size: 50px;-->
<!-- }-->
<!-- #outer{-->
<!-- color: red;-->
<!-- }-->
<!-- #outer>.c1>.c3{-->
<!-- font-size: 50px;-->
<!-- }-->
<!-- #p,#p1,.c6{-->
<!-- color: saddlebrown;-->
<!-- }-->
#outer+.t{color: red}
</style>
</head>
<body>
<p id="p">hello p</p>
<div id="outer">hello div
<span>hello span</span>
<p id="p1">p2....</p>
<p class="c1">p3......</p>
<div class="c1">
<p class="c3">p4......</p>
</div>
</div>
<p>ppp</p>
<p class="t">pppppp</p>
<div class="c6">div3</div>
</body>
</html>
点击pycharm上面浏览器
浙公网安备 33010602011771号