css學習(一) 樣式表及選擇器

時間 2019-11-10

標籤 css 學習樣式選擇器欄目 CSS 简体版

原文原文鏈接

樣式表

1.link標籤外部樣式表javascript

<link rel="stylesheet" type="text/css" href="sheet1.css">。
media屬性，這裏使用的值爲all,說明這個樣式表要應用於全部表現的媒體。CSS2爲這個屬性定義不少可取值。all:用於全部表現媒體。

2.alternate 候選樣式表css

候選樣式表——將rel設置爲alternate stylesheet，就能夠定義候選樣式表，只有在用戶選擇這個樣式纔會用於文檔表現。

3.style 內部樣式
4.@import
@import命令必須放在style容器中java

<style type="text/css">
    @import url(styles.css);
    h1{color:gray;}
</style>
（1）link屬於XHTML標籤，除了加載CSS外，還能用於定義RSS, 定義rel鏈接屬性等做用；而@import是CSS提供的，只能用於加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載.因此有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（**無樣式內容閃爍問題**），網速慢的時候還挺明顯。
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，存在兼容性問題。而link是XHTML標籤，無兼容問題;
 (4) 使用dom控制樣式時的差異。當使用javascript控制dom去改變樣式的時候，只能使用link標籤，由於@import不是dom能夠控制的。

用戶!important>開發者!important>開發者>用戶>瀏覽器默認css3

選擇器

基礎選擇器

1.元素選擇器
2.類選擇器瀏覽器

p.warning  匹配class爲warning的全部p元素

3.id選擇器dom

#mostImportant{color:red;}
<h1 id="mostImportant"></h1>
<ul id="mostImportant"></ul>
<em id="mostImportant"></em>
這個選擇器的規則會和各個元素匹配（這些元素不能在同一個文檔中出現）

4.通配符選擇器 *url

屬性選擇器

[attribute] 選取包含某屬性的元素。code

a[href] 選取包含href屬性的a標籤。ip
[attribute=value] 選擇某個屬性attribute而且屬性值爲value的元素。這種格式要求必須與屬性值徹底匹配，若是遇到的值自己包含一個用空格分隔的值的列表，匹配就會出問題。開發
```
.info[ref='good']
```
[attribute~=value] 該選擇器定位具備屬性 attr 且屬性值爲完整 "val" 的任何元素 A：
```
div[title~="english"] {color:#f88;} 
  /* title="english" 以及 title="chinese english" */
```
[attribute|=value] 定位具備屬性 attr 且屬性值爲 val，或以 "val-" 開頭的任何元素 A：
```
p[class|="a"] {color:#333;} 
  /* class="a" 以及 class="a-b"） */
```

下面是css3提供的選擇器：

A[attr^="val"]：定位具備屬性 attr 且屬性值以 "val" 開頭的任何元素 A：

