---
tags: 疑難雜症
---
# CSS疑難雜症

| 修改人員 | 版本 | 註解 | 修改時間 |
| :--- |:-------------:|:-----|:---|
| Pemo | 1.0.0 | 新增文件與說明 | 2022/09/05 |
| Pemo | 1.1.0 | 新增同層元素篩選 | 2022/10/17 |
| Pemo | 1.2.0 | 新增文字換行設定 | 2023/02/16 |
| Pemo | 1.3.0 | 除了第一個元素以外的所有元素 | 2023/02/18 |

- 文字靠右對齊

style: float: right;

- @font-face{ font-family必要，src必要，其餘選擇性 }

---font-family
font-family: custom-sans-serif;字型名稱
---src
src: url("fonts/微軟正黑體")//相對於CSS設定檔的位置
src: url("/fonts/微軟正黑體")//絕對位置
src: url("fonts.svg#simple")//使用SVG檔中id為 'simple'的字型
//如果woff格式不支援，則改用OpenType格式
src: url(basic-sans-serif.woff) format("woff"),
    url(basic-sans-serif.ttf) format("opentype")
src: local(微軟正黑體),//指定使用者電腦中的微軟正黑體字型
    url(微軟正黑體)//如果使用者電腦中找不到，則從網路下載
---unicode-range
unicode-range: 若沒有指定萬國碼區間，預設涵蓋所有範圍，使用U+或u+開頭，範圍的指定可使用下面三種
    單一codepoint(U+416)
        使用1至6位數的十六進位數字，指定一個Unicode的codepoint
    範圍區間(U+400-4ff)
        使用連字線(-)與兩個Unicode的codepoints來指定一段範圍區間
    萬用字元(U+4??)
        使用萬用字元(?)指定codepoint範圍，這裡的 ? 代表任何一個十六進位的數字
    可以使用逗點分隔的方式，結合多個範圍表示方式

範例:
//日文
unicode-range: U+3000-9FFF, U+??
//英文
unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300
//複合字型
@font-face{
    font-family: JanpaneseWithGentium;
    src: local(MSMincho);
    //沒有指定萬國碼區間，預設涵蓋所以範圍
}
@font-face{
    font-family: JapaneseWithGentium
    src: url(http://www.example.com/fonts/Gentium.woff);
    unicode-range: U+0-2FF
}
在使用JapaneseWithGentium這個字型時
只要碰到拉丁字母(U+0-2FF)就會自動使用Gentium.woff這個字型檔

- 元素的下一個元素(同一層)

X + Y{}

- 元素的後面所有元素(同一層)

X ~ Y{}

- 元素後除了第一個元素以外的所有元素

.XXX > *:not(:first-child){}

- 文字換行

文字強迫換行，英文字會被切一半 word-break: break-all;
依單字換行 word-wrap:break-word;
不換行 white-space:nowrap;