CSS3 選擇器基本選擇器介紹

2024-07-11 08:26:03

字體：大中小

供稿：網(wǎng)友

那么從現(xiàn)在開始我們先丟開他們版本的區(qū)別，從頭一起來看看CSS選擇器的運用。

CSS是一種用于屏幕上渲染html，xml等一種語言，CSS主要是在相應(yīng)的元素中應(yīng)用樣式，來渲染相對應(yīng)用的元素，那么這樣我們選擇相應(yīng)的元素就很重要了，如何選擇對應(yīng)的元素，此時就需要我們所說的選擇器。選擇器主要是用來確定html的樹形結(jié)構(gòu)中的DOM元素節(jié)點。我把CSS選擇器分開成三部分，第一部分是我們常用的部分，我把他叫做基本選擇器；第二部分我把他稱作是屬性選擇器，第三部分我把他稱作偽類選擇器，這一部分也是最難理解和掌握的部分，今天我們先來看第一部分——基本選擇器。我們先來看一個常用的選擇器列表圖

下面我們先看看上表中基本的選擇器的使用方法和其所起的作用，為了更好的說明問題，先創(chuàng)建一個簡單的DOM結(jié)構(gòu)，如下：

復制代碼

代碼如下:
<div class="demo">
<ul class="clearfix">
<li id="first" class="first">1</li>
<li class="active important">2</li>
<li class="important items">3</li>
<li class="important">4</li>
<li class="items">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li id="last" class="last">10</li>
</ul>
</div>

給這個demo加上一些樣式，讓他好看一點

復制代碼

代碼如下:
.demo {
width: 300px;
border: 1px solid #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;
}

初步效果如下所示：