CSS选择器类型

选择器：
1、标签选择器
以标签名开头，如body,div,p,ul,li

div 
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}

2、类选择器
  需对标签取class名，如class="head"，格式设置以.+类名开头。

.head
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}

指定特定的HTML元素使用class

p.center
{
text-align:center;
}

3、id选择器
 需对标签取id名，以#加id名开头，具有唯一性，id="name"。

#para1
{
    text-align:center;
    color:red;
}

4、后代选择器
以空格隔开包含关系的元素，用来选择特定元素或元素组的后代。

ul a
{  
    color: red;
}

5、子选择器
以>隔开父子级元素，作用于子元素的第一个后代。

ul li > a 
{ 
     color: red;
}

4,5例子

<ul>
    <li>
        <a href="#">一级菜单</a>##5 只作用此条
        <div>
            <a href="#">二级菜单</a>
            <a href="#">二级菜单</a>
            <a href="#">二级菜单</a>
        </div>
    </li>
    </ul>

6、兄弟选择器

以~隔开，模块名~模块名，修饰~前模块往下的所有兄弟模块

h1 ~ p
{
    color:red;
}

7、相邻选择器
以+隔开，模块名+模块名，修饰+前模块往下的相邻的模块，只有一个

h1+p
{
    color:red;
}

6,7例子

    <p>1</p>
    <h1>2</h1>
    <p>3</p>#7作用，6作用
    <p>4</p>#6作用
    <p>5</p>#6作用

8、全局选择器

*开头，修饰了包含body所有的标签
9、群选择器
修饰大括号前所有的元素

h2, p { color: gray; }

10、属性选择器
以中括号为符号，比如：
修饰属性为type=text的模块：

[type=text]
{
    margin:0;
}

11、伪类选择器

a:link {color:#FF0000;} /* 未访问的链接 */ 
a:visited {color:#00FF00;} /* 已访问的链接 */ 
a:hover {color:#FF00FF;} /* 鼠标划过链接 */ 
a:active {color:#0000FF;} /* 已选中的链接 */