HTML5学习-Day4

前面三天的学习后，发现HTML部分倒是很好好理解和学习，大部分内容都和Word文档很像，主要是Css样式部分，由于样式的多样性，要记的也很多，所以今天花了很多时间主要用于深入了解Css的选择器，内容由网上收集整理而来

基本选择器

1. 通配符选择器 ( * )

通配所有元素，也可以选择某元素下的所有元素

*{
    //样式内容
 }
 //也可以
 .class * {
    //样式内容
}

2. 元素选择器 ( E )

直接使用元素名，这是css中最常用的而且最基本的选择器

p{
    //P元素的样式内容
 }

3. 类选择器 ( .class )

使用前需在元素内定义类名  class="xx"  若是多类名，则使用空格区分开  clas="xx yy"

.xx{
    //样式内容
 }
//多类选择器
.xx .yy{
    //样式内容
}

注意：多类选择器不被IE6所支持

4. ID选择器 ( #id )

使用前需对元素定义id名称  id="xx"  id是一个页面中唯一的值

#xx{
    //样式内容
 }

注意：在考虑选择id还是class时可以这样考虑： 具有唯一性的使用id选择器，公用及可重用时使用class

5. 后代选择器 ( E F )

E代表父元素 F代表子元素/孙元素 即E元素的所有后代(子，孙，或者更深)

.xx P{ //class="xx"的元素的 后代所有P元素，不仅仅是子元素p
    //样式内容
 }

6. 子元素选择器 ( E>F )

大致同后代选择器，不同的是F仅仅为子元素，没有更深

.xx>P{ //class="xx"的元素的 所有子元素P
    //样式内容
 }

注意：IE6不支持子元素选择器

7. 相邻兄弟元素选择器 ( E+F )

首先E,F必须有相同的父元素，其次满足F前面有E  满足以上条件则选择这个F

.xx+P{ //class="xx"的元素和P元素拥有同一父元素，且P元素前面有class="xx"的元素时 选择P元素
    //样式内容
 }

注意：IE6不支持子元素选择器

8. 通用兄弟元素选择器 ( E~F )

与相邻兄弟元素选择器相似，只不过选中的是相邻的所有F元素，可以这样理解，E和F拥有相同的父元素，当F前面有E时 选中与E后面所有相邻的F

a~P{ //a元素和P元素拥有同一父元素，且P元素前面有a元素时 选择a元素后面所有相邻的p元素
    //样式内容
 }

注意：IE6不支持子元素选择器

9.群组选择器

将具有相同样式的元素分组在一起，每个选择器之间用逗号分隔开

a,p{ //a元素和P元素样式相同
    //样式内容
 }

属性选择器

1. E[attr]

最简单的一种，某选择器内部的某个属性的元素，不论属性值

a[href]{ //所有拥有href属性的a元素
    //样式内容
 }

注意：IE6不支持子元素选择器

2. E[attr=”value”]

同上，但属性规定了具体的属性值

a[href="www.baidu.com"]{ //所有拥有href="www.baidu.com"属性的a元素
    //样式内容
 }

注意：IE6不支持子元素选择器

3. E[attr~=”value”]

指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“~”不能不写  value必须与词列表中的某一个词相匹配

// 假设 我有三个a元素 title分别为 title="xx aa bb" , title="yy xx"，title="aa bb"
a[title~="xx"]{ //选中词列表中 匹配的xx的a元素则是代表选中了前两个a元素
    //样式内容
 }

注意：IE6不支持子元素选择器

4. E[attr^=”value”]

选择attr属性以value开头的所有元素

a[href^="www."]{ //所有href属性值以"www."开头的a元素
    //样式内容
 }

注意：IE6不支持子元素选择器

5. E[attr$=”value”]

同上相反，选择attr属性以value结尾的所有元素

.xx[href$=".png"]{ //所有href属性值以".png"结尾的类名为class="xx"元素
    //样式内容
 }

注意：IE6不支持子元素选择器

6. E[attr*=”value”]

选择attr属性中包含value的所有元素

.xx[href$*="hi"]{ //所有href属性值包含"hi"的且类名为class="xx"元素
    //样式内容
 }

注意：IE6不支持子元素选择器

7. E[attr|=”value”]

选择attr属性等于value或者以 value- 开头的所有元素

.xx[lang$|="zh"]{ //所有lang属性值等于"zh"或者以"zh-"开头的且类名为class="xx"元素
    //样式内容
 }

注意：IE6不支持子元素选择器

伪类选择器

1. 动态伪类

这些伪类并不存在与HTML中，而只有当用户和网站交互的时候才能体现出来

动态伪类分为两种

• 锚点伪类 其先后顺序遵守爱恨原则 LoVe/HAte

  ：link 没有访问时内容

  ：visited 被访问过后的内容

  ：hover 悬浮在上时的内容

  ：active 激活链接那一下的内容

• 用户行为伪类

  :hover

  :active

  :focus 成为焦点 常用语表单元素

注意：

hover在IE6下只有a元素支持

active只有IE6-7不支持

focus在IE6-7下不支持

2. UI元素伪类

:enabled  元素可用状态下
:disabled 元素不可用状态下
:checked  元素被选中状态下
:unchecked元素未被选中状态下

以上只是列举部分

3. nth选择器

:first-child 选择某元素的第一个元素
:last-child  选择某元素的最后一个元素
:nth-child(n)选择某元素的一个或多个特定的元素  其中n是固定参数，从0开始  n可做基本的操作，例如 n+1/2*n 等等
:nth-last-child(n) 选择某元素的一个或多个特定元素，从最后开始计算
:nth-of-type(x)选定指定的元素   x为自己输入的数字
:nth-last-of_type(x) 选定指定的元素，从后面开始计算
:first-of-type 选择一个上级元素下的第一个同类子元素
:last-of-type 选择一个上级元素下的最后一个同类子元素
:only-child 选择的元素是它的上级元素的唯一一个子元素
:only-of-type 选择一个元素，是它上级元素的唯一一个相同类型的子元素
:empty 选择的元素里面没有任何内容

4. 否定选择器（：not）

额，直接上栗子

input:not([type="submit"]){
    border:1px solid red;
}

上面这个栗子就很好的解释了否定选择器的作用，所有input都加边框，除了submit外

今天就到这里.头好大