精準控制媒材物件：CSS
選擇器的使用
父子關係／ 子孫關係／ 兄弟關係三種關係模式的操作
這是很重要的數位文本寫作技法。CSS選擇器的使用，是數位文本寫作過程中，「媒材物件」這一寫作觀念逐步產生寫作構思影響力之後，必要被重視的一種寫 作技法。對「媒材物件」掌握的精準性要求，標誌出數位寫作完全不同於傳統文本寫件的「寫作思維」。
這一種文本寫作觀念和技法，是傳統文本寫作時所沒有的。換言之，一般寫作者對這種觀念是完全陌生的。事實上，讀者必須是有著一些基礎的數位文本寫作經驗 值，才能理解它、使用它；而且都需要花一點時間，才能被充分掌握。
建議先「玩一玩」下方的互動示意圖，讓自己對媒材的「層級關係」有些大致性的模糊理解；再看一下影音教學。這樣，往下所寫的解釋性文字，才有被理解的可能性。
前一個個DIV（id ="divle2017102801a"）。
這也是第一層的DIV，001。
002第一層內的 span文字。
這也是第一層的DIV，001。
002第一層內的 span文字。
第二層級屬性的DIV，002。這一DIV的內部文
字003，有加span效果。
第二層級屬性的DIV，002。
第三層級屬性的DIV，003。這一DIV層級內的有span
效果文字004。
後一個DIV（class ="bacl20171028"）。
看 層級變化的示意層次圖示，按我。
數位寫作基礎觀念：媒材物件的層級關係
在數位文本寫作過程中，我們一定要清楚了解媒材物件與媒材物件之間的「層級關係」。層級關係共
有三種樣態：（一）父子關係，（二）子孫關係，（三）兄弟關係。
對媒材與媒材之間的層級關係掌握清楚，才能使用操作於「層級關係」的語法，才能清清楚楚，隨心所欲地操作於任一個你意指中的媒材物件。
對媒材與媒材之間的層級關係掌握清楚，才能使用操作於「層級關係」的語法，才能清清楚楚，隨心所欲地操作於任一個你意指中的媒材物件。
例如，請滑入上面文字（mouseover ↑）， 將可以使得「子孫關係」四個字，形成「視覺變化及位移效果」。換言之，使用媒材層級關係的概念和方法，來明確地達到創作者所意欲的特定媒材物件之變化。
什麼是媒材物件的「層級關係」呢？來，請先看語法結構，
<div>
DIV裡面的文字，<span style="color: red;">有用span變化的文字</span>。接著的文字。
</div>
語法所形成的呈現，
DIV裡面的文字，有用span變化的文字。接著的文字。
我們可以觀察，在 DIV這一媒材物件（即<div>xxx</div>）的裡面，請特別注意，一定是指在某一媒材完整語法「的裡面」，如果再有 其他媒材物件存在，那麼就形成了媒材物件與媒材裡面媒材物件之間的世代性「層級關係」，亦即類似於父子 這種派生式的親屬關係樣態的關係。再細區分為父子關係，子孫關係。
寫法：
<style>
div.test001a {
border: 1px solid black;
}
div.test001a > span {
text-decoration: underline;
color: red;
}
</style>
<div class="test001a">
DIV裡面的文字，<span >有用span變化的文字</span>。接著的文字。
</div>
呈現：
DIV裡面的文字，有用span變化的文字。接著的文字。
說明：
「>」這個符號，來表示兩者之間的父子關係。
子孫關係是指，某一媒材物件，與它裡面所派生的「所有」的媒材物件之間的關係，換言之， 不再是局限於「一層」，所是與「所有層」的 媒材物件關係，是子孫關係。
例如下列語法：
<style>
div.test002b {
border: 1px solid black;
}
div.test002b >div {
border: 1px solid blue;
}
div.test002b span {
text-decoration: underline;
color: red;
}
</style>
<div class="test002b">
第一層的<span>有span的文字</span>。<br>
<div>
這是第二層DIV內的，<span>有span的文字</span>。後接文字。
</div>
</br>
</div>
呈現樣態：
第一層的有span的文字。
這是第二層DIV內的，有span的文字。後接文字。
那麼，第一層DIV（黑色DIV）與，其裡面的所有媒材物件，包括DIV（藍色）以及span，所形成的關係，是子孫關係。理論一點的說，某一媒材物件與 其 面所派生的所有媒材之間的關係，是子孫關係。
說明：
中間是「 」，亦即空白，即是表示子孫關係。第一層DIV內的「所有span」都會被影響。
兄弟關係，則相對簡單。是指，同一層級之間，並例的前後之從屬關係，有如兄與弟的親屬關 係樣態，是兄弟關係。
例如語法，
<style>
div.test003c {
border: 1px solid black;
}
div.test003c +div {
background-color: lightgray;
}
</style>
<div class="test003c">
前面的DIV。
</div>
<div >
後面的DIV。
</div>
呈現：
前面的DIV。
後面的DIV。
好了，兩個DIV並沒有「裡、外」的關係，而是同一層級的前、後關係，就是兄弟關係。
說明：
用「+」這個符號，來標示對下個（div）發生作用。如果兩個物件之間有<br>，那麼則寫成，
div +br +div {
xxx
}
有幾個<br>，就寫幾個 +br。
語法寫作範例與使用時機
先看一個文本樣態，如下（滑鼠移入↓），最外層 DIV設有 id 為 id=" exdiv20171028 "
這是有span的文字。
這裡是第二層div的內文。
這裡是第二個第二層的DIV內文，這裡是有span的文字。
語法寫 入：
<style>
/* 父子關係，請 按我看呈現樣態 */
#exdiv20171028 >div {
border: 1px solid red;
}
/* 子孫關係，請 按此看效果 */
#exdiv20171028 span {
color: red;
}
* 兄弟關係，按 此看效果 */
#exdiv20171028 +div {
bacground-color: gray;
}
</style>
注意：
如果有相同的參數，那麼控制權的大小分別為，
style > id >選擇器 >class
作業練習：
請讓div裡面的照片傾斜。請使用父子、子孫兩種寫法，來完成。
發想參考：
div >div >img
或著
div img
選擇器的使用所產生的互動表現，請看教學網頁，here！
進階學習：有選擇性的父子關係
來，先看一個示範。
第1個DIV
第2個DIV
第3個DIV
語法：
CSS語法
<style>
.divtest20171104 {
border: 1px solid black;
}
.divtest20171104 >div {
border: 1px solid red;
margin-left: 15px;
}
</style>
HTML語法
<div class="divtest20171104">
<br>
<div>第1個DIV</div>
<br>
<div>第2個DIV</div>
<br>
<div>第3個DIV</div>
<br>
</div>
寫作要求：
那麼，如果在這一個父子關係中，我們並不是想要所有的子DIV都被影 響，而是子DIV中的特定某一個DIV被影響，那有沒有方法呢？
換言之，這是在父子關係的選擇概念中，再要求可以做出特定的篩選功能。
那麼，符合 這一功能的CSS選擇器語法如下：
.divtest20171104 div:nth-of-type(2) {
background-color: lightgray;
}
說明：
如我們上面所學，父子關係，要在兩者間加入「>」這一符號。
但如果我們有加上 :nth-of-type(n) ，就不用再加上「>」這一符了（但如果你要加「>」，也不影響，因為本來就是被限定為父子關係；你也可以想成電腦自動加上「>」）。
.divtest20171104 div:nth-of-type(2) {
background-color: lightgray;
}
上面這一語法，指的是 .divtest20171104 父子層級關係下 的 第幾個DIV物件被選擇了出來。
:nth-of-type(n) 是指，第n個DIV要被選出來。此例為第二個要被選出來。按 此看效果。（請往上看）
要注意小技巧：
elemnet:nth-of-type(n) 這種寫法，中間都不可 以有空白字元。
n，是指第幾個，從1算起。
再來，你也可以指定單數、偶數的選擇要求。
:nth-of-type(odd) 這是奇數的物件被選出來；
:nth-of-type(even) 這是偶數的物件被選擇出來 了。
再來，更複雜一點的。
:nth-of-type(an+b) 。來，例如，:nth-of-type(2n+1) ，那麼就是1, 3,5,7,9…這樣的順序被選擇出來。
n從0起算，再從1起累加。
例如， :nth-of-type(3n+2)，則是2, 5, 8, 11…這樣的順序。
好了，好好去算數學吧！
練習題：
請做出下列的互動呈現樣態（滑鼠移入↓）
提示：（看解答 click!!）
div div:nth-of-type(odd):hover {
background-color: xxx;
}
div div:nth-of-type(even):hover {
background-color: xxx;
}
沒有留言:
張貼留言