從零開始學 Web 之 CSS3(一)CSS3概述,選擇器
大家好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新......
- github:https://github.com/Daotin/Web
- 微信公眾號:Web前端之巔
- 博客園:http://www.cnblogs.com/lvonve/
- CSDN:https://blog.csdn.net/lvonve/
在這裏我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧!
一、CSS3
1、CSS3簡介
CSS3是CSS(層疊樣式表)技術的升級版本,主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
2、新增特性
CSS3的新特征有很多,例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定制字體、多背景圖、文字或圖像的變形處理(旋轉、縮放、傾斜、移動)、多欄布局、媒體查詢等。
3、優勢
減少開發成本與維護成本
在CSS3出現之前,開發人員為了實現一個圓角效果,往往需要添加額外的HTML標簽,使用一個或多個圖片來完成,而使用CSS3只需要一個標簽,利用CSS3中的border-radius屬性就能完成。
提高頁面性能
很多CSS3技術通過提供相同的視覺效果而成為圖片的“替代品”,換句話說,在進行Web開發時,減少多余的標簽嵌套以及圖片的使用數量,意味著用戶要下載的內容將會更少,頁面加載也會更快。
4、兼容問題
瀏覽器對於CSS3的支持程度比較低,有的時候不同的瀏覽器需要添加不同的前綴。
Chrome(谷歌瀏覽器):-webkit-
Safari(蘋果瀏覽器):-webkit-
Firefox(火狐瀏覽器):-moz-
lE(IE瀏覽器):-ms-
Opera(歐朋瀏覽器):-o-
二、選擇器
CSS3新增了許多靈活查找元素的方法,極大的提高了查找元素的效率和精準度。CSS3選擇器與jQuery中所提供的絕大部分選擇器兼容。
1、屬性選擇器
所謂屬性選擇器就是根據指定名稱的屬性的值來查找元素。
1、E[attr]
:查找指定的擁有attr屬性的E標簽。
/*查找擁有style屬性的裏標簽*/ li[style] {}
2、E[attr=value]
:查找擁有指定的attr屬性並且屬性值為value的E標簽。
/*查找擁有class屬性並且值為Red的li標簽*/
li[class=red] {}
3、E[attr*=value]
:查找擁有指定的attr屬性並且屬性值中包含(可以在任意位置)value的E標簽
li[class*=red] {}
4、E[attr^=value]
:查找擁有指定的attr屬性並且屬性值以value開頭的E標簽
li[class^=red] {}
5、E[attr$=value]
:查找擁有指定的attr屬性並且屬性值以value開結束的E標簽
li[class$=red] {}
2、偽類選擇器
之前學過的偽類選擇器:a:hover
,a:link
, a:active
, a:visited
偽類選擇器:以某元素相對於其父元素或兄弟元素的位置來獲取無素的結構偽類。
2.1、兄弟結構偽類
+
:獲取當前元素的相鄰的滿足條件的元素
~
:獲取當前元素的滿足條件的兄弟元素
/*下面這句樣式說明查找 :添加了.first樣式的標簽的相鄰的li元素
要求:
1.必須相鄰。2.必須是指定類型的元素
*/
.first + li{
color: blue;
}
/*下面樣式查找添加了.first樣式的元素的所有兄弟li元素*/
.first ~ li{
color: pink;
}
2.2、相對於父元素的偽類
2.2.1、查找第一個元素和最後一個元素(無過濾)
E:first-child
:查找E元素的父級元素中的第一個E元素。
E:last-child
:查找E元素的父元素中最後一個指定類型的子元素
/*下面這句樣式查找:li的父元素中的第一個li元素
1.相對於當前指定元素的父元素
2.查找的類型必須是指定的類型*/
li:first-child{
color: red;
}
li:last-child{
background-color: skyblue;
}
註意:在查找的時候並不會限制查找的元素的類型,也就是如果第一個元素不是E元素的話,就查找不到,查找的時候不會過濾掉E元素之外的元素。
2.2.2、查找第一個元素和最後一個元素(有過濾)
E:first-of-type
:查找E元素的父級元素中的第一個E元素。
E:last-of-type
:查找E元素的父元素中最後一個指定類型的子元素
/*查找的時候限制類型 first-of-type*/
/*1.也是相對於父元素
2.在查找的時候只會查找滿足類型條件的元素,過渡掉其它類型的元素*/
li:first-of-type{
color: red;
}
li:last-of-type{
color: orange;
}
2.2.3、查找單個元素或多個元素(無過濾)
E:nth-child(index)
:查找指定索引位置的元素(從1開始的索引)
E:nth-child(even)
:查找索引為偶數位置的元素
E:nth-child(odd)
:查找索引為奇數位置的元素
與上面類似,下面是倒著計算的:
E:nth-last-child(xxx)
li:nth-child(5){
background-color: lightblue;
}
li:nth-child(even){
background-color: blue;
}
li:nth-child(odd){
background-color: red;
}
2.2.4、查找單個元素或多個元素(有過濾)
li:nth-of-type(even){
background-color: orange;
}
li:nth-of-type(odd){
background-color: pink;
}
2.2.5、查找開頭或結尾的多個元素
無過濾:E:nth-child(n)
:n 遵循線性變化,其取值0、1、2、3、4、... 但是當參數小於等於0時,選取無效。
有過濾:E:nth-of-type(n)
無過濾倒序:E:nth-last-child(n)
有過濾倒序:E:nth-last-of-type(n)
示例:
/*想為前面的5個元素添加樣式*/
/*n:默認取值範圍為0~子元素的長度.但是當n<=0時,選取無效
0>>5
1>>4
...
4>>1
5>>0*/
li:nth-of-type(-n+5){
font-size: 30px;
}
li:nth-last-of-type(-n+5){
font-size: 30px;
}
PS:n 可是多種形式:nth-child(2n)、nth-child(2n+1)、nth-child(-n+5)等。
2.2.6、空值:沒有任何的內容,連空格都沒有
li:empty{
background-color: red;
}
2.2.7、錨鏈接偽類
E:target
:可以為錨點目標元素添加樣式,當目標元素被觸發為當前錨鏈接的目標時,調用此偽類樣式。
/*h2為錨點,在被觸發時將h2的字體改為紅色*/
h2:target{
color: red;
}
3、偽元素選擇器
偽元素之所以被稱為偽元素,是因為它不是真正的DOM,但是卻可以當成一個DOM元素看待,它的用法和真正的DOM元素的操作是一樣的,但是在DOM樹中又不會出現。
既然是偽元素,那麽無法使用 JS 的方式來獲取。
css有一系列的偽元素,如::before
,::after
,::first-line
,::first-letter
等,本文就詳述一下:before和:after元素的使用。
3.1、E::before,E::after
- 是一個行內元素,需要轉換成塊:
display:block
或者float:left/right
或者使用position
。 - 必須添加 content , 哪怕不設置內容,也需要
content:""
,否則不會起作用。 - E:after、E:before 在舊版本裏是偽類,在新版本裏是偽元素,因為在新版本下E:after、E:before會被自動識別為E::after、E::before,按偽元素來對待,這樣做的目的是用來做兼容處理。
E::before
:定義在一個元素的內容之前插入 content 屬性定義的內容與樣式。E::after
:定義在一個元素的內容之後插入 content 屬性定義的內容與樣式。
註意:
- IE6、IE7與IE8(怪異模式Quirks mode)不支持此偽元素
- CSS2中 E:before或者E:after,是屬於偽類的,並且沒有偽元素的概念,CSS3中 提出偽元素的概念 E::before和E::after,並且歸屬到了偽元素當中,偽類裏就不再存在E:before或者 E:after偽類
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div:nth-of-type(1){
width: 300px;
height: 200px;
background-color: red;
float: left;
position: relative;
}
div:nth-of-type(2){
width: 100px;
height: 200px;
background-color: blue;
float: left;
}
div:nth-of-type(1)::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
right: -10px;
top: -10px;
}
div:nth-of-type(1)::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
right: -10px;
bottom: -10px;
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
3.2、E:first-letter
選中文本的第一個字母(英文)或者文字(中文)
/*設置首字下沈*/
p::first-letter {
font-size: 40px;
float: left;
}
3.3、E::first-line
選中文本第一行
PS:如果同時設置了::first-letter,那麽 ::first-line 無法對第一個字母或文字進行設置(顏色除外)。
3.4、E::selection
設置選中文本的樣式。
註意:不能改變其大小,但是可以改變顏色。
p::selection {
background-color: orange;
}
從零開始學 Web 之 CSS3(一)CSS3概述,選擇器