css——选择器

常用选择器

• 类型选择器
  又称为简单选择器

p{ color: black;}
h1{font-weight: bold;}

• 后代选择器
  后代选择器可用来寻找特定的元素和元素组的后代

div p{
padding-left: 2em;
}

• ID选择器
  用一个#号表示

#intro {font-weight: bold;}
<p id = "intro">Happy Birthday Andy</p>

• 类选择器
  用一个点号表示

.date-posted {color:#ccc;}

如果想要在标题标签上使用不同的样式，就需要在不同标题创建不同的类，这样过度的依赖类选择器和ID选择器造成程序不简洁。可以结合使用类型、后代、ID和类这几种选择器。

#main-content h2{
font-size:20px;
}
//结合ID选择器和后代选择器
<div id = "main-content">
    <h2>Ariticles</h2>
    ……
</div>
<div id = "secondary-content">
    <h2>Last news</h2>
    ……
</div>

• 伪类选择器
  有些情况需要根据文档结构之外的条件来对元素应用样式（比如：根据表单元素或者链接的状态来设定不同的样式）这种情况需要使用伪类选择器。

使用:link 选择器对指向未被访问的链接设置样式，visited 用于设置指向已访问的链接的样式，:hover 选择器用于设置鼠标指针浮动到链接上时的样式，:active 选择器用于选择活动链接，当在一个链接上点击时，它会成为活动（激活）的。
注意：:link 和 :visited 称为链接伪类，只能应用于锚元素

/*所有没有被访问的链接是蓝色的*/
a:link{color:blue;}
/*所有访问过的链接是绿色的*/
a:visited{color:green;}
/*鼠标移动到链接上*/
a:hover{color:red;}
/*获得焦点的链接*/
a:focus{color:red;}
/*当在这个链接上点击时，它就会称为活动的或者激活的*/
a:active{color:red;}

通用选择器

通用选择器是所有选择器里最强大但是使用最少的选择器，它匹配所有的元素。一般通用选择器用来设置所有元素的应用样式。

*{
    padding:0;
    margin:0;
    }

使用以上代码可以删除每个元素默认的浏览器内边距和外边距的样式。

高级选择器

• 子选择器

子选择器不同于后代选择器，后代选择器选择一个元素的所有后代，子选择器只选择元素的直接后代（子元素）。
子选择器使用>符号

#nav>li{
    padding-left：20px；
}
<ul id = "nav">
    <li></li>/*以上的样式适用这个li元素*/
    <li>
        <ul>
            <li></li>/*以上的样式不适用这个li元素*/
        </ul>
    </li>
</ul>

• 相邻同胞选择器

有时需要根据一个元素与另一个元素的相邻关系对它应用样式。相邻同胞选择器可用于定义同一个父元素下某个元素之后的元素。

• 属性选择器

属性选择器可以根据元素的某个属性是否存在属性值来应用样式。

acronym[title]{
    border-bottom: 1px dotted #999;
}
acronym[title]:hover{
    cursor:help;
}
a[rel="nofollow"]{
    background: url(); no-repeated right center;
}

#header{
}
[id="header"]{
}