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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...