杂七杂八 - CSS选择器

对于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>