div[class^="a"] {color:#666;} 
  /* class="a"、class="abc" 以及 class="abc zzz" */
  /* 但 class="zzz abc" 不是 */

A[attr$=val]：該選擇器與 A[attr^=val] 正好相反，定位具備屬性 attr 且屬性值以 "val" 結尾的任何元素 A：
```
div[class$="a"] {color:#f00;}
  /* class="nba"、class="cba" 以及 class="cn cba" */
  /* 但 class="cba cn" 不是 */
```
A[attr*="val"]：定位具備屬性 attr 且屬性值任意位置包含 "val" 字符串的元素 A，val 能夠是一個完整的單詞，也能夠是一個單詞中的一部分：
```
a[title*="link"] {text-decoration:underline;} 
  /* title="aaalinkzzz" */
```

僞類選擇器

1.錨僞類

a:link {color: red}    /* 未訪問的連接 */
a:visited {color: green}    /* 已訪問的連接 */
a:hover {color: blue}    /* 鼠標移動到連接上 */
a:active {color: yellow}    /* 選定的連接，鼠標左擊不放 */

最可靠的記憶順序就是遵循愛恨原則：l(link)ov(visited)e h(hover)a(active)te, 即用喜歡(love)和討厭(hate)兩個詞來歸納。

note:

在 CSS 定義中，:hover 必須被置於 :link 和 :visited 以後，纔是有效的。
在 CSS 定義中，:active 必須被置於 :hover 以後，纔是有效的。
:link 和 :visited 稱爲連接僞類，只能應用於錨元素；
:hover、:active 和 :focus 稱爲動態僞類，理論上能夠用於任何元素。

2.與input有關

:focus 向擁有鍵盤輸入焦點的元素添加樣式。

下面是css3提供的選擇器：

:enabled 可用的輸入元素。
:disabled 不可用的輸入元素。
:checked 匹配被選中的元素。 (只有Opera支持)

3.結構僞類

<ul>
    <li>列表項一</li>
    <li>列表項二</li>
    <li>列表項三</li>
    <li>列表項四</li>
</ul>

E:first-child 是用來選擇父元素的第一個子元素E，可是它必須爲父元素的第一個子元素，否則會失效
若是咱們要設置第一個li的樣式，那麼代碼應該寫成li:first-child{sRules}，而不是ul:first-child{sRules}。其它相關的僞類都如此。

下面是css3提供的選擇器：

E:last-child 匹配父元素的最後一個子元素，E必須是父元素的最後一個子元素
E:only-child 匹配父元素僅有的一個子元素E
E:first-of-type 匹配同類型中的第一個同級兄弟元素E
E:last-of-type 匹配同類型中的最後一個同級兄弟元素E
E:only-of-type 匹配同類型中的惟一的一個同級兄弟元素E

first-child 匹配的是某父元素的第一個子元素，能夠說是結構上的第一個子元素。
    :first-of-type 匹配的是某父元素下相同類型子元素中的第一個，好比 p:first-of-type，就是指全部類型爲p的子元素中的第一個。這裏再也不限制是第一個子元素了，只要是該類型元素的第一個就好了。

E:nth-child(n) 匹配父元素的第n個子元素E，假設該子元素不是E，則選擇符無效

E:nth-last-child(n) 匹配父元素的倒數第n個子元素E，假設該子元素不是E，則選擇符無效

E:nth-child(n) 和 E:nth-last-child(n)
   該選擇符容許使用一個乘法因子(n)來做爲換算方式，以下:
   (1) 選擇第幾個標籤，「2能夠是你想要的數字，最小從1開始」
       li:nth-child(2) { background:#fff}
   (2) 選擇大於等於4標籤，「n」表示從整數
       li:nth-child(n+4) { background:#fff}
   (3) 選擇小於等於4標籤
       li:nth-child(-n+4) { background:#fff}
   (4)選擇偶數標籤，2n也能夠是even
      li:nth-child(2n) { background:#fff}
      li:nth-child(even) { background:#fff}
   (5)選擇奇數標籤，2n-1也能夠是odd
      li:nth-child(2n-1) { background:#fff}
      li:nth-child(odd) { background:#fff}

E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E
E:nth-last-of-type(n) 匹配同類型中的倒數第n個同級兄弟元素E
E:empty 匹配沒有任何子元素（包括text節點）的元素E

4.否認類
E:not(s)用於匹配不含有s選擇符的元素E，提及來很差理解，那麼說一個最經常使用的開發場景，假如咱們要對ul元素下的全部li都加上一個下邊框用於內容分割，可是最後一個不須要，以下：

ul li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

僞元素選擇器

1.E:first-letter 選擇文本塊的第一個字母
2.E:first-line 選擇元素的第一行
3.E:before 在元素前面插入內容，配合"content"使用
4.E:after 在元素後面插入內容，配合"content"使用

以上四個僞元素選擇器在CSS2.1都已經被支持，但在CSS3中將僞元素選擇符前面的單個冒號(:)修改成雙冒號(::)，如E::first-letter、E::first-line、E::before、E::after，不過以前的單冒號寫法也是有效的。

5.E::selection
E::selection用於設置文本被選擇時的樣式，被定義的樣式屬性有3個，並且使用時須要對火狐瀏覽器單獨設置。

p::-moz-selection{
    background:#000;
    color:#f00;
    text-shadow:1px 1px rgba(0,0,0,.3);
}
p::selection{
    background:#000;
    color:#f00;
    text-shadow:1px 1px rgba(0,0,0,.3);
}

關係選擇器

後代選擇器E F
後代選擇器是最常使用的選擇器之一，它也被稱做包含選擇器，用於匹配全部被E元素包含的F元素，這裏F元素不論是E元素的子元素或者是孫元素或者是更深層次的關係，都將被選中。
子元素選擇器E > F
子元素選擇器只能選擇某元素的子元素，這裏的F元素僅僅是E元素的子元素才能夠被選中
相鄰兄弟元素選擇器E + F
相鄰兄弟選擇器能夠選擇緊接在另外一元素後的元素，可是他們必須有一個相同的父元素。好比E元素和F元素具備一個相同的父元素，並且F元素在E元素後面，這樣咱們就可使用相鄰兄弟元素選擇器來選擇F元素。
通用兄弟選擇器E ~ F通用兄弟元素選擇器是CSS3新增長一種選擇器，用於選擇某元素後面的全部兄弟元素。它和相鄰兄弟元素選擇器用法類似，但不一樣於前者只是選擇相鄰的後一個元素，而通用兄弟元素選擇器是選擇全部元素。