此篇會把一些特殊的選擇器加以介紹
讓大家更能夠活用各式各樣的方式去套用到網頁上
6. Adjacent selectors(相鄰選擇器)
所謂的相鄰就是隔壁，所以在Dom節點樹中是左右關係，不是上下關係，特殊關鍵字為"+"
使用方法：
關鍵字1+關鍵字2{
CSS內容
}
範例：
<html>
<head>
<style type="text/css">
div+span{
font-size:200px;
}
</style>
</head>
<body>
<span>Test</span>
<div>Test</div>
<span>Test</span>
</body>
</html>
尚未執行前或許會認為DIV標籤前後都是SPAN標籤，所有兩個都會被套用
但是執行後只有下一個SPAN標籤被套用了，並非前後都被套用
7. Child selectors(子選擇器)
有左右當然就有上下拉，特殊關鍵字為">"
使用方法：
關鍵字1>關鍵字2{
CSS內容
}
但是這個選擇器跟Descendant selectors有什麼不一樣呢??
先來看2個範例吧
範例：
<html>
<head>
<style type="text/css">
div>span{
font-size:200px;
}
</style>
</head>
<body>
<div>
<span>Test</span>
Text
</div>
</body>
</html>
範例2：
<html>
<head>
<style type="text/css">
div>span{
font-size:200px;
}
</style>
</head>
<body>
<div>
<a>
<span>Test</span>
</a>
Text
</div>
</body>
</html>
以上兩個範例的HTML結構都跟Descendant selectors一樣
但是執行起來就只有範例1有被套用，為什麼?
就名詞上來解釋的話，後代包含著兒子、孫子、曾孫、玄孫，可是子代就只代表了子女
也就是說Child selectors只會針對關鍵字1 "下一層" 的關鍵字2做套用
8.Attribute selectors(屬性選擇器)
這裡的屬性是代表HTML標籤中的屬性或是自訂屬性，特殊關鍵字為"[]"
這個選擇器比較特別，使用的是類似正規表達式的規則
使用方法：
關鍵字[規則]{
CSS內容
}
範例：
<html>
<head>
<style type="text/css">
div[id]{
font-size:200px;
}
</style>
</head>
<body>
<div>Text</div>
<div id="">Text</div>
</body>
</html>
以上寫法會把有ID這個屬性的DIV標籤套用
範例2：
<html>
<head>
<style type="text/css">
div[id="find"]{
font-size:200px;
}
</style>
</head>
<body>
<div id="find1">Text</div>
<div id="find">Text</div>
</body>
</html>
換成這種寫法會把有ID這個屬性並且ID等於fund的DIV標籤套用
範例3：
<html>
<head>
<style type="text/css">
div[id~="in"]{
font-size:200px;
}
</style>
</head>
<body>
<div id="find1">Text</div>
<div id="find">Text</div>
</body>
</html>
範例4：
<html>
<head>
<style type="text/css">
div[id~="in"]{
font-size:200px;
}
</style>
</head>
<body>
<div id="find1">Text</div>
<div id="f in d">Text</div>
</body>
</html>
這種寫法會把有ID這個屬性並且ID的值中帶有獨立(有用空格分開)"in"的DIV標籤套用
範例5：
<html>
<head>
<style type="text/css">
div[id^="in"]{
font-size:200px;
}
</style>
</head>
<body>
<div id="find1">Text</div>
<div id="ind1">Text</div>
</body>
</html>
這種寫法會把有ID這個屬性並且ID的值以"in"開頭的DIV標籤套用
範例6：
<html>
<head>
<style type="text/css">
div[id$="in"]{
font-size:200px;
}
</style>
</head>
<body>
<div id="fin">Text</div>
<div id="ind1">Text</div>
</body>
</html>
這種寫法會把有ID這個屬性並且ID的值以"in"結尾的DIV標籤套用
範例7：
<html>
<head>
<style type="text/css">
div[id*="in"]{
font-size:200px;
}
</style>
</head>
<body>
<div id="find">Text</div>
<div id="find1">Text</div>
</body>
</html>
這種寫法會把有ID這個屬性並且ID的值中有"in"的DIV標籤套用
8種選擇器就在此介紹完畢了
下一篇會實作一個套有CSS的HTML網頁讓大家參考，敬請期待。