CSS3 的新特性

来源:https://www.cnblogs.com/cherry0420/archive/2023/05/24/17427965.html
-Advertisement-
Play Games

1. CSS3 新增選擇器 CSS3 給我們新增了選擇器,可以更加便捷,更加自由的選擇目標元素。 1.1 屬性選擇器 屬性選擇品可以根據元素特定屬性的來選擇元素。這樣就可以不用藉助於類或者id選擇器。 選擇符 簡介 E[att] 選擇具有 att 屬性的E 元素。 E[att="val"] 選擇具有 ...


1. CSS3 新增選擇器

CSS3 給我們新增了選擇器,可以更加便捷,更加自由的選擇目標元素。

1.1 屬性選擇器

屬性選擇品可以根據元素特定屬性的來選擇元素。這樣就可以不用藉助於類或者id選擇器。

選擇符

簡介

E[att]

選擇具有 att 屬性的E 元素。

E[att="val"]

選擇具有 att 屬性且厲性值等於 val 的E 元素。

E[att^="val"]

匹配具有 att 屬性旦值以 val 開頭的E 元素。

E[att$="val"]

匹配具有 att 屬性且位以 val 結尾的E 元素。

E[att*="val"]

匹配具有 att 屬性且值中含有val 的E元素。

註意:類選擇器、厲性選擇器、偽類選擇器,權重為 10

1.2 結構偽類選擇器

結構偽類選擇器主要根據文檔結構來選擇器元素 ,常用於根據父級選擇器裡面的子元素。

選擇符

簡介

E:first-child

匹配父元素中的第一個子元素E。

E:last-child

匹配父元素中最後一個E元素。

E:nth-child(n)

匹配父元素中的第n個子元素E。

E:first-of-type

指定類型E的第一個。

E:last-of-type

指定類型E的最後一個。

E:nth-of-type(n)

指定類型E的第n個  。

nth-child (n)選擇某個父元素的一個或多個特定的子元素。
n可以是數字,關鍵字和公式。
n如果是數字 ,就是選擇第n 個子元素 ,裡面數字從1開始…。
n可以是關鍵字:even偶數,odd 奇數。
n可以是公式:常見的公式如下(如果n是公式,則從0開始計算,但是第0個元素或者超出了元素的個數會被忽略)。

公式

取值

2n

偶數。

2n+1

奇數。

5n

5 10 15...。

n+5

從第5個開始(包含第五個)到最後。

-n+5

前5個(包含第5個)。

區別:
1. nth-child對父元素裡面所有孩子排序選擇(序號是固定的) 先找到第n個孩子 ,然後看看是否和E匹配。
2. nth-of-type 對父元素裡面指定子元素進行排序選擇。先去匹配E,然後再根據E找第n個孩子。

1.3 偽元素選擇器

偽元素選擇器可以幫助我們利用CSS創建新標簽元素,而不需要HTML標簽,從而簡化HTML結構。

選擇符

簡介

::before

在元素內部的前面插入內容。

::after

在元素內部的後面插入內容。

註意:

(1) before 和after 創建一個元素,但是屬於行內元素。

(2) 新創建的這個元素在文檔樹中是找不到的,所以我們稱為偽元素
語法:

element::before {}

before 和after必須有 content 屬性。
before 在父元素內容的前面創建元素,after 在父元素內容的後面插入元素。
偽元泰選擇器和標簽選擇器一樣,權重為 1。

偽元素選擇器使用場景:偽元素清除浮動

升級

優化

.clearfix:after {
content: " ";偽元素必須寫的屬性
display: block;插入的元素必須是塊級
height: 0;不要看見這個元表
clear: both;核心代碼清除浮動
visibility: hidden;不要看見這個元素

}

.clearfix:before, .clearfix:after {
content: " ";
display: table;轉換為塊級元素並且一行顯示

}           
.clearfix:after {
clear: both;

}

2. CSS3盒子模型

CSS3 中可以通過 box-sizing 來指定盒模型,有2個值:即可指定為content-box border-box,這樣我們計算盒子大小的方式就發生了改變。
可以分成兩種情況:
1. box-sizing: content-box 盒子大小為 width + padding + border (以前預設的)。
2. box-sizing:border-box 盒子大小為 width。

