CSS3选择器详解一

HTML5中的全局属性

accesskey // 规定访问元素的键盘快捷键

class // 规定元素的类名（用于规定样式表中的类）

contenteditable // 规定是否允许用户编辑内容

contextmenu // 规定元素的上下文菜单

dir // 规定元素中内容的文本方向

draggable // 规定是否允许用户拖动元素

dropzone // 规定当被拖动的项目/数据被拖放到元素中时会发生什么

hidden // 规定该元素是无关的,被隐藏的元素不会显示

id // 规定元素的唯一ID

lang // 规定元素中内容的语言代码

spellcheck // 规定是否必须对元素进行拼写或语法检查

style // 规定元素的行内样式

tabindex // 规定元素的 tab 键控制次序

title // 规定有关元素的额外信息

* // 通用选择器,选择所有标签

<type> // 使用类型选择器(标签选择器),根据标签名选择标签

.class // 类选择器,根据全局属性class的值选择标签

#id // id选择器,根据全局属性id值选择标签

attr // 属性选择器,基于属性选择元素

.....

所谓选择器无非都是有效的过滤器,缩小前面选择器的范围,匹配更少元素.这些选择器相互组合能够产生具体程度更高的匹配。

基本选择器具体使用

1.通用选择器 *

<style type="text/css">

* {

border: thin black solid;

padding: 4px;

}

</style>

2.标签选择器 a

<style type="text/css">

a, span {

border: thin black solid;

padding: 4px;

}

</style>

3.类选择器

方式一:

<style type="text/css">

.markUpClass {

border: thin black solid;

padding: 4px;

}

</style>

方式二:

<style type="text/css">

span.class2 {

border: thin black solid;

padding: 4px;

}

</style>

方式三:

<style type="text/css">

a.class2.class1 {

border: thin black solid;

padding: 4px;

}

</style>

4.ID选择器

<style type="text/css">

#ahref {

border: thin black solid;

padding: 4px;

}

</style>

5.属性选择器

方式一:

<style type="text/css">

[href] {

border: thin black solid;

padding: 4px;

}

</style>

方式二:

<style type="text/css">

[class~="class1"] {

border: thin black solid;

padding: 4px;

}

</style>

方式三:

<style type="text/css">

[lang|="en"] {

border: thin black solid;

padding: 4px;

}

</style>

复合选择器

1.并集选择器(所有选择器并集)

<style type="text/css">

a, [lang|="en"] {

border: thin black solid;

padding: 4px;

}

</style>

2.后代选择器(后面选择器选择选择器是基于前面的选择器)

方式一:

<style type="text/css">

strong span {

border: thin black solid;

padding: 4px;

}

</style>

方式二:

<style type="text/css">

#mytable th {

border: thin black solid;

padding: 4px;

}

</style>

3.子代选择器

<style type="text/css">

body > * >span, tr>th {

border: thin black solid;

padding: 4px;

}

</style>

4.兄弟选择器

方式一:相邻兄弟选择器

<style type="text/css">

p + a {

border: thin black solid;

padding: 4px;

}

</style>

方式二:普通兄弟选择器

<style type="text/css">

p ~ a {

border: thin black solid;

padding: 4px;

}

</style>

5.伪元素选择器

::选择器匹配文本块首行

<style type="text/css">

p::first-line {

background-color: gray;

color: white;

}

</style>

::选择文本块的首字母

<style type="text/css">

p::first-letter {

background-color: gray;

color: white;

border: thin black;

padding: 4px;

}

</style>

:before

:after
// 会生成内容,并将其插入文档

<style type="text/css">

a:before {

content: "Click here";

}

a:after {

content: "!";

}

</style>

案例：

<style type="text/css">

body {

counter-reset: paramCounter;

}

p:before {

content: counter(paramCounter) ". ";

counter-increment: paramCounter;

}

</style>