html5+css3学习（二）之CSS选择器

html5+css3学习（二）之CSS选择器

样式

内联样式：将样式直接编写到标签中的style属性中，只对当前元素起作用，不方便复用
内部样式：只对当前样式表起作用
在head标签中定义style

<style type="text/css">
  选择器
  {
      样式
  }
</style>

外联样式：根据选择器来给元素来设置样式，可以复用

<link rel="stylesheet" type="text/css" href="css路径"/>

块元素和内联元素

块元素独占一行，如div、p、h1、h2、h3
div没有语义，用来分区
内联元素（行内元素），只占自身大小的元素，不会占用一行，如a img iframe span
span没有语义，用来选中文字，并为其设置样式
我们通常用块元素包含内联元素，a元素可以包含任意元素，p元素不可以包含任何其他块元素

选择器

1、元素选择器：选中页面中的所有指定元素（标签）
语法：

标签名{
}

2、id选择器：通过元素的id属性值选中唯一的元素
语法：

#id属性值{
}

3、类选择器：通过元素的class属性选中的一组元素
一个元素可以设置多个class值，多个值之间使用空格隔开
语法：

.class属性值{
}

4、选择器分组（并集选择器）：通过选择器分组同时选中多个选择器对应的元素

选择器1,选择器2,选择器3,选择器4{
}

5、通配选择器：选择页面中的所有元素

*{
}

6、复合选择器（交集选择器）：选中同时满足多个选择器的元素

选择器1选择器2选择器N{
}

7、后代元素选择器：选中指定元素的后代元素

祖先元素 后代元素{
}

8、子元素选择器：选中父元素的指定子元素
IE6及以下不兼容

父元素 > 子元素{
}

9、伪类选择器：专门用来表示元素的特殊状态
比如：访问过的连接。获取焦点的文本框
如：
其他元素可以设置hover和active.IE6不支持对超链接以外的元素设置hover和active

正常链接 a:link
访问过的链接(只能设置颜色) a:visited
鼠标移入的状态 a:hover
正在点击的链接 a:active

其他：前面有-表示作用域 没有则作用于所有域

获取焦点  -:focus
鼠标移入  -:hover
点击  -:active
选中的元素（为选中的元素设置样式）  -::selection
在火狐中选中元素  -::-moz-selection
<!--子元素伪类原则器-->
第一个子元素  :first-child
选择最后一个子元素  :last-child
选择指定位置的子元素，n表示选择的元素的位置 其中even表示偶数位置的子元素 odd 表示奇数位置的子元素  :nth-child(n)
选择指定类型的子元素 与上面的很相似，child是在所有子元素中排列，而type在当前类型的元素中排列:
-:first-of-type
-:last-of-type
-:nth-of-type

表示它既是P元素又是父元素的第一个子元素
p:first-child{
}
选中p标签中的第一个p标签
p:first-of-type{
}

10、伪元素选择器：使用伪元素来表示元素中的一些特殊位置
:before表示元素的最前边的部分，一般before都需要结合content这个样式一起使用，content内容无法被选中

p:before{
     content="我会出现在段落前面"；
}

选中元素中的第一个字母  -:first-letter
选中元素中的第一行  -:first-line
指定元素前 -:before
指定元素后  -:after

11、属性选择器：可以根据元素的属性和属性值来选择指定的元素

元素[属性名]{
}
元素[属性名="属性值"]{
}
<!--选择属性值以字符串a开头的元素-->
元素[属性名^="a"]{
}
<!--选择属性值以字符串a结尾的元素-->
元素[属性名$="a"]{
}
<!--选择属性值包含指定元素的内容-->
元素[属性名*="a"]{
}

title属性可以给任何标签指定移入到这个元素上时显示的文字
12、兄弟元素选择器
选中一个元素后紧挨着的指定的兄弟元素

语法：前一个 + 后一个{
}

选中一个元素后面的所有的兄弟元素

语法： 前一个 ~ 后边所有{
}

13、否定伪类选择器：从已选中元素中剔除某些元素

:not(剔除的元素){
}

样式继承

在CSS中，祖先元素的样式会被后代元素所继承，利用继承，可以将一些基本样式设置给祖先元素，后代可以自动继承，但是背景，定位，边框相关相关的样式都不会被继承

选择器优先级

优先级规则：
内联样式（1000）>id选择器（100）>类和伪类（10）>元素选择器（1）>通配选择器（0）>继承样式（没有优先级）
当有多中选择器（交集选择器）时需要将优先级相加，但不会超过上一个优先级
选择器优先级一样选择靠后的样式
慎重：可以在样式的最后添加! important，此时该样式会获得最高的优先级，并超过内联样式

伪类的顺序

例如以a的伪类为例，当链接处于正在点击时，它同时也处于移入状态下，如果将a:hover写到a:active状态后面，那么它会将active覆盖，导致active失去作用，同时link和visited也不能hover和active后面否则也会被覆盖
正确顺序：

:link
:visited
:hover
:active