CSS选择器：掌握基本、属性和伪类选择器

CSS是一种用于屏幕上渲染HTML、XML元素等的一种语言。CSS主要是在相应的元素中应用样式来渲染对应用的元素。所以要应用CSS样式，先要选择对应的元素，因此在HTML文档中选择相应的元素就很重要了，选择对应的元素需要选择器。选择器主要是用来确定HTML树形结构中的DOM元素节点。把CSS选择器分成三部分，第一部分是常用的部分，叫作基本选择器；第二部分称作属性选择器，第三部分称作伪类选择器，是最难理解和掌握的部分。先来看第一部分——基本选择器。图2.3所示是一个常用的选择器列表图。

图2.3　常用的选择器列表

下面先看看上表中基本选择器的使用方法和其所起的作用，为了更好地说明问题，先创建一个简单的DOM结构，代码如下：

<divclass="demo">

<ulclass="clearfix">

<liid="first"class="first">1</li>

<liclass="activeimportant">2</li>

<liclass="importantitems">3</li>

<liclass="important">4</li>

<liclass="items">5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<liid="last"class="last">10</li>

</ul>

</div>

没有加任何样式修饰的网页显示效果如图2.4所示。

图2.4　没有加任何样式修饰的网页的显示效果

给这个demo加上一些样式，让它好看一点，代码如下：

.demo{(www.xing528.com)

width:300px;

border:1pxsolid#ccc;

padding:10px;

}

li{

float:left;

height:20px;

line-height:20px;

width:20px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

text-align:center;

background:#f36;

color:green;

margin-right:5px;

}

初步效果如图2.5所示。

图2.5　初步显示效果