HTML5+CSS——07元素关系、后代、子元素、伪类、属性选择器

一.元素之间关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

元素关系

二. （补充）选择器

1.后代元素选择器

作用：选中指定的后代元素

语法：祖先元素 后代元素{ }

例如，

div span{  color : #00800;}

若加了id选择器，则

#d1 span{ color:#00800;}

2.子元素选择器

作用：选中指定父元素的指定子元素

语法：父元素 > 子元素

一般子元素选择器少用，常用后代元素选择器

3.伪类选择器

作用：伪类专门用来表示元素的一种特殊的状态

比如，访问过的超链接，普通的超链接，获取焦点的文本框

当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类

正常在未设置情况下，链接的状态呈现两种状态1.访问过 2.未访问过

正常情况下链接的两种状态

四个伪类选择器——链接交互的4中状态

1）正常链接

作用：表示普通链接（没访问过的链接）

语法：     a：link

a:link 正常链接

2）访问过的链接

浏览器是通过历史记录来判断一个链接是否访问过，由于涉及到用户的隐私问题，所以使用visited伪只能设置字体的颜色

语法：  a：visited（只能定义字体颜色）

3）鼠标滑过的链接

作用：hover表示鼠标移入的状态

语法：    a：hover

hover鼠标移入状态

4）正常点击的链接

语法：    a：active

active鼠标点击状态

除此之外，hover和active也可以为其他元素设置。但是IE6中，不支持对超链接以外的元素设置：hover和active

例如，

p：hover{ background-color:yellow} 

p：active{ backgroud-color:orange}

其他元素设置

4.其他伪类选择器

1）获取焦点

语法：   - ：focus

2）指定元素前

作用： 元素表示元素最前面的部分，一般before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容

语法：  -  ：before

3）指定元素后

作用：after表示元素的最后边的部分

语法：   - ：after

after使用

4）选中的元素

语法：    -：：selection

例如，创建一个文本框，点击后框变成蓝色（使用获取焦点）

获取焦点 ：focus

例如，为P标签中选中的内容使用样式，可以使用 ：selection

注意，

p：：selection { background-color:orange; }兼容大部分浏览器

p：：-moz-selection { background-color:orange }兼容火狐浏览器

伪类-选中元素选择器中的浏览器兼容问题：需要加-moz

三.伪元素

给段落定义样式

1）首字母

语法：  -：first-letter

2）首行

语法：  -：first-line

例如，为P中的第一个字符设置一个特殊的样式

伪元素使用

四.属性选择器

title属性：这个属性可以给任何标签指定。当鼠标移入到元素上时，元素中的title属性的值将会作为提示文字显示。

title属性

1.属性选择器

作用：可以根据元素中的属性或属性值来选取指定元素

语法：     

[属性名] 选取含有指定属性的元素

[属性名=”属性值“]选取含有指定属性值的元素

[属性值^="属性值"]选取属性值以指定内容开头的元素

[属性值$="属性值"]选取属性值以指定内容结尾的元素

[属性值*="属性值"]选取属性值以包含指定内容的元素

元素选择器[属性名]

若增加条件，则

p[title="hello"]{background-color:yellow}

属性选择器：[属性名]=”属性值“

若，

指定内容开头的元素，则

指定内容开头

指定内容结尾的元素，则

指定内容结尾