CSS Selector Selector selector property value h 1

Selector ß selector {property: value; …} Þ ß h 1 {color: #cc 3333; }

元素選取器(type selector) h 1 {text-align: center; } p {color: green; font-size: 36 px; }

類別選取器(class selector). classname {…} … <element class="classname" … > <style type="text/css">. setcolor {color: red;

識別碼選取器(id selector) #idname {…} … <element id="idname" … > <style type="text/css"> #header {color: blue;

關聯選取器(Contextual Selector) 後代 (Descendant) 子代 (Child) E F 相鄰 (Adjacent) E + F Any

後代選取器(Descendant Selector) <style type="text/css"> ex 12 -4. html li {color: green; } li em

子代選取器(Child Selector) <style type="text/css"> li {color: green; } li > em {color: red; }

相鄰選取器 (Adjacent Sibling Selector) <style type="text/css"> h 1 {color: blue; } h 1 +

屬性選取器(Attribute Selector) E[att] 任何E元素，其att屬性有設定者 Any E element that has an attribute, regardless of its

<style type="text/css"> img[title] {border: 4 px solid green; } img[title="first image"] {border: 10 px

a之虛擬類別 ex 12 -10. html <style type="text/css"> a: link {color: red; text-decoration: underline; }

虛擬元素選取器( pseudoelement selector) : first-line : first-letter : before : after

<STYLE type="text/css"> p. pfirst: first-letter { font-size: 200%; font-style: italic; font-weight: bold} p. pquote:

Universal Selector * {color: purple; } DIV. danger * {color: red; } body *

Selector type Universal Type Class ID Descendant Child Adjacent Attribute * E. info #footer

Slides: 17

Download presentation

CSS選取器 (Selector)

Selector ß selector {property: value; …} Þ ß h 1 {color: #cc 3333; } 選取器種類 Þ Þ Þ Þ 元素選取器(type/element selector) 類別選取器(class selector) 識別碼選取器(id selector) 關聯選取器(contextual selector) 屬性選取器( attribute selector) 虛擬類別選取器( pseudoclass selector) 虛擬元素選取器( pseudoelement selector)

元素選取器(type selector) h 1 {text-align: center; } p {color: green; font-size: 36 px; } div {border: 2 px solid blue; } ※ h 2, h 3 {font-size: 2. 5 em} ※ h 1, p, div {border-bottom: dashed 5 px green} <style type="text/css"> body {background-color: lime; } h 1 {color: red; } h 2 {color: blue; } p {color: green; font-size: 36 px; } </style> … <h 1>元素選取器</h 1> <h 2>元素選取器</h 2> <p>元素選取器</p> ex 12 -1. html

類別選取器(class selector). classname {…} … <element class="classname" … > <style type="text/css">. setcolor {color: red; } h 1. setcolor {color: blue; } p. setcolor {color: green; } </style> … <h 1 class="setcolor">XHTML</h 1> <p class="setcolor">CSS</p> <h 2 class="setcolor">Java. Script</h 2> <ol class="setcolor"> <li>SMIL</li> <li>RSS</li> </ol> <p>XML</p> <p>PHP</p> ex 12 -7. html

識別碼選取器(id selector) #idname {…} … <element id="idname" … > <style type="text/css"> #header {color: blue; } #content {color: green; } #footer {color: red; } #sidebar {color: olive; } </style> … <h 1 id="header">XHTML</h 1> <p id="content">CSS</p> <p id="sidebar">XML</p> <h 1 id="footer">Java. Script</h 1> ex 12 -8. html

關聯選取器(Contextual Selector) 後代 (Descendant) 子代 (Child) E F 相鄰 (Adjacent) E + F Any F element that is a descendant of an E element. E > F Any F element that is a child of an E element. Any F element immediately preceded by a sibling element E. ul em h 2 > em h 1 + p ul a > em <h 1></h 1> li a li > a h 1 + h 2 <p>Paragraph 1</p> li a em h 2 > em h 3 + p <ul> <li>XHTML</li> <li><em>Java. Script</em></li> <li><a href="http: //www. w 3. org/Style/CSS/"><em>CSS</em></a></li> </ul> <h 1><em>XML</em></h 1> <h 2><em>PHP</em></h 2> <h 3><em>ASP. NET</em></h 3> <p>Paragraph 2</p>

後代選取器(Descendant Selector) <style type="text/css"> ex 12 -4. html li {color: green; } li em {color: red; } li a em {color: silver; } em {color: blue; } h 1 em, h 2 em {color: olive; } </style> … <ul> <li>XHTML</li> <li><em>Java. Script</em></li> <li><a href="http: //w 3. org/Style/CSS/"><em>CSS</em></a></li> </ul> <h 1><em>XML</em></h 1> <h 2><em>PHP</em></h 2> <h 3><em>ASP. NET</em></h 3>

子代選取器(Child Selector) <style type="text/css"> li {color: green; } li > em {color: red; } em {color: blue; } </style> </head> <body> 網頁技術 <ul> <li>XHTML</li> <li><em>Java. Script</em></li> <li><strong><em>CSS</em></strong></li> </ul> ex 12 -5. html

相鄰選取器 (Adjacent Sibling Selector) <style type="text/css"> h 1 {color: blue; } h 1 + p {color: red; } h 2 + p {color: silver; } p {color: green; } </style> … <h 1>網頁技術</h 1> <p>XHTML</p> <p>CSS</p> <h 2>Java. Script</h 2> <p>XML</p> <p>PHP</p> ex 12 -6. html

屬性選取器(Attribute Selector) E[att] 任何E元素，其att屬性有設定者 Any E element that has an attribute, regardless of its value. E[att="val"] 任何E元素，其att屬性值等於val者 Any E element whose attribute value is exactly equal to val. 任何E元素，其att屬性中含有val者 E[att~="val"] Any E element whose attribute value is a list of spaceseparated values, one of which is exactly equal to val. 任何E元素，其att屬性等於val或以"val-"開頭者 Any E element whose att value is either exactly val or E[att|="val"] beginning with "val" immediately followed by "-" ex. link[hreflang|="en"] "en", "en-US", "en-cockney"

a之虛擬類別 ex 12 -10. html <style type="text/css"> a: link {color: red; text-decoration: underline; } a: visited {color: blue; text-decoration: blink; } a: hover {color: green; text-decoration: overline; } a: active {color: oliver; text-decoration: line-through; } </style> … 連結到其他網站 : <ul> <li><a href="http: //www. kingsinfo. com. tw">文魁資訊</a></li> <li><a href="http: //tw. yahoo. com">Yahoo!奇摩</a></li> <li><a href="http: //www. microsoft. com. tw">台灣微軟</a></li> </ul>

虛擬元素選取器( pseudoelement selector) : first-line : first-letter : before : after

<STYLE type="text/css"> p. pfirst: first-letter { font-size: 200%; font-style: italic; font-weight: bold} p. pquote: before, p. pquote: after {content: """; font-weight: bold} span {text-transform: uppercase} p. pquote span {text-transform: lowercase} </STYLE> <P class="pfirst">T<span>he</span> few words of an article in The Economist. Other words of an article in The Economist. The other words of an article in The Economist. </P> <P class="pquote">T<span>he</span> few words of an article in The Economist. Other words of an article in The Economist. The other words of an article in The Economist. </P> pelement. html

Universal Selector * {color: purple; } DIV. danger * {color: red; } body * UL {color: gray; } body * * UL {border-right: thin solid green; }

Selector type Universal Type Class ID Descendant Child Adjacent Attribute * E. info #footer EF E>F E+F E[att] E[att=val] E[att~=val] Attribute E[att|=val] pseudo-class E: first-child E: link E: visited E: active E: hover E: focus E: lang(c) E: first-line E: first-letter E: before E: after dynamic pseudo -class pseudo-element Pattern Description Matches any element. Matches any E element. Matches any element whose class attribute contains the value info. Matches any element with an id equal to footer. Matches any F element that is a descendant of an E element. Matches any F element that is a child of an E element. Matches any F element immediately preceded by a sibling element E. Matches any E element that has an attribute, regardless of its value. Matches any E element whose attribute value is exactly equal to val. Matches any E element whose attribute value is a list of space-separated values, one of which is exactly equal to val. Matches any E element whose attribute has a hyphen-separated list of values beginning with val. Matches element E when E is the first child of its parent. Matches not yet visited (: link) or already visited (: visited) links. Matches E during certain user actions. Matches elements of type E that are in language c. Matches the contents of the first formatted line of element E. Matches the first letter of element E. Used to insert generated content before or after an element’s content.