HTML第二課——css【2】

時間 2019-12-07

標籤 html 第二 css 欄目 HTML 简体版

原文原文鏈接

請關注公衆號：自動化測試實戰css

如今繼續上一節課的內容，看下面代碼：html

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">    <!--    <style type="text/css">        /*            css的註釋寫法        */        div{            border: 1px solid red;            display: inline;        }    </style> -->    <link rel="stylesheet" type="text/css" href="css/index.css"></head><body>    <!-- 這是註釋 -->    <!--經過css改變文字顏色：color屬性 -->    <div>這是一個div標籤</div>    <div>這是第二個div標籤</div>
</body>
</html>

index.cssjvm

div{
    font-family: 'Microsoft Yahei';    
    font-size: 20px;    
    border: 1px solid red;    
    display: inline;
}

上面代碼中有兩個div標籤，而在css樣式表中只有一個樣式文件，那麼此時是否是兩個div標籤都使用同一個樣式呢？你們看了之後就知道，答案是確定的。那麼咱們如今想讓兩個div樣式不同，該怎麼寫呢？此時咱們就須要對兩個div有所區分，上面css文件中選擇器叫作標籤選擇器，因此只要是div標籤都會適用於對應的樣式。如今要區別設置，就涉及到標籤選擇器了：ide

id選擇器測試

全部的可視化基本都有id屬性，id英文全名爲identity意爲惟一標識，因此id值必須是惟一的。並且id命名規範爲由數字、字母、下劃線組成，且不能用數字開頭。起名字要用駝峯命名法，好比：myDiv，myDivSpan。spa

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">    <!--    <style type="text/css">        /*            css的註釋寫法        */        div{            border: 1px solid red;            display: inline;        }    </style> -->    <link rel="stylesheet" type="text/css" href="css/index.css"></head><body>    <!-- 這是註釋 -->    <!--經過css改變文字顏色：color屬性 -->    <div id="myDiv1">這是一個div標籤</div>    <div id="myDiv2">這是第二個div標籤</div>
</body>
</html>

上面id已經寫好，咱們如今來css文件中修改代碼，若是你看過以前的xpath寫法，那你就必定記得xpath中id用#來表示，css文件中也同樣——.表明class，#表明id：code

/* 這是css註釋 */

#myDiv1{
    background-color: #000000;    
    color:#ffffff;    
    display: block;    
    border: solid purple;
}

#myDiv2{
    background-color: #ff0000;    
    color:#fff;    
    border: solid green;
}

頁面顯示：htm

class選擇器blog

class就不是惟一的了，這就是爲何在selenium中有find_elements_by_class_name()的緣由了。如上所說，用.表示class：ip

/* 這是css註釋 div{    font-family: 'Microsoft Yahei';    font-size: 20px;    border: 1px solid red;    display: inline; } */

#myDiv1{
    background-color: #000000;    
    color:#ffffff;    
    display: block;    
    border: solid purple;
}

#myDiv2{
    background-color: #ff0000;    
    color:#fff;    
    border: solid green;
}

.myClass{
    background-color: pink;
}

頁面顯示：

背景色有長有短的問題先不用管，下一篇會講。

你也能夠在div標籤下增長class屬性，而後設置它的背景色，但若是div的id標籤設置了背景色，那麼會優先選擇你在id下設置的背景色：

<div id="myDiv1" class="myClass">這是一個div標籤</div>

顯示和上圖同樣。因此id選擇器優先級要高於class選擇器。

混合選擇器

先說明一下，之後咱們要用混合選擇器，用混合選擇器，用混合選擇器。

混合選擇器就是標籤選擇器+類選擇器

下面代碼中的div.myClass意爲class是myClass的div標籤

/* 這是css註釋 div{    font-family: 'Microsoft Yahei';    font-size: 20px;    border: 1px solid red;    display: inline; } */

#myDiv1{
    background-color: #000000;    
    color:#ffffff;    
    display: block;    
    border: solid purple;
}

#myDiv2{
    background-color: #ff0000;    
    color:#fff;    
    border: solid green;
}

div.myClass{
    background-color: pink;
}

這樣，css就只會修改class是myClass的div標籤了。

若是想把class是myClass的其餘標籤也用相同的樣式，只須要用逗號隔開：

div.myClass, p.myClass, span.myClass{
    background-color: pink;
}

用選擇器的原則就是描述的越詳細越好。

選擇器的優先級：

id ->混合選擇器->class選擇器->標籤選擇器

如今咱們修改html

<!DOCTYPE html>
<html>
<head>    <meta charset="utf-8">    <title>Css</title>    <meta name="keywords" content="key1, key2">    <meta name="description" content="">    <link rel="stylesheet" type="text/css" href="css/index.css"></head><body>    <!-- 這是註釋 -->    <!--經過css改變文字顏色：color屬性 -->    <div id="myDiv1" class="myClass">這是一個div標籤</div>    <div id="myDiv2">這是第二個div標籤</div>    <div class="myClass">這是第三個div標籤</div>    <p class="myClass">這是p標籤</p>    <span class="myClass">這是一個span標籤</span>    <div id="div">        <span class="span">            <p>這是一個p標籤</p>        </span>    </div>
</body>
</html>

如今咱們要修改p標籤的文字顏色爲紅色：

/* 這是css註釋 div{    font-family: 'Microsoft Yahei';    font-size: 20px;    border: 1px solid red;    display: inline; } */

#myDiv1{
    background-color: #000000;    
    color:#ffffff;    
    display: block;    
    border: solid purple;
}

#myDiv2{
    background-color: #ff0000;    
    color:#fff;    
    border: solid green;
}

div.myClass, p.myClass, span.myClass{
    background-color: pink;
}

#div span.span p{
    color:red;
}