css学习(一) 样式表及选择器

样式表

1.link标签 外部样式表

<link rel="stylesheet" type="text/css" href="sheet1.css">。
media属性，这里使用的值为all,说明这个样式表要应用于所有表现的媒体。CSS2为这个属性定义很多可取值。all:用于所有表现媒体。

2.alternate 候选样式表

候选样式表——将rel设置为alternate stylesheet，就可以定义候选样式表，只有在用户选择这个样式才会用于文档表现。

3.style 内部样式
4.@import
@import命令必须放在style容器中

<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>开发者>用户>浏览器默认

---

选择器

基础选择器

1.元素选择器
2.类选择器

 p.warning  匹配class为warning的所有p元素

3.id选择器

#mostImportant{color:red;}
<h1 id="mostImportant"></h1>
<ul id="mostImportant"></ul>
<em id="mostImportant"></em>
这个选择器的规则会和各个元素匹配（这些元素不能在同一个文档中出现）

4.通配符选择器 *

属性选择器

• [attribute] 选取包含某属性的元素。

  a[href] 选取包含href属性的a标签。

• [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新增加一种选择器，用于选择某元素后面的所有兄弟元素。它和相邻兄弟元素选择器用法相似，但不同于前者只是选择相邻的后一个元素，而通用兄弟元素选择器是选择所有元素。