分類: CSS

CSS 選擇器，模糊查找匹配元素

CSS選擇器中沒有所謂的「萬用字元(*)」，可以透過一些方式接近模糊查詢方式，查找匹配屬性或值的元素

歸納出幾種用法

下表屬性名稱不一定為Class，可以替換成需要的屬性
單引號可有可無

[class]比對元素包含指定屬性[id][class][href] 比對元素包含其中一個屬性[class=’test’] 完全比對元素屬性與值 (區分大小寫)[class^=’test’]比對元素屬性開頭為指定的值[class$=’test’] 比對元素屬性結尾為指定的值 [class*=’test’] 模糊比對屬性包含指定的值

使用範例：

See the Pen
CSS 選擇器，模糊查找匹配元素 by VECTOR.cool (@ann71727)
on CodePen.

[……]

閱讀更多

hide protected by reCAPTCHA v3

安裝 reCAPTCHA v3 之後，頁面右下角就會多出隱私權圖標這東西，在某些場合可能需要把它隱藏起來，可以透過下面方式隱藏

下方兩段CSS都可以隱藏 reCAPTCHA v3 圖示

注意：請不要使用 display: none 這可能會使reCAPTCHA v3失去作用

https://wordpress.org/support/topic/how-do-i-hide-recaptcha-v3-badge/
https://wordpress.org/support/topic/recaptcha-v3-badge-is-displayed-on-all-pages-not-only-form-pages/

[……]

閱讀更多

純 CSS 垂直及水平置中 – 超簡單一段搞定

在被垂直居中元素的父類別，加這一段就可以，非常簡單

HTML

CSS

檢視結果

See the Pen Vertical and horizontal center by VECTOR.cool 威得數位
(@ann71727) on CodePen.

CSS 5種垂直置中方法

CSS 達成 Div 垂直置中的方法研究 (CSS Vertical Centering Complete Guide)

以CSS為中心：完整指南

[……]

閱讀更多

CSS3 鏡射

<style>

/* 水平鏡射 */
.flipx {
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    filter:FlipH;
}

/* 垂直鏡射 */
.flipy {
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    filter:FlipV;
}

</style>

 [……]

閱讀更多

html IE
tag 出現詭異方框

客戶反映在IE結尾都有奇怪的框框，原來還有人在用IE阿？

好吧！想辦法解決

原本以為這是邊框，所以天真的想說CSS加個  border:none  就解了，果然是我太天真，完全沒動！！

Google 一下，這似乎跟網路字型的Bug有關，使用下方的 CSS 就解囉

 
/* https://vector.cool */
/* 消除 IE <br> 的詭異框框 */

br {
    font-family: unset !important;
    font: unset !important;
}

下圖，詭異的框框都不見了。

[……]

閱讀更多

CSS 強制換行及強制不換行、強制全部、單詞、單字

介紹三種換行方式

<style>

/* 強制不換行 */
div{
	white-space:nowrap;
}

/* 強制斷行 (英文單詞) */
div{
	word-wrap:break-word;
	word-break:normal;
}

/* 強制英斷行 (英文單字) */
div{
	word-break:break-all;
}

</style>

 [……]

閱讀更多