CSS筆記(三):進階selector

進階selector

1.指定屬性selector

例1:
【HTML】
<form name="form1″>
<input type="text" name="client">
<input type="submit" value="送出">
</form>
【CSS】
input[type="text"] {background-color: blue}

意思是只有type為"text"的input(輸入欄位),才會套用此設定。

例2:
【HTML】
<p class="main">這是一個段落</p>
【CSS】
p[class="main"] {font-weight:bold; font-size:1em}

意思是只有class為"main"的p,才會套用此設定。

2.子嗣selector

例:
【HTML】
<div>
<a href="#content">Skip to content</a>
<h1>Title</h1>
<p>paragraph</p>
</div>
【CSS】
div >a{text-indent:-9999px}

意思是只有div下面第一階層的a,才會套用此設定。

3.相鄰selector

例:
【HTML】
<h2>次標題</h2>
<p>這是段落這是段落</p>
【CSS】
h2+p{ font-size:110; border:1px solid #000}

意思是只有與h2相鄰的p,才會套用此設定。

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s