Css 选择器
目录
CSS选择器
百度词条为："要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。"
1.星号选择器、通用选择器
<!--选中全部元素-->
*{
width:100%;
height:100%;
}
2.ID选择器，#
<style>
<!--#表示-->
#name{
width:100px;
height:100px;
}
</style>
<body>
<div id="name"></div>
</body>
3.类选择器，Class，.
<style>
.name{
}
</style>
4.后代选择器
<style>
<!--父元素里面的子元素，空格隔开-->
#box .box-div{
width:50px;
}
</style>
<body>
<div id="box">
<div class="box-div"></div>
<div class="box-div"></div>
</div>
</body>
5.子选择器
子选择器与后台选择器
区别：子选择器使用>,且只作用于子元素的第一个后代
后代使用空格，作用于所有子的后代元素
<style>
<!--只作用于第一个子元素-->
#box > .box-div{
width:50px;
}
</style>
<body>
<div id="box">
<div class="box-div"></div>
<div class="box-div"></div>
</div>
</body>
6.CSS3，伪类选择器,:冒号
<style>
a:link{}
a:visited{}
a:hover{}
</style>
7.群组选择器
共同使用一类样式，使用,逗号隔开，表示多个
<style>
p,span{}
div,.box{}
</style>
8.相邻选择器
使用+号表示相邻的兄弟元素
<style>
<!--定位第一个段落p元素-->
h1 + p{}
</style>
<body>
<h1>十五</h1>
<p>我们很好</p>
<p>hello</p>
</body>
9.属性选择器
p[title]{}
p[att=val]{}匹配att属性等于val的p元素
10.伪元素
E:first-line 匹配E元素的第一行
E:fitst-letter 匹配E元素的第一个字母
E:before 在E元素之前插入生成的内容
E:after 在E元素之后插入生成的内容