如果盒子模型我們改為了box-sizing; border-box,那padding和border就不會撐大盒子了(前提padding和border不會超過width寬度)。

2.1 CSS3濾鏡filter

filter Css屬性將模糊或顏色偏移等圖形效果應用於元素。
filter:函數()例如:filter:blur(5px); blur模糊處理 數值越大越模糊。

2.2 CSS3calc 函數

calc(此CSS函數讓你在聲明CSS屬性值時執行一些計算)。
width: calc(100% - 80px); (運算符號前面必須有空格,並註意包含單位)

括弧裡面可以使用 +-*/ 來進行計算。

2.3 CSS3 過渡

過渡 (transition)是CSS3中具有顛覆性的特征之一,我們可以在不使用 Flash 動畫或javaScript 的情況下 ,當元素從一種樣式變換為另一種樣式時為元素添加效果。

過渡動畫:是從一個狀態漸漸的過渡到另外一個狀態。

transition:要過渡的屬性 花費時間 運動曲線 何時開始;

1.屬性:想要變化的 css 屬性,完度高度 背景顏色 內外邊距都可以。如果想要所有的屬性都變化過渡,寫一個all 就可以。
2. 花費時間 :單位是 秒(必須寫單位)比如0.5s。
3.運動曲線:預設是ease(可以省路)。
4.何時開始:單位是秒(必須寫單位)可以設置延遲觸發時間 預設是0s(可以省略)。

口訣:誰做過渡給誰加。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 鑒於《網路新詞網路熱詞大全ACCESS資料庫》幾百條的記錄數太少,於是找了找網路上的一些流行熱詞網站,挑了個數據量大的採集了下來,經過整理(去除重覆、去除詞長超過10字)共得到1萬4千多條記錄。 熱詞:做完核酸可以領豆油解釋:疫情期間民眾耳朵不好使現狀。其實是“做完核酸不要逗留”。源自海南某地一排隊 ...
  • 英語詞典、背單詞類的數據已經發了很多很多了,打算今天這一個將是最後一個了,後續沒有顛覆性的好的話就不再發這類數據了,今天這一份的背單詞資料庫好處是有58個分類,之前發過有27個分類的《1萬6千多最好的背單詞SQLITE資料庫》。 單詞表:36238條記錄,可以看一下word_root_id欄位的作用 ...
  • 無人直播插件 直播替換安裝使用教程 一、適用機型及系統1、機型:所有iphone機型,可越獄即可2、系統:支持13系統及以上所有可越獄系統二、安裝手機端1、越獄(1)Windows越獄方法:電腦端安裝愛思助手,點擊工具 》一鍵越獄 》 選擇uncover 》開始越獄,如提示需要登錄,點擊商城,註冊並 ...
  • key是widget、element和semanticsNode的唯一標識,同一個parent下的所有element的key不能重覆,但是在特定條件下可以在不同parent下使用相同的key,比如page1和page2都可以使用ValueKey ...
  • >WebGL近幾年越來越被人們所關註,但是二三維開發難度也比普通web要高出許多,不管我們是在在開發或者是學習過程中,往往需要耗費大量的時間去查閱資料,和研究官方案例, >而大多二三維的包(openlayersjs,cesiumjs、threejs)都是外國的,如果英語水平好還行,否則讀起來正是連蒙 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 最近的面試中有一個面試官問我按鈕級別的許可權怎麼控制,我說直接v-if啊,他說不夠好,我說我們項目中按鈕級別的許可權控制情況不多,所以v-if就夠了,他說不夠通用,最後他對我的評價是做過很多東西,但是都不夠深入,好吧,那今天我們就來深入深入。 ...
  • Velocity是一個基於Java的Web頁面模版引擎。十多年前,Velocity將Java代碼從Web頁面中分離出來,使得開發者能夠並行網頁開發和Java開發。隨著十年前後端分離的浪潮涌動,迴首再面對這些基於Velocity的舊系統,無論是後端還是前端人員維護,都會存在諸多問題 ...
  • 1. 什麼是Web伺服器 伺服器(我們也會稱之為主機)是提供電腦服務的設備,它也是一臺電腦。在網路環境下。根據伺服器提供的服務類型不同,伺服器又分為文件伺服器、資料庫伺服器、應用程式伺服器、Web伺服器等。 Web伺服器一般指網站伺服器,是指駐留於網際網路上某種類型電腦的程式,可以向瀏覽器等We ...
