CSS样式-选择器

CSS基本有如下几种选择器，其说明和应用如下：

类型选择器（元素选择器/简单选择器）：

用来寻找特定类型的元素，如段落，标题等元素只需指定希望应用样式的元素的名称。

如：

p {

color : #ffffff;

}

h1{

font-weight : blod;

}

后代选择器：

用来寻找特定元素或是元素组的后代。采用其他两个选择器之间的空格表示。

如：

blockquote p {  padding-left : 20px;}

表示只作用于块引用的后代的段落元素左缩进20个像素，其他段落元素不受影响。

类选择器和ID选择器：

用来寻找更特定元素。

如：

类选择器：设置日期颜色

.date-posted { color : #ffffff;}

<div class="date-posted">20/112016</div>

ID选择器：文本粗体显示

#intro{font-weight : bold;}

<div id="intro"> Hello CSS</div>

伪类：

当我们需要根据文档结构之外的其他条件对元素应用样式，例如表单元素或是链接的状态，我们就要用到伪类。

如：

1.设置未访问过的链接颜色为蓝色。

a:link { color : blue;} 

2.设置访问过的链接颜色为绿色。

a:visited{color : green;}

3.设置鼠标滑过，或是元素得到焦点时的样式为红色。

a:hover,a:focus,a:active {color : red;}

其中:link和:visited为链接伪类，只用于锚元素。:hover、:active和:focus为动态伪类，可以应用任何元素。

伪类之间可以连接在一起，控制更复杂的样式。

如：

当鼠标悬停已访问的链接时，显示红色。

a:visited:hover { color : red;}

子选择器：

与后代选择器不同的是后代选择器选择的是一个元素的所有后代，而子选择器只选择元素的直接后代。

如：

#nav>li{

font-size : 18px;

}

<ul id = "nav">

<li>列表1</li>

<li>列表2</li>

<ul>

<li>子列表1</li>

<li>子列表2</li>

</ul>

<li>列表3</li>

</ul>

改样式中，只有外层列表的字体为18px；内层列表则不受样式影响，字体为默认大小。                                                                                                                

相邻同胞选择器：

根据一个元素与另一个元素的相邻关系对它应用样式，可用于定位同一个父元素下某个元素之后的元素。

· 如：

h2 + p {

color : red;

font-size : 18px;

}

<h2>二级标题</h2>

<p>二级标题的相邻P元素</p>

<p>二级标题的不相邻P元素</p>

属性选择器：

用于根据某个属性是否存在或是属性的值来寻找元素。

1.根据属性是否存在，控制存在某一属性的元素的样式。

如： 当鼠标悬停在具有title属性的acronym元素时，提示title中的文字内容。

acronym[title] :hover,acronym[title]:focus {
cursor:help;
}

<p> the term <acronym title = "self-contained underwater breathing apparatus">SCUBA</acronym>is an acronym rather than an abbreviation as it is pronounced as a word.</p>

2. 根据属性值寻找元素。（当属性有多个值时，可以允许根据属性值之一进行寻找元素）

如：

.blogroll a[rel~="baidu"]{

color : red;

}

<ul class="blogroll">

<li>baidu

<a href="http://www.baidu.com" rel="web baidu">

</li>

<li>google

<a href="http://www.google.com" rel="web google">

</li>

</ul>