目錄
1.基本模式
selector{ property：value; }
2.多個標籤設定相同樣式
繼承，如設定body-color body中未設定style的標籤繼承body's color
3.派生選擇器 ：
包含後代選擇器，子選擇器，相鄰兄弟選擇器
3.1後代選擇器 " "
其實就是一個精細選擇的過程
如 p span{}
就是+空格
只要是在標籤裏面的標籤無論幾代都可以，
因爲其爲“後代”選擇器，裏面的都是它“後代”
CSS:
li strong {
font-style: italic;
font-weight: normal;
}
HTML:
<p>
<strong>
我是粗體字，不是斜體字，因爲我不在列表當中，所以這個規則對我不起作用
</strong>
</p>
<ol>
<li><strong>我是斜體字。這是因爲 strong 元素位於 li 元素內。</strong></li>
<li>我是正常的字體。</li>
</ol>
結果：
我是粗體字，不是斜體字，因爲我不在列表當中，所以這個規則對我不起作用
- 我是斜體字。這是因爲 strong 元素位於 li 元素內。
- 我是正常的字體。
-
派生selector與id、class同時使用
I'm blueI'm red
- 3.2 子代選擇器 > “大於號”
相對於後代選擇器，其只能作用於自己的子代，而不是孫代
要達到上述效果，需要兩個 >
CSS：
div>p>span{
color: green;
}
HTML：
<div>
<p>
<span>我是綠色的</span>
</p>
</div>
還有相鄰兄弟選擇器使用較少，注意一下就好。
4.屬性選擇器 [ ]
- 例子：[href]{color:red} 可以把href內容寫明細,也可與其他結合、連綴
CSS:
[title="use"]{
color: darkblue;
}
HTML:
<p title="use">
I'm darkblue
</p>
還有就是 ~ 符號 的使用
使用實例：
[title~="value"]{ }
~表示包含關係，可以理解爲約等於。
屬性值中含有value的就滿足條件 （value空格隔開）
屬性也可以是href、contenteditable ........
CSS:
[title~="yue"]{
color: blue;
}
HTML:
<li title="yue yue2">
我是藍色的
</li>
5.選擇器的使用
- 5.1多類選擇器 --->標籤可擁有多個類
CSS:
.class1{
color: blue;
}
.class2{
font-style: italic;
}
HTML:
<p class="class1 class2">
我有兩個類，同時具有class1與class2的屬性，
class1: blue font、
class2: italic
</p>
結果：
我有兩個類，同時具有class1與class2的屬性， class1: blue font、 class2: italic
其他比如 * 、 h1,h2 與都已經瞭解
注意： ID 選擇器不能結合使用，
因爲 ID 屬性不允許有以空格分隔的詞列表。
以上練習代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css1->selector base</title>
<style>
p,h3{
color: cornflowerblue;
}
li strong {
font-style: italic;
font-weight: normal;
}
#try p{
color: red;
}
#try{
color: blue;
}
.github a{
text-decoration: none;
color: cadetblue;
}
[title="use"]{
color: darkblue;
}
</style>
</head>
<body>
<section>
<h5>1.基本模式</h5>
<p>selector{
property：value;
}
</p>
<hr/>
</section>
<h5>2.多個標籤設定相同樣式</h5>
<p>
繼承，如設定body-color body中未設定style的標籤繼承body's color
</p>
<hr/>
<h5>3.派生選擇器</h5>
<ul>
<li>
<p><strong>我是粗體字，不是斜體字，因爲我不在列表當中，所以這個規則對我不起作用</strong></p>
<ol>
<li><strong>我是斜體字。這是因爲 strong 元素位於 li 元素內。</strong></li>
<li>我是正常的字體。</li>
</ol>
</li>
<li>
<p>派生selector與id、class同時使用</p>
<div id="try">
I'm blue<p>I'm red</p>
</div>
<div class="github">
<a href="github.com" >github,color:catedblue</a>
</div>
</li>
</ul>
<hr/>
<h5>4.屬性選擇器</h5>
<ul>
<li title="use">
例子：[href]{color:red}
可以把href內容寫明細,也可與其他結合、連綴
<br/>I'm darkblue
</li>
</ul>
</body>
</html>