CSS 選擇器及連結器

練習 https://jsfiddle.net/

引用CSS檔案

<link rel="stylesheet" href="styles.css" />

一個選擇器套用CSS

p {
  color: green;
}

一次選擇多個選擇器

p, li {
  color: green;
}

移除< ul >前的清單符號

li {
  list-style-type: none;
}

變更指定Class的元素

<style>
.special {
  color: orange;
  font-weight: bold;
}
</style>
<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>

指定特殊元素下的CLASS樣式

• 只有li下Class才會套用, 但div下Class不會套用

<style>
li.special {
  color: orange;
  font-weight: bold;
}
</style>
<ul>
  <li>Item one</li>
  <li class="special">Item two</li>
  <li>Item <em>three</em></li>
</ul>
<div class="special">
aaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

• 如果也希望div下Class套用

<style>
li.special, div.special {
  color: orange;
  font-weight: bold;
}
</style>

指定元素下的特定元素套用CSS (li下不論幾層的em都套用)

li em {
  color: rebeccapurple;
}

指定元素下一層的元素(子元素)套用CSS (只有li下一層的em才套用, 隔一層就不符合, 如 li 下有 div, 才有em, 就不符合)

li > em {
  color: rebeccapurple;
}

依元素位置套用CSS

• h1+p : 只有接在h1後的p才會套用

<style>
h1 + p {
  font-size: 200%;
}
</style>
<h1>I am a level one heading</h1>
<p>This is a paragraph of text. In the text is a <span>span element</span>
and also a <a href="http://example.com">link</a>.</p>
<p>This is the second paragraph. It contains an <em>emphasized</em> element.</p>

依狀態指定樣式

<style>
/*未訪問連結*/
a:link {
  color: pink;
}
/*已訪問連結*/
a:visited {
  color: green;
}
/*滑鼠移到連結上的樣式*/
a:hover {
  text-decoration: none;
}
</style>

複雜的組合

/* selects any <span> that is inside a <p>, which is inside an <article>  */
article p span {
  ...;
}
/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
h1 + ul + p {
  ...;
}
body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}