關於CSS 偽元素哪個比較實用 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

3

關於CSS 偽元素哪個比較實用

css

咖咖拉 2019-12-24 13:24:26 ‧ 1522 瀏覽

分享至

.xxx::before
.xxx:before

之前有看過一篇文章說:before的相容性比較好

而::before 動畫&transition IOS不支援(:before有支援嗎?)
https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before
VScode預設的快速輸入都是::before

好奇大大們都是用哪個來寫比較多?
兩個寫法差異是?

登入發表討論

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

3 個回答

4

dragonH

iT邦超人 5 級 ‧ 2019-12-24 13:42:44

最佳解答

找到一個應該講得最好的

這篇也不錯

根據這篇

可以推斷

:before 是 css2 的 syntax

::before 是 css3 的 syntax

兩者理論上是指同一個東西

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

咖咖拉 iT邦好手 1 級 ‧ 2019-12-24 13:57:45 檢舉

網路上的文章都是說:before 支援IE8 所以相容比較完整
(工作環境不在意IE8 XDD)

不過動畫方面不知道偽類(:before)跟偽元素(::before) 有差異嗎?
上面的docs說::before 不支援IOS的Animation and transition

dragonH iT邦超人 5 級 ‧ 2019-12-24 14:01:59 檢舉

我覺得要分成兩個問題來看

1 .

:before 跟 ::before 是一樣的功能嗎

2 .

如果是的話

ios 不支援

有什麼替代方案嗎?

咖咖拉 iT邦好手 1 級 ‧ 2019-12-24 14:08:51 檢舉

我的話
:before 跟 ::before基本上都差不多
ios 不支援的話只能用js來寫動畫

自答

因為還沒遇到這方面問題
想先了解可能會遇到的問題

dragonH iT邦超人 5 級 ‧ 2019-12-24 14:13:16 檢舉

對阿

看來看去

好像除了支援的問題

不然好像都推薦用 ::before

然後我現在都是寫 vue 跟 react

動畫什麼的

能用變數控制就用變數控制

咖咖拉 iT邦好手 1 級 ‧ 2019-12-24 14:22:22 檢舉

我的體育老師都說能用CSS來做的
就不要用JS

dragonH iT邦超人 5 級 ‧ 2019-12-24 14:25:29 檢舉

或許可能有的情況是這樣啦

剛好看到這篇

登入發表回應

2

小魚

iT邦大師 1 級 ‧ 2019-12-24 13:29:12

我沒用過 ::before

回應 1
分享
檢舉

咖咖拉 iT邦好手 1 級 ‧ 2019-12-24 13:36:13 檢舉

我也都是用:before
不過我不懂這2個的差異XD

登入發表回應

0

majo2013

iT邦新手 4 級 ‧ 2020-01-31 14:56:36

建議你，如果不用考量 ie 8 及其以下的舊版本的話，就用 ::before

2者差別在

:before - 是 css2
::before - 是 css3

是後來為了更細分偽類與偽元素不同而改的

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22207 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