*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀

2017年10月28日 星期六

CSS 選擇器的使用:父子關係/ 子孫關係/ 兄弟關係




精準控制媒材物件:CSS 選擇器的使用
父子關係/ 子孫關係/ 兄弟關係三種關係模式的操作


這是很重要的數位文本寫作技法。CSS選擇器的使用,是數位文本寫作過程中,「媒材物件」這一寫作觀念逐步產生寫作構思影響力之後,必要被重視的一種寫 作技法。對「媒材物件」掌握的精準性要求,標誌出數位寫作完全不同於傳統文本寫件的「寫作思維」。

這一種文本寫作觀念和技法,是傳統文本寫作時所沒有的。換言之,一般寫作者對這種觀念是完全陌生的。事實上,讀者必須是有著一些基礎的數位文本寫作經驗 值,才能理解它、使用它;而且都需要花一點時間,才能被充分掌握。

建議先「玩一玩」下方的互動示意圖,讓自己對媒材的「層級關係」有些大致性的模糊理解;再看一下影音教學。這樣,往下所寫的解釋性文字,才有被理解的可能性。




前一個個DIV(id ="divle2017102801a")。
這也是第一層的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>)的裡面,請特別注意,一定是指在某一媒材完整語法「的裡面」,如果再有 其他媒材物件存在,那麼就形成了媒材物件媒材裡面媒材物件之間的世代性「層級關係」,亦即類似於父子 這種派生式的親屬關係樣態的關係。再細區分為父子關係,子孫關係。

父子關係是指,兩媒材物件之間,只隔著「一層」的派生關係, 有如父子般的關係。如上例的div和span,就是父子關係。

寫法:

<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;
}