天天看點
傳回

從零開始前端學習[8]:初級選擇器的使用

初級選擇器的使用

  • 通配符選擇器
  • 元素選擇器
  • ID選擇器
  • class類選擇器
  • 類選擇器與ID選擇器之間的差別
  • 後代選擇器

提示

部落客：章飛_906285288

部落格位址：http://blog.csdn.net/qq_29924041

通配符選擇器

*(星号)會比對所有的元素，針對所有的元素設定，使用方式如下所示

*{margin:0px padding:0px}

這個是在我們清除浏覽器預設樣式的時候進行使用的，一般情況下，使用通配符選擇器的場景并不是很多

元素選擇器

元素選擇器是指用标簽名字來進行選擇:如下使用方法

div{width:200px;height:200px,background:red;}
span{color:red;font-size:10}
p{height:100px;width:100px;}等

ID選擇器

id選擇器主要指的是通過标簽的id來進行标簽的選擇，首先要給标簽賦予一個id

<div id="main_div"></div>

然後在css樣式中，通過#ID的形式，來進行選擇，如:

<style text="css/html">
    #main_div{width:100px;height:100px}
</style>

提示：ID選擇器在與js相結合的時候，會使用的比較多

類選擇器

類選擇器的使用方式類似ID選擇器，首先要給标簽一個指定的類，然後通過.(點操作符)來進行類名的選取如:

<div class="main"></div>

然後在style樣式中去進行類的選擇

<style text="css/html">
    .main{
        width:100px;
        height:100px;
    }
</style>

提示：類選擇器一般情況下在樣式實作的時候會比較的多，主要是因為html标準支援一個标簽可以擁有多個類，但是不支援多個ID

類選擇器與ID選擇器之間的差別

差別:

  • ID選擇器中同名ID在文檔中必須是唯一的，隻能夠使用一次(相當于大名)，同名的class類選擇器可以多次使用，也就是可以定義一個類來實作一個樣式複用，但是ID選擇器則不行
  • 關于權重(優先級)，ID選擇器的優先級會大于class類選擇器，如果一個标簽既有ID選擇器，又有類選擇器，那麼這個時候就會優先ID選擇器選擇

後代選擇器

後代選擇器，顧名思義，也就是一個父級标簽下面的所有後代，既可以包括這個标簽的子集後代，也可包含這個子集後代的後代，即選擇這個标簽下所有指定元素

如:

<div>
    <ul>
        <li>
            第一個li
        </li>
        <li>
            第二個li
        </li>
    </ul>
</div>

選擇，先去選擇div,然後選擇div下面的ul然後再次選擇到ul下面的li:

<style text="text/css">
        div ul li{width:100px;height:100px;background:blue;}
</style>

以上的選擇器的使用都是最簡單的使用方式，在使用的過程中往往會互相結合使用，即可能會出現

.類名 #id名 标簽元素類型{}

當然這個隻是一個例子，因為這樣在浏覽器在效率上面會高一點，它會從父級元素一直往下去尋找

簡單的執行個體:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8"><!--申明目前網頁的編碼集UTF-8-->
    <meta name="Generator" content="EditPlus®">    <!--編輯器的名稱-->
    <meta name="Author" content="作者是誰">
    <meta name="Keywords" content="關鍵詞">
    <meta name="Description" content="描述和簡介">
    <style type="text/css">
        body, dl, dd, dt, p, h1, h2, h3, h4, h5, h6 {
            margin: ;
        }

        ul, ol {
            margin: ;
            list-style: none;
            padding: ;
        }

        a {
            text-decoration: none;
        }

        * {
            margin: ;
            padding: ;
        }

        .main{
            width: px;
            background-color: rgba(,,,);
            margin: px auto;
        }
        #id_selector{
            width: px;
            height:px;
            background-color: green;
        }
        .class_selector{
            width: px;
            height: px;
            background-color: red;
        }
        ul li{
            width: px;
            height: px;
            background-color: #84a3e3;
            margin-top:px;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="id_selector">
            id選擇器使用
        </div>
        <div class="class_selector">
            類選擇器
        </div>
        <ul>
            <li>後代選擇器1</li>
            <li>後代選擇器2</li>
            <li>後代選擇器3</li>
        </ul>
    </div>

</body>
</html>

顯示效果如下：

從零開始前端學習[8]:初級選擇器的使用

以上部分隻是一些最簡單的選擇器的使用，在後面可能會互相結合着使用，或者更複雜的選擇器等。

歡迎通路部落格

# 1.從零開始挑戰前端 id選擇器 通配符選擇器 class類選擇器 後代選擇器 初級選擇器
上一篇: 從零開始前端學習[2]:img标簽的使用
下一篇: 從零開始前端學習[30]:Css3中新增加的選擇器二

繼續閱讀