选择器

选择器

     简单选择器

     伪元素选择器

     组合选择器

 

标签选择器

     p{color:blue;}

 

类选择器

     .special{color:blue;}

多个组合

.className

- .

- 字母，数字，-，_

- className必须以字母开头

- 区分大小写

- 出现多次

 

id选择器

     #ban {color:blue;}

#id

- #

- 字母，数字，-，_

-id必须以字母开头

-区分大小写

-只出现一次

 

通配符选择器

*{color}

所有的元素

 

属性选择器

<input disabled type=“text” value=“张三”>

[disabled]{background-color:#eee;}

 

属性选择器 - [att=val]

[type=button]{color:blue;}

id选择器,类选择器就是属性选择器的特例#nav{} = [id=nav]{}

 

属性选择器 - [att ~= val]

<h2 class=“title sports”>title</h2>

<p class=“sports”>content</p>

[class~=sports]{color:blue}

类似于模糊匹配 空格之间使用模糊匹配

 

属性选择器 - [att |= val]

<p lang=“en”>hello</p>

<p lang=“en-us”>greeting!</p>

[lang |= en] { }

全文的模糊匹配

 

属性选择器 - [att ^= val]

[href ^= “#”] { }

以什么开头的

 

属性选择器 - [att $= val]

以什么结尾的

 

属性选择器 - [att *= val]

包含什么值

 

伪类选择器

a:link {}

a:visited {}

a:hover {}

a:active {}

 

enabled

disabled

checked

 

伪类选择器

li:first-child{}

li:last-child{}

li:nth-child(type){}  type : even、odd、3n+1

li:nth-last-child(type){}

 

:only-child{}

 

:first-of-type{}  //第一个这种类型的元素

:last-of-type{}  //

:nth-of-type(type){}

:nth-last-of-type(type){}

 

:only-of-type{}

 

:empty   选择没有子元素的标签

:root    跟标签

:not() 不包含

:target 锚点

:lang() language的值

 

简单选择器

tag{}

.className{}

#id{}

*{}

[att]{}

:link{}

组合选择器

将简单选择器进行组合

img[src$=jpg]{}

 

 

其他选择器

伪元素选择器

::first-letter{}

内容的第一个字符变大

 

::first-line{}

 

::before{

     content:’before’;

}

 

::after{

     content:’after’;

}

 

 

::selection{

     color:red;

     background-color:#ccc;

}

 

组合选择器

后代选择器子代选择权

.main h2{}

.main>h2{}

兄弟选择器

h2+p{}

选中了h2和p

通用兄弟选择器

h2~p{}

h2和之后的p

选择器分组

h1,h2,h3{}

 

继承

body{

     font-family:””;

}

继承属性

- color

- font

- text-align

- list-style

- ...

自动继承

 

非继承属性

- background

- border

- position

- ...

 

在文档中如何查看该属性是否是可以继承

在文档中有一个inherited属性，看是否是yes还是no

 

CSS优先级

计算方法

- a = 行内样式 （1000）

- b = ID选择器的数量 （100）

- c = 类、伪类和属性选择器的数量 （10）

- d = 标签选择器和伪元素选择器的数量 （1）

 

 

选择器	a	b	c	d	value
h1	0	0	0	1	1
p > em	0	0	0	2	2
style:”"	1	0	0	0	1000
.comment p	0	0	1	1	11
div#content	0	1	0	1	101
a:link	0	0	1	1	11

 

 

CSS层叠

相同的属性会覆盖

- 优先级

- 后面覆盖前面

不同的属性会合并

 

CSS改变优先级

- 改变先后顺序

- 提升选择器优先级

- !important

     color: blue !important;

 

个人认为:提升选择器优先级是最好的改变优先级的方法

 

选择器兼容性说明：

本节中所讲的选择器，主流的浏览器基本都支持，IE低版本有较多的兼容问题，具体可查看该页面。http://www.quirksmode.org/css/selectors/