对于css的选择器,一直有点混,然后就花点时间,整理了一下。
基本:
html标记选择器:
使用html中的标记作为选择器的名称,如 div,body 等。
类选择器:
自定义, 格式 (.类名)
// 设定
.test{
width: 100px;
border-style: solid;
background-color: blue;
}
//使用
<div class="test">class</div>
id选择器
和类选择器的功能一样,但是命名必须唯一,在js中可以使用document.getElementById()来进行定位和操纵,jquery中类似。
// 定义
#test{
background-color: blue;
}
// 使用
<div id="test">id</div>
复合选择器:
在复合选择器中,为了突出不一样来表示区分,最后学习的时候,多写几个不同的样式
交集选择器:
命名:标记选择器.类选择器(或者id选择器), 中间不能有空格。定义完交集选择器后,还可以单独做类选择器(或者id选择器),例子如下
// 定义
div.test{
border-color:red;
}
.test{
border-color:blue;
}
//使用
<div class="test"> test </div>
<h1 class="test" test2 />
并集选择器:
命名: 任何形式的基本选择器都可以,中间用逗号隔开
// 定义
div{
font-size=19px;
}
h1, div{
background:#999999;
}
//使用
<h1>这是h1</h1>
<div>这是div</div>
后代选择器:
命名:嵌套外层的卸载前面,内层的标记卸载后面,中间用空格隔开,内层标记称为外层标记的后代。
// 命名, 例子中,p为div 的后代
div p {
background :#9999999;
font-size = 12px;
}
// 使用
<div> div <p> p </p> </div>