僞類和僞元素
- 有時候，你需要選擇本身沒有標籤，但是仍然易於識別的網頁部位，比如段落首行或鼠標滑過的連接。CSS爲他們提供一些選擇器：僞類和僞元素。
給鏈接定義樣式
- 有四個僞類可以讓你根據訪問者與該鏈接的交互方式，將鏈接設置成4種不同的狀態。
- 正常鏈接 – a:link
- 訪問過的鏈接 – a:visited（只能定義字體顏色）
- 鼠標滑過的鏈接 – a:hover
- 正在點擊的鏈接 – a:active
其他
- 獲取焦點 – :focus
- 指定元素前 – :before
- 指定元素後 – :after
- 選中的元素 – ::selection
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 僞類專門用來表示元素的一種的特殊的狀態， * 比如：訪問過的超鏈接，比如普通的超鏈接，比如獲取焦點的文本框 * 當我們需要爲處在這些特殊狀態的元素設置樣式時，就可以使用僞類 */ /* * 爲沒訪問過的鏈接設置一個顏色爲綠色 * :link * - 表示普通的鏈接（沒訪問過的鏈接） */ a:link{ color: yellowgreen; } /* * 爲訪問過的鏈接設置一個顏色爲紅色 * :visited * - 表示訪問過的鏈接 * * 瀏覽器是通過歷史記錄來判斷一個鏈接是否訪問過, * 由於涉及到用戶的隱私問題，所以使用visited僞類只能設置字體的顏色 * */ a:visited{ color: red; } /* * :hover僞類表示鼠標移入的狀態 */ a:hover{ color: skyblue; } /* * :active表示的是超鏈接被點擊的狀態 */ a:active{ color: black; } /* * :hover和:active也可以爲其他元素設置 * IE6中，不支持對超鏈接以外的元素設置:hover和:active */ /*p:hover{ background-color: yellow; } p:active{ background-color: orange; }*/ /* * 文本框獲取焦點以後，修改背景顏色爲黃色 */ input:focus{ background-color: yellow; } /** * 爲p標籤中選中的內容使用樣式 * 可以使用::selection爲類 * 注意：這個僞類在火狐中需要採用另一種方式編寫::-moz-selection */ /** * 兼容火狐的 */ p::-moz-selection{ background-color: orange; } /** * 兼容大部分瀏覽器的 */ p::selection{ background-color: orange; } </style> </head> <body> <a href="http://www.baidu.com">訪問過的鏈接</a> <br /><br /> <a href="http://www.baidu123456.com">沒訪問過的鏈接</a> <p>我是一個段落</p> <!-- 使用input可以創建一個文本輸入框 --> <input type="text" /> </body> </html>
其他選擇器
給段落定義樣式
- 首字母 – :first-letter
- 首行 – :first-line屬性選擇器
- 屬性選擇器可以挑選帶有特殊屬性的標籤。
語法:
[屬性名]
[屬性名="屬性值"]
[屬性名~="屬性值"]
[屬性名|="屬性值"]
[屬性名^="屬性值"]
[屬性名$="屬性值"]
[屬性名*="屬性值"]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 使用僞元素來表示元素中的一些特殊的位置
* ctrl +shift +f 格式化,這些文字會變成一行
*/
/*
* 爲p中第一個字符來設置一個特殊的樣式
*/
/*p:first-letter {
color: red;
font-size: 20px;
}*/
/*
* 爲p中的第一行設置一個背景顏色爲黃色
*/
/*p:first-line {
background-color: yellow;
}*/
/*
* :before表示元素最前邊的部分，緊貼在開始標籤後面
* 一般before都需要結合content這個樣式一起使用，
* 通過content可以向before或after的位置添加一些內容
* 這個文字是不能被選中的
* :after表示元素的最後邊的部分，緊貼在結束標籤前面
*/
p:before{
content: "我會出現在整個段落的最前邊";
color: red;
}
p:after{
content: "我會出現在整個段落的最後邊";
color: orange;
}
</style>
</head>
<body>
<p>
在我的後園，可以看見牆外有兩株樹，一株是棗樹，還有一株也是棗樹。 這上面的夜的天空，奇怪而高，我生平沒有見過這樣奇怪而高的天空。他彷彿要離開人間而去，使人們仰面不再看見。然而現在卻非常之藍，閃閃地䀹着幾十個星星的眼，冷眼。他的口角上現出微笑，似乎自以爲大有深意，而將繁霜灑在我的園裏的野花草上。 我不知道那些花草真叫什麼名字，人們叫他們什麼名字。我記得有一種開過極細小的粉紅花，現在還開着，但是更極細小了，她在冷的夜氣中，瑟縮地做夢，夢見春的到來，夢見秋的到來，夢見瘦的詩人將眼淚擦在她最末的花瓣上，告訴她秋雖然來，冬雖然來，而此後接着還是春，蝴蝶亂飛，蜜蜂都唱起春詞來了。她於是一笑，雖然顏色凍得紅慘慘地，仍然瑟縮着。 棗樹，他們簡直落盡了葉子。先前，還有一兩個孩子來打他們，別人打剩的棗子，現在是一個也不剩了，連葉子也落盡了。他知道小粉紅花的夢，秋後要有春；他也知道落葉的夢，春後還是秋。他簡直落盡葉子，單剩乾子，然而脫了當初滿樹是果實和葉子時候的弧形，欠伸得很舒服。但是，有幾枝還低亞着，護定他從打棗的竿梢所得的皮傷，而最直最長的幾枝，卻已默默地鐵似的直刺着奇怪而高的天空，使天空閃閃地鬼䀹眼；直刺着天空中圓滿的月亮，使月亮窘得發白。 鬼䀹眼的天空越加非常之藍，不安了，彷彿想離去人間，避開棗樹，只將月亮剩下。然而月亮也暗暗地躲到東邊去了。而一無所有的乾子，卻仍然默默地鐵似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各樣地䀹着許多蠱惑的眼睛。 哇的一聲，夜遊的惡鳥飛過了。 我忽而聽到夜半的笑聲，吃吃地，似乎不願意驚動睡着的人，然而四圍的空氣都應和着笑。夜半，沒有別的人，我即刻聽出這聲音就在我嘴裏，我也即刻被這笑聲所驅逐，回進自己的房。燈火的帶子也即刻被我旋高了。 後窗的玻璃上丁丁地響，還有許多小飛蟲亂撞。不多久，幾個進來了，許是從窗紙的破孔進來的。他們一進來，又在玻璃的燈罩上撞得丁丁地響。一個從上面撞進去了，他於是遇到火，而且我以爲這火是真的。兩三個卻休息在燈的紙罩上喘氣。那罩是昨晚新換的罩，雪白的紙，折出波浪紋的疊痕，一角還畫出一枝猩紅色的梔子。 猩紅的梔子開花時，棗樹又要做小粉紅花的夢，青蔥地彎成弧形了……我又聽到夜半的笑聲；我趕緊砍斷我的心緒，看那老在白紙罩上的小青蟲，頭大尾小，向日葵子似的，只有半粒小麥那麼大，遍身的顏色蒼翠得可愛，可憐。 我打一個呵欠，點起一支紙菸，噴出煙來，對着燈默默地敬奠這些蒼翠精緻的英雄們。 一九二四年九月十五日。
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 爲所有具有title屬性的p元素，設置一個背景顏色爲黃色
* 屬性選擇器
* - 作用：可以根據元素中的屬性或屬性值來選取指定元素
* - 語法：
* [屬性名] 選取含有指定屬性的元素
* [屬性名="屬性值"] 選取含有指定屬性值的元素
* [屬性名^="屬性值"] 選取屬性值以指定內容開頭的元素
* [屬性名$="屬性值"] 選取屬性值以指定內容結尾的元素
* [屬性名*="屬性值"] 選取屬性值以包含指定內容的元素
*/
/*p[title]{
background-color: yellow;
}*/
/*
* 爲title屬性值是hello的元素設置一個背景顏色爲黃色
*/
/*p[title="hello"]{
background-color: yellow;
}*/
/*
* 爲title屬性值以ab開頭的元素設置一個背景顏色爲黃色
*/
/*p[title^="ab"]{
background-color: yellow;
}*/
/*
* 爲title屬性值以c結尾的元素設置一個背景顏色
*/
/*p[title$="c"]{
background-color: yellow;
}*/
p[title*="c"]{
background-color: yellow;
}
</style>
</head>
<body>
<!--
title屬性，這個屬性可以給任何標籤指定
當鼠標移入到元素上時，元素中的title屬性的值將會作爲提示文字顯示
-->
<p title="hello">我是一個段落</p>
<p>我是一個段落</p>
<p title="hello">我是一個段落</p>
<p title="abbc">我是一個段落</p>
<p title="abccd">我是一個段落</p>
<p title="abc">我是一個段落</p>
</body>
</html>
子元素選擇器
- 子元素選擇器可以給另一個元素的子元素設置樣式。
- 語法： 父元素 > 子元素{}
- 比如body > h1將選擇body子標籤中的所有h1標籤。其他子元素選擇器
- :first-child – 選擇第一個子標籤
- :last-child – 選擇最後一個子標籤
- :nth-child – 選擇指定位置的子元素
- :first-of-type
- :last-of-type
- :nth-of-type – 選擇指定類型的子元素兄弟選擇器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 爲第一個p標籤設置一個背景顏色爲黃色 * :first-child 可以選中第一個子元素 * :last-child 可以選中最後一個子元素 */ /* * 下面兩個寫法一樣的 */ *:first-child{ background-color: yellow; } :first-child{ background-color: yellow; } /* * 父元素是body，p標籤，body的第一個子元素 * p標籤需要在第一個 */ body > p:first-child{ background-color: yellow; } /* * 父元素是body，span標籤，body的第一個子元素 * span標籤需要在第一個 */ body > span:first-child{ background-color: yellow; } /* * 既要是p標籤，也需要是父元素的第一個子元素 * p元素必須是某個父元素中的第一個 * 不考慮父元素是誰 */ /*p:first-child{ background-color: yellow; }*/ /*p:last-child{ background-color: yellow; }*/ /* * :nth-child 可以選中任意位置的子元素 * 該選擇器後邊可以指定一個參數，指定要選中第幾個子元素 * even 表示偶數位置的子元素 * odd 表示奇數位置的子元素 * */ /*p:nth-child(odd){ background-color: yellow; }*/ /*p:nth-child(4){ background-color: yellow; }*/ /* * :first-of-type * :last-of-type * :nth-of-type * 和:first-child這些非常的類似， * 只不過child，是在所有的子元素中排列 * 而type，是在當前類型的子元素中排列 */ /* * 某個父元素的第一個p類型的元素 */ /*p:first-of-type{ background-color: yellow; }*/ /* p:last-of-type{ background-color: yellow; }*/ </style> </head> <body> <span>我是span</span> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <span>hello</span> <!--<div> <p>我是DIV中的p標籤</p> </div>--> </body> </html> - 除了根據祖先父子關係，還可以根據兄弟關係查找元素。
- 語法: – 查找後邊一個兄弟元素
- 兄弟元素 + 兄弟元素{} – 查找後邊所有的兄弟元素
- 兄弟元素 ~ 兄弟元素{}否定僞類
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 爲span後的一個p元素設置一個背景顏色爲黃色 * 後一個兄弟元素選擇器 * 作用：可以選中一個元素後緊挨着的指定的兄弟元素 * 語法：前一個 + 後一個 * 如果是<p title="hello">我是一個段落</p>就不會有效果 */ /*span + p{ background-color: yellow; }*/ /* * 選中後邊的所有兄弟元素 * 語法：前一個 ~ 後邊所有 */ /*span ~ p{ background-color: yellow; }*/ </style> </head> <body> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <span>我是一個span</span> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <p>我是一個p標籤</p> </body> </html> - 否定僞類可以幫助我們選擇不是其他東西的某件東西。
- 語法: :not(選擇器){}
- 比如p:not(.hello)表示選擇所有的p元素但是class爲hello的除外。繼承
- 就像父親的財產會遺傳給兒子一樣，在CSS中祖先元素的樣式同樣也會被子元素繼承。
- 繼承是指應用在一個標籤上的那些CSS樣式會同時被應用到其內嵌標籤上。
- 比如爲父元素設置了字體顏色，子元素也會應用上相同的顏色。
- 當然並不是所有的樣式都會被繼承，這一點我們講到具體樣式時，再去討論。如果一個元素同時滿足了多個選擇器，哪個樣式生效？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 爲所有的p元素設置一個背景顏色爲黃色，除了class值爲hello的 * * 否定僞類： * 作用：可以從已選中的元素中剔除出某些元素 * 語法： * :not(選擇器) */ p:not(.hello){ background-color: yellow; } </style> </head> <body> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <p>我是一個p標籤</p> <p class="hello">我是一個p標籤</p> <p>我是一個p標籤</p> <p>我是一個p標籤</p> </body> </html>
選擇器的權重
選擇器的權重
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>樣式的繼承</title>
<style type="text/css">
body{
font-size: 30px;
}
</style>
</head>
<body>
<!--
像兒子可以繼承父親的遺產一樣，在CSS中，祖先元素上的樣式，也會被他的後代元素所繼承,
利用繼承，可以將一些基本的樣式設置給祖先元素，這樣所有的後代元素將會自動繼承這些樣式。
這裏顯示黃色，是因爲透明的
元素背景的範圍
background-color 屬性爲元素設置一種純色。這種顏色會填充元素的內容、內邊距和邊框區域，
擴展到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），
會透過這些透明部分顯示出背景色。
transparent 值
儘管在大多數情況下，沒有必要使用 transparent。不過如果您不希望某元素擁有背景色，
同時又不希望用戶對瀏覽器的顏色設置影響到您的設計，那麼設置 transparent 值還是有必要的。
但是並不是所有的樣式都會被子元素所繼承，比如：背景相關的樣式都不會被繼承，包括邊框相關的樣式 定位相關的
-->
<div style="background-color: yellow;">
<p>
我是p標籤中的文字
<span>我是span中的文字</span>
</p>
</div>
<span>我是p元素外的span</span>
</body>
</html>
- 在頁面中使用CSS選擇器選中元素時，經常都是一個元素同時被多個選擇器選中。
- 比如：
– body h1
– h1
- 上邊的兩個選擇器都會選擇h1元素，如果兩個選擇器設置的樣式不一致那還好不會產生衝突，但是如果兩個選擇器設置的是同一個樣式，這樣h1到底要應用那個樣式呢？CSS中會默認使用權重較大的樣式，權重又是如何計算的呢？權重的計算
- 不同的選擇器有不同的權重值：
– 內聯樣式：權重是 1000
– id選擇器：權重是 100
– 類、屬性、僞類選擇器：權重是 10
– 元素選擇器：權重是 1
– 通配符：權重是 0
- 計算權重需要將一個樣式的全部選擇器相加，比如上邊的bodyh1的權重是20，h1的權重是10，所以第一個選擇器設置的樣
式會優先顯示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
background-color: yellow;
}
p{
background-color: red;
}
/*
* 當使用不同的選擇器，選中同一個元素時並且設置相同的樣式時，
* 這時樣式之間產生了衝突，最終到底採用哪個選擇器定義的樣式，由選擇器的優先級（權重）決定
* 優先級高的優先顯示。
*
* 優先級的規則
* 內聯樣式 ， 優先級 1000
* id選擇器，優先級 100
* 類和僞類， 優先級 10
* 元素選擇器，優先級 1
* 通配* ， 優先級 0
* 繼承的樣式，沒有優先級
*
* 當選擇器中包含多種選擇器時，需要將多種選擇器的優先級相加然後在比較，
* 但是注意，選擇器優先級計算不會超過他的最大的數量級，如果選擇器的優先級一樣，
* 則使用靠後的樣式。
*
* 並集選擇器的優先級是單獨計算
* div , p , #p1 , .hello{}
*
* 可以在樣式的最後，添加一個!important，則此時該樣式將會獲得一個最高的優先級，
* 將會優先於所有的樣式顯示甚至超過內聯樣式，但是在開發中儘量避免使用!important
*
*/
*{
font-size: 50px;
}
p{
font-size: 30px;
}
#p2{
background-color: yellowgreen;
}
p#p2{
background-color: red;
}
.p3{
color: green;
}
.p1{
color: yellow;
background-color: greenyellow !important;
}
</style>
</head>
<body>
<p class="p1 p3" id="p2" style="background-color: orange;">我是一個段落
<span>我是p標籤中的span</span>
</p>
</body>
</html>
