web前端【第三篇】CSS選擇器
一、css概述
CSS是Cascading Style Sheets的簡稱，中文稱為層疊樣式表，對html標簽的渲染和布局
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
例如
二、css的四種引入方式
1.行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
2.內嵌式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
3.鏈接式
建一個index.css的文件，存放樣式
在主頁面中吧index.css引入
4.導入式
將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：
要註意導入的路徑。。。。
註意啦：
導入式會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會像導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是鏈接式的優點。
所以還是推薦用鏈接式。。。。。。。。。。。
三、註意嵌套規則
- 塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
- 有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
- li內可以包含div
- 塊級元素與塊級元素並列、內聯元素與內聯元素並列。
三、 css的選擇器
1.基礎選擇器
“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用於網頁中的哪些元素
1.通用元素選擇器 *: 所有的標簽都變色
2.標簽選擇器：匹配所有使用p標簽的樣式 p{color:red}
3.id選擇器：匹配指定的標簽 #p2{color:red}
4.class類選擇器：誰指定class誰的變色，可選多個 .c1{color:red} 或者 div.c1{color:red}
實例
註意：
可以對塊級標簽設置長寬
不可以對內聯標簽設長寬（它只會根據他的文字大小來變）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
/*標簽選擇器*/
/*所有標簽是div的都變了*/
div{
font-family: 華文彩雲;
}
/*id選擇器*/
/*給id=‘c2‘的設置樣式，id一般不常用。因為id是不能重復的。*/
#c2{
background-color: blueviolet;
font-size: larger;
}
/*calss類選擇器*/
.a1{
color: red;
}
或
p.a1{
color: blue;
}
/*通用元素選擇器*/
*{
background-color: aquamarine;
color: red;
}
</style>
<body>
<div id="c1">
<div id="c2">
<p>hello haiyan</p>
<div class="a1">哇啊卡卡</div>
</div>
<p>hi haiyan</p>
</div>
<span>啦啦啦</span>
<p>p2</p>
<div class="a1">
<p class="a2">你好啊</p>
<h1>我是h1標簽</h1>
</div>
</body>
</html>
2.組合選擇器
1.後代選擇器 (不分層級，只讓p標簽變色) .c2 p{color:red}
2.子代選擇器（只在兒子層找） .c2>p{color:red}
3.多元素選擇器：同時匹配所有指定的元素 .div,p{color:red}
或者
.c2 .c3,.c2~.c3{
color: red;
font-size: 15px;
}
不常用
3.毗鄰選擇器（緊挨著，找相鄰的,只找下面的，不找上面的）.c2+p{color:red}
4.兄弟選擇器：同一級別的，離得很近的.c2~p{color:red}
5.多元素選擇器： .c2 .c3,.c2~ .c3{ color:red }
//多元素選擇器的說明
.a1 .a2, .a1~p{
color: blue;
font-size: 15px;
background-color: red;
}
#下面的兩個就相當於上面的一個，用逗號隔開可以減少代碼的重用
.a1 .a2{
color: blue;
font-size: 15px;
background-color: red;
}
.a1~p{
color: blue;
font-size: 15px;
background-color: red;
}
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組合選擇器</title>
<style>
/*後代選擇器(部分層級)：選擇所有類為a1的p標簽*/
.a1 p{
background-color: blue;
}
/*子代選擇器*/
.c2>p{
color: crimson;
}
/*毗鄰選擇器*/
.a2+p{
background-color: aquamarine;
}
/*兄弟選擇器:同一級別的，離得很近的*/
.a2~p{
background-color: blueviolet;
}
/*多元素選擇器：同時匹配所有指定的元素*/
.div,p{
background-color: aquamarine;
}
.a1 .a2, .a1~p{
color: blue;
font-size: 15px;
background-color: red;
}
#下面的兩個就相當於上面的一個，用逗號隔開可以減少代碼的重用
/*.a1 .a2{*/
/*color: blue;*/
/*font-size: 15px;*/
/**/
/*}*/
/*.a1~p{*/
/*color: blue;*/
/*font-size: 15px;*/
/**/
/*}*/
</style>
</head>
<body>
<p>hi say hello........</p>
<div class="a1">
<div class="a2">
<p id="s1">過去永遠是畫面</p>
<div class="c2">
<p>那片海</p>
</div>
</div>
<p>huhhdhshsdfdfgfdgd</p>
<h1 class="a3">第一章</h1>
<h2>第二章</h2>
</div>
<div class="a1">
<em>lalalalla啦啦啦啦案例</em>
<div class="a2">
<p>hohou後</p>
<b>海燕®</b>
</div>
</div>
<h5>你好</h5>
<p>好好好</p>
</body>
</html>
3.屬性選擇器
E[att] 匹配所有具有att屬性的E元素，不考慮它的值。（註意：E在此處可以省略。
比如“[cheacked]”。以下同。） p[title] { color:#f00; }
E[att=val] 匹配所有att屬性等於“val”的E元素 div[class=”error”] { color:#f00; }
E[att~=val] 匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素
td[class~=”name”] { color:#f00; }
E[attr^=val] 匹配屬性值以指定值開頭的每個元素
div[class^="test"]{background:#ffff00;}
E[attr$=val] 匹配屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;}
E[attr*=val] 匹配屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}
index.css
/*1.匹配所有haiyan屬性的，並且只是在div標簽的*/
div[haiyan]{
color: yellowgreen;
}
/*2.匹配所有haiyan=wawa的並且只是在div標簽的*/
div[haiyan=wawa]{
color: aqua;
}
/*2.上面的優先級和下面的優先級本應該是一樣的*/
/*應該顯示下面的，但是，由於上面查找的範圍
比下面的範圍廣，所以它會把上面的也顯示了。*/
/*3.匹配所有屬性為haiyan，並且具有多個空格分割的值，*/
/*其中一個只等於wawa的*/
div[haiyan~=wawa]{
color: blueviolet;
}
/*4.匹配屬性值以指定值開頭的每個元素，
並且是在div標簽裏的*/
div[haiyan^=w]{
background-color: aquamarine;
}
div[egon^=w]{
background-color: aquamarine;
}
/*5.匹配屬性值以指定值結尾的每個元素 */
div[haiyan$=a]{
background-color: blueviolet;
}
/*6.匹配屬性值中包含指定值的每個元素 */
div[haiyan*=a]{
background-color: blueviolet;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<div haiyan = " wawa ">你好</div>
<div haiyan = "wawa">哎呀呀啊</div>
<div egon = "wawa">da大</div>
<div haiyan="cccc">啊啊哈</div>
</div>
</body>
</html>
4.偽類
anchor偽類：專用於控制鏈接的顯示效果
‘‘‘
a:link（沒有接觸過的鏈接）,用於定義了鏈接的常規狀態。
a:hover（鼠標放在鏈接上的狀態）,用於產生視覺效果。
a:visited（訪問過的鏈接）,用於閱讀文章，能清楚的判斷已經訪問過的鏈接。
a:active（在鏈接上按下鼠標時的狀態）,用於表現鼠標按下時的鏈接狀態。
偽類選擇器 : 偽類指的是標簽的不同狀態:
a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }
‘‘‘
//例子說明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偽類</title>
<style>
/*沒訪問之前*/
a:link{
color: blue;
}
/*鼠標放在鏈接上的狀態*/
a:hover{
color: chartreuse;
}
/*訪問過後*/
a:visited{
color: red;
}
/*鼠標點擊的時候*/
a:active{
color: aqua;
}
/*在p標簽屬性為c2的後面加上內容*/
p.c2:after{
content: ‘hello‘;
color: chartreuse;
}
/*在所有的p標簽的前面加上內容*/
p:before{
content: ‘你猜‘;
color: forestgreen;
}
span{
background-color: aqua ;
/*width: 100px;*/
/*height: 50px;*/
/*span標簽是一個內聯標簽，設置了窗寬不起作用*/
/*它是跟著你設置的文本的大小變化的*/
}
</style>
</head>
<body>
<p>你是誰？</p>
<p class="c2">你是誰？</p>
<p class="c3">你是誰？</p>
<a href="" id="c1">lalala</a>
<span>zzzz小</span>
</body>
</html>
before after偽類
:before p:before 在每個<p>元素之前插入內容
:after p:after 在每個<p>元素之後插入內容
例：p:before{content:"hello";color:red;display: block;}
5.css優先級和繼承
css的繼承
繼承是CSS的一個主要特征，它是依賴於祖先-後代的關系的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。
body{color:red;} <p>helloyuan</p>
這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。
p{color:green}
發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。
此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什麽能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。
div{
border:1px solid #222
}
<div>hello <p>yuan</p> </div>
css的優先級
所謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先後順序。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1 內聯樣式表的權值最高 style=""－－－－－－－－－－－－1000；
2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－－100
3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10
4 統計選擇符中的HTML標簽名個數。 p －－－－－－－－－－－－－-－1
按這些規則將數字符串逐位相加，就得到最終的權重，然後在比較取舍時按照從左到右的順序逐位比較。
1、文內的樣式優先級為1,0,0,0，所以始終高於外部定義。 2、有!important聲明的規則高於一切。 3、如果!important聲明沖突，則比較優先權。 4、如果優先權一樣，則按照在源碼中出現的順序決定，後來者居上。 5、由繼承而得到的樣式沒有specificity的計算，它低於一切其它規則(比如全局選擇符*定義的規則)。
繼承示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器的優先級</title>
<style>
/*給body的所有內容加上樣式*/
body{
color: crimson;
border: 2px solid;
border-color: aqua;
}
/*子類有設置樣式就用子類的，沒有就繼承了父類的*/
p{
color: red;
}
#s2{
color: blue;
}
/*不能被繼承,它會用自己的邊框，而不會用父類的邊框*/
p{
border: 1px solid;
}
</style>
</head>
<body>
<div class="c1" id="s1">
div
<div class="c2" id="s2">
<div class="c3" id="s3">蒼茫的天涯是我的愛</div>
<p>火辣辣的太陽</p>
</div>
<p>哎呀呀哎呀呀呀</p>
</div>
<div>hello haiyan</div>
<p>nis</p>
</body>
</html>
web前端【第三篇】CSS選擇器