CSS常用选择器
1.标记选择器(元素选择器 /标签选择器)
E{......} //其中E代表有效的HTML元素，如下列代码中div p两个标签
<html lang="en,zh">
<head>
<meta charset="utf-8" />
<title>HTML学习</title>
<style type="text/css">
div{
background-color: red;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<div>hello world!</div>
<p>12121</p>
</body>
</html>
2.类选择器
[E].classValue{......} //其中E代表有效的HTML元素，如下列代码中 .demo
<html lang="en,zh">
<head>
<meta charset="utf-8" />
<title>HTML学习</title>
<style type="text/css">
.demo {
background-color: green;
}
</style>
</head>
<body>
<div class="demo">456qwqw</div>
</body>
</html>3.ID选择器
[E]#idValue{......} //其中E代表有效的HTML元素，如下列代码中 #demo
<html lang="en,zh">
<head>
<meta charset="utf-8" />
<title>HTML学习</title>
<style type="text/css">
#demo {
background-color: red;
}
</style>
</head>
<body>
<div id="demo">456qwqw</div>
</body>
</html>
4.通配符选择器
*{}
<html lang="en,zh">
<head>
<meta charset="utf-8" />
<title>HTML学习</title>
<style type="text/css">
*{
background-color: red;
}
</style>
</head>
<body>
<div>hello world!</div>
<p>12121</p>
</body>
</html>5.属性选择器
属性[=" "]{}
<html lang="en,zh">
<head>
<meta charset="utf-8" />
<title>HTML学习</title>
<style type="text/css">
[id]{
background-color: red;
}
[id="ceshi"]{
background-color: yellow;
}
</style>
</head>
<body>
<div>hello world!</div>
<p id="test">12121</p>
<p id="ceshi">hello world!</p>
</body>
</html>
6 父子选择器(如下列代码中div span)
<html lang="en,zh">
<head>
<meta charset="utf-8" />
<title>HTML学习</title>
<style type="text/css">
div span {
background-color: green;
}
</style>
</head>
<body>
<!-- 想把div内部span 123更换背景色又不影响外部span 456 -->
<div>
<span>123</span>
</div>
<span>456</span>
</body>
</html>7.直接子元素选择器(div >em 直接下面一个子元素，不影响深层次的em标签)
<html lang="en,zh">
<head>
<meta charset="utf-8" />
<title>HTML学习</title>
<style type="text/css">
div > em{
background-color: red;
}
</style>
<link rel="stylesheet" href="">
</head>
<body>
<div>
<em>121212</em>
<strong>
<em>jdajskdjkasjd</em>
</strong>
</div>
</body>
</html>
8.并列选择器
<html lang="en,zh">
<head>
<meta charset="utf-8" />
<title>HTML学习</title>
<style type="text/css">
/* 其他选择器无法满足 将222222数据显示背景色
并列选择器 */
div.demo{
background-color: yellow;
}
</style>
</head>
<body>
<div>1212121</div>
<div class="demo">222222</div>
<p class="demo">333333</p>
</body>
</html>
9.分组选择器
Selector1,Selector2,Selector3{......} //其中Selector1等都是有效选择器
<html lang="en,zh">
<head>
<meta charset="utf-8" />
<title>HTML学习</title>
<style type="text/css">
/* 分组选择器
分组后共用代码块*/
/* em{
background-color: red;
}
strong{
background-color: red;
}
span{
background-color: red;
} */
em,strong,span{
background-color: red;
}
</style>
</head>
<body>
<em>111111</em>
<strong>22222</strong>
<span>3333333</span>
</body>
</html>
浙公网安备 33010602011771号