一周排行
    -Advertisement-
    Play Games
  • 通過WPF的按鈕、文本輸入框實現了一個簡單的SpinBox數字輸入用戶組件並可以通過數據綁定數值和步長。本文中介紹了通過Xaml代碼實現自定義組件的佈局,依賴屬性的定義和使用等知識點。 ...
  • 以前,我看到一個朋友在對一個系統做初始化的時候,通過一組魔幻般的按鍵,調出來一個隱藏的系統設置界面,這個界面在常規的菜單或者工具欄是看不到的,因為它是一個後臺設置的關鍵界面,不公開,同時避免常規用戶的誤操作,它是作為一個超級管理員的入口功能,這個是很不錯的思路。其實Winform做這樣的處理也是很容... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他的程式每次關閉時就會自動崩潰,一直找不到原因讓我幫忙看一下怎麼回事,這位朋友應該是第二次找我了,分析了下 dump 還是挺經典的,拿出來給大家分享一下吧。 二:WinDbg 分析 1. 為什麼會崩潰 找崩潰原因比較簡單,用 !analyze -v 命 ...
  • 在一些報表模塊中,需要我們根據用戶操作的名稱,來動態根據人員姓名,更新報表的簽名圖片,也就是電子手寫簽名效果,本篇隨筆介紹一下使用FastReport報表動態更新人員簽名圖片。 ...
  • 最新內容優先發佈於個人博客:小虎技術分享站,隨後逐步搬運到博客園。 創作不易,如果覺得有用請在Github上為博主點亮一顆小星星吧! 博主開始學習編程於11年前,年少時還只會使用cin 和cout ,給單片機點點燈。那時候,類似async/await 和future/promise 模型的認知還不是 ...
  • 之前在阿裡雲ECS 99元/年的活動實例上搭建了一個測試用的MINIO服務,以前都是直接當基礎設施來使用的,這次準備自己學一下S3相容API相關的對象存儲開發,因此有了這個小工具。目前僅包含上傳功能,後續計劃開發一個類似圖床的對象存儲應用。 ...
  • 目錄簡介快速入門安裝 NuGet 包實體類User資料庫類DbFactory增刪改查InsertSelectUpdateDelete總結 簡介 NPoco 是 PetaPoco 的一個分支,具有一些額外的功能,截至現在 github 星數 839。NPoco 中文資料沒多少,我是被博客園群友推薦的, ...
  • 前言 前面使用 Admin.Core 的代碼生成器生成了通用代碼生成器的基礎模塊 分組,模板,項目,項目模型,項目欄位的基礎功能,本篇繼續完善,實現最核心的模板生成功能,並提供生成預覽及代碼文件壓縮下載 準備 首先清楚幾個模塊的關係,如何使用,簡單畫一個流程圖 前面完成了基礎的模板組,模板管理,項目 ...
  • 假設需要實現一個圖標和文本結合的按鈕 ,普通做法是 直接重寫該按鈕的模板; 如果想作為通用的呢? 兩種做法: 附加屬性 自定義控制項 推薦使用附加屬性的形式 第一種:附加屬性 創建Button的附加屬性 ButtonExtensions 1 public static class ButtonExte ...
  • 在C#中,委托是一種引用類型的數據類型,允許我們封裝方法的引用。通過使用委托,我們可以將方法作為參數傳遞給其他方法,或者將多個方法組合在一起,從而實現更靈活的編程模式。委托類似於函數指針,但提供了類型安全和垃圾回收等現代語言特性。 基本概念 定義委托 定義委托需要指定它所代表的方法的原型,包括返回類 ...