Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Cascading&Inheritance
Search
Ryan Chung
March 28, 2014
Technology
0
640
CSS Cascading&Inheritance
Ryan Chung
March 28, 2014
Tweet
Share
More Decks by Ryan Chung
See All by Ryan Chung
MovieBot Development
ryan403
0
280
Design Voice-First Games for Alexa
ryan403
0
40
AI Teaching Talk
ryan403
0
100
Cognitive Service
ryan403
0
84
jQuery & API Practices
ryan403
0
110
CSS Practices
ryan403
1
130
JavaScript Practices
ryan403
0
85
Web Programming - Lesson 6
ryan403
1
570
Web Programming - Lesson 7
ryan403
1
590
Other Decks in Technology
See All in Technology
20241220_S3 tablesの使い方を検証してみた
handy
3
220
社内イベント管理システムを1週間でAKSからACAに移行した話し
shingo_kawahara
0
180
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
140
Wvlet: A New Flow-Style Query Language For Functional Data Modeling and Interactive Data Analysis - Trino Summit 2024
xerial
1
110
How to be an AWS Community Builder | 君もAWS Community Builderになろう!〜2024 冬 CB募集直前対策編?!〜
coosuke
PRO
2
2.8k
Fanstaの1年を大解剖! 一人SREはどこまでできるのか!?
syossan27
2
160
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
180
5分でわかるDuckDB
chanyou0311
10
3.2k
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
160
バクラクのドキュメント解析技術と実データにおける課題 / layerx-ccc-winter-2024
shimacos
2
1k
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
0
110
権威ドキュメントで振り返る2024 #年忘れセキュリティ2024
hirotomotaguchi
2
730
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Code Review Best Practice
trishagee
65
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
What's in a price? How to price your products and services
michaelherold
243
12k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
We Have a Design System, Now What?
morganepeng
51
7.3k
Music & Morning Musume
bryan
46
6.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
Speed Design
sergeychernyshev
25
670
Optimising Largest Contentful Paint
csswizardry
33
3k
Transcript
http://MobileDev.TW 1 CSS Cascading & Inheritance 鐘祥仁 Ryan
[email protected]
CSS
Cascading & Inheritence
http://MobileDev.TW Cascading • 相同的CSS屬性被賦予多次不同的屬性值,但卻套 用在同一個元件時,最後一個屬性值才會被使用。 • 表頭樣式與行內樣式衝突 CSS Cascading &
Inheritence 2
http://MobileDev.TW Cascading • 相同的CSS屬性被賦予多次不同的屬性值,但卻套 用在同一個元件時,最後一個屬性值才會被使用。 • 表頭樣式前後衝突 CSS Cascading &
Inheritence 3
http://MobileDev.TW Inheritance 繼承 • 有些CSS屬性會自動繼承給指定對象的子元件。 • 段落元件p下的粗體元件b ㄨ CSS Cascading
& Inheritence 4
http://MobileDev.TW Inheritance 繼承 • 有些CSS屬性會自動繼承給指定對象的子元件。 • div --> p -->
b CSS Cascading & Inheritence 5
http://MobileDev.TW Inheritance 繼承 • 極少數CSS屬性繼承時會產生多重效果。 • div --> p -->
b CSS Cascading & Inheritence 6
http://MobileDev.TW Inheritance 繼承 • 有些CSS屬性會自動繼承給指定對象的子元件。 • 以比例方式設定會產生繼承值之後的比例 CSS Cascading &
Inheritence 7
http://MobileDev.TW Inheritance 繼承 • 如果沒有自動繼承至子元件,可使用inherit強制繼承。 • 段落元件p下的粗體元件b CSS Cascading &
Inheritence 8
http://MobileDev.TW Inheritance 繼承 • 如果沒有自動繼承至子元件,可使用inherit強制繼承。 • 段落元件p下的粗體元件b CSS Cascading &
Inheritence 9
http://MobileDev.TW CSS規則套用的優先權 Specificity • 直接寫在HTML元件的style屬性 • 優先權值:1000 • CSS選擇器使用ID的方式 •
優先權值:100 • CSS選擇器使用class,pseudo-class或限定屬性 • 優先權值:10 • CSS選擇器使用HTML元件、偽元件(pseudo-element) • 優先權值:1 CSS Cascading & Inheritence 10
http://MobileDev.TW 計算 Specificity • #container ul#menu li.active ul li:hover {}
• #container:100 • ul:1 • #menu:100 • li:1 • .active:10 • ul:1 • li:1 • :hover:10 CSS Cascading & Inheritence 11 Specificity:224
http://MobileDev.TW 聖旨駕到 !important • 凌駕所有優先權與位置 CSS Cascading & Inheritence 12
http://MobileDev.TW 一個HTML元件可以套用多個類別 • rule1 + rule2 CSS Cascading & Inheritence
13
http://MobileDev.TW id 與 class 可以同時存在 • id的優先權值比較高 CSS Cascading &
Inheritence 14
http://MobileDev.TW 選擇器也可以巢狀使用 • 用空格隔開 CSS Cascading & Inheritence 15
http://MobileDev.TW 選擇器也可一次指定多個 CSS Cascading & Inheritence 16