從零開始學 Web 之 CSS3（一）CSS3概述，選擇器

時間 2019-11-17

標籤開始 web css3 css 概述選擇器欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......css

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html

1、CSS3

一、CSS3簡介

CSS3是CSS（層疊樣式表）技術的升級版本，主要包括盒子模型、列表模塊、超連接方式、語言模塊、背景和邊框、文字特效、多欄佈局等模塊。前端

二、新增特性

CSS3的新特徵有不少，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現透明效果、漸變效果、使用@Font-Face實現定製字體、多背景圖、文字或圖像的變形處理（旋轉、縮放、傾斜、移動）、多欄佈局、媒體查詢等。css3

三、優點

減小開發成本與維護成本git

在CSS3出現以前，開發人員爲了實現一個圓角效果，每每須要添加額外的HTML標籤，使用一個或多個圖片來完成，而使用CSS3只須要一個標籤，利用CSS3中的border-radius屬性就能完成。github

提升頁面性能web

不少CSS3技術經過提供相同的視覺效果而成爲圖片的「替代品」，換句話說，在進行Web開發時，減小多餘的標籤嵌套以及圖片的使用數量，意味着用戶要下載的內容將會更少，頁面加載也會更快。瀏覽器

四、兼容問題

瀏覽器對於CSS3的支持程度比較低，有的時候不一樣的瀏覽器須要添加不一樣的前綴。微信

Chrome（谷歌瀏覽器）：-webkit-
Safari（蘋果瀏覽器）：-webkit-
Firefox（火狐瀏覽器）：-moz-
lE（IE瀏覽器）：-ms-
Opera（歐朋瀏覽器）：-o-佈局

2、選擇器

CSS3新增了許多靈活查找元素的方法，極大的提升了查找元素的效率和精準度。CSS3選擇器與jQuery中所提供的絕大部分選擇器兼容。

一、屬性選擇器

所謂屬性選擇器就是根據指定名稱的屬性的值來查找元素。

一、E[attr]：查找指定的擁有attr屬性的E標籤。

/*查找擁有style屬性的裏標籤*/
li[style] {}

二、E[attr=value]：查找擁有指定的attr屬性而且屬性值爲value的E標籤。

/*查找擁有class屬性而且值爲Red的li標籤*/
li[class=red] {}

三、E[attr*=value]:查找擁有指定的attr屬性而且屬性值中包含(能夠在任意位置)value的E標籤

li[class*=red] {}

四、E[attr^=value]：查找擁有指定的attr屬性而且屬性值以value開頭的E標籤

li[class^=red] {}

五、E[attr$=value]：查找擁有指定的attr屬性而且屬性值以value開結束的E標籤

li[class$=red] {}

二、僞類選擇器

以前學過的僞類選擇器：a:hover，a:link， a:active， a:visited

僞類選擇器：以某元素相對於其父元素或兄弟元素的位置來獲取無素的結構僞類。

2.一、兄弟結構僞類

+：獲取當前元素的相鄰的知足條件的元素
~：獲取當前元素的知足條件的兄弟元素

/*下面這句樣式說明查找 ：添加了.first樣式的標籤的相鄰的li元素
要求：
1.必須相鄰。2.必須是指定類型的元素
*/
.first + li{
    color: blue;
}

/*下面樣式查找添加了.first樣式的元素的全部兄弟li元素*/
.first ~ li{
    color: pink;
}

2.二、相對於父元素的僞類

2.2.一、查找第一個元素和最後一個元素（無過濾）

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.二、查找第一個元素和最後一個元素（有過濾）

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.三、查找單個元素或多個元素（無過濾）

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.四、查找單個元素或多個元素（有過濾）

li:nth-of-type(even){
  background-color: orange;
}
li:nth-of-type(odd){
  background-color: pink;
}

2.2.五、查找開頭或結尾的多個元素

無過濾：E:nth-child(n) ：n 遵循線性變化，其取值0、一、二、三、四、... 可是當參數小於等於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.六、空值：沒有任何的內容，連空格都沒有

li:empty{
  background-color: red;
}

2.2.七、錨連接僞類

E:target ：能夠爲錨點目標元素添加樣式，當目標元素被觸發爲當前錨連接的目標時，調用此僞類樣式。

/*h2爲錨點，在被觸發時將h2的字體改成紅色*/
h2:target{
    color: red;
}

三、僞元素選擇器

僞元素之因此被稱爲僞元素，是由於它不是真正的DOM，可是卻能夠當成一個DOM元素看待，它的用法和真正的DOM元素的操做是同樣的，可是在DOM樹中又不會出現。

既然是僞元素，那麼沒法使用 JS 的方式來獲取。

css有一系列的僞元素，如::before，::after，::first-line，::first-letter等，本文就詳述一下:before和:after元素的使用。

3.一、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 屬性定義的內容與樣式。

注意：

IE六、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.二、E:first-letter

選中文本的第一個字母（英文）或者文字（中文）

/*設置首字下沉*/
p::first-letter {
  font-size: 40px;
  float: left;
}

3.三、E::first-line

選中文本第一行

PS：若是同時設置了::first-letter，那麼 ::first-line 沒法對第一個字母或文字進行設置（顏色除外）。

3.四、E::selection

設置選中文本的樣式。

注意：不能改變其大小，可是能夠改變顏色。

p::selection {
  background-color: orange;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。