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新增长一种选择器，用于选择某元素后面的全部兄弟元素。它和相邻兄弟元素选择器用法类似，但不一样于前者只是选择相邻的后一个元素，而通用兄弟元素选择器是选择全部元素。