HTML选择器的使用和总结
一.基本选择器
1.通配选择器：用【*】表示，
<html>
<head>
<style type="text/css">
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
background-color:#999999;
color:#FF0000;
}
div *{
margin: 0;
padding: 0;
background-color:#999999;
color:#FF0000;
}//只在div中起作用
</style>
</head>
<body>
<div>
长子div
</div>
2.元素选择器：将某一元素的属性进行设置
<html>
<head>
<style type="text/css">
body{background:#ccc}
div{background-color:#FF0000}
</style>
</head>
<body>
<div>
长子div
</div>
3.ID选择器：利用标签的id属性应用css的id选择器
<html>
<head>
<style type="text/css">
#name{background:#ccc}
#uname{background-color:#FF0000}
</style>
</head>
<body>
<div id="name">
长子div
<div id="uname">
孙子div
</div>
</div>
4.类名选择器注意可以使用多个类名，但是id必须不相同
<html>
<head>
<style type="text/css">
ul.demo{background:#ccc}//可以达到相同的想过，这两个
.demo{background-color:#FF0000}
</style>
</head>
<body>
<ul class="demo">nihao</ul>
</body>
</html>
5. 群组选择器，就是对应的群组全部使用该选择器。
<html>
<head>
<style type="text/css">
<style type="text/css">
.one p span{color:#00f;}
.two p span{color:#0ff;}
.one,.two{border:1px solid #ccc;margin-top:15px;}
</style>
</head>
<body>
<div class="one"><p><span>你好啊</span></p></div>
<div class="two"><p><span>非常好</span></p></div>
</body>
</html>
二.层次选择器
1.后代选择器：选择匹配父节点的元素内的所有匹配子节点的元素。
<html>
<head>
<style type="text/css">
.parent div{background-color:#FF0000} //会选择parent里面的所有div，不管是子元素.child还是孙元素.c-child和.c-c-child
</style>
</head>
<body>
<div class="parent">
<div class="child">你好1</div>
<div class="child">你好2
<div class="c-child">你好3
<div class="c-c-child">nihao</div>
</div>
</div>
</div>
</body>
</html>
2.子选择器：
<html>
<head>
<style type="text/css">
.parent > div{color:#FF0000} //只会选择.parent元素的直系子元素，也就是只会选择到 .child元素
</style>
</head>
<body>
<div class="parent">
<div class="child">nihao</div>
<div class="child">nihao1
<div class="c-child">nihao 2
<div class="c-c-child">nihao</div>
</div>
</div>
</div>
</body>
</html>
