css中的选择器

1. CSS中的选择器类型:

选择器类型相关说明示例代码
通用选择器用于选择指定元素的相关属性* {font-family:Times;}
HTML标签选择器用于选择指定元素的相关属性div {height:100%;}
类选择器通过class属性的值来选择相关属性。class属性可以同时应用于多个不同类型的元素. myclass{font-weight:bold;}

<p class=”myclass”>1st paragraph</p>

<p class=”myclass”>2nd paragraph</p>
id选择器通过id值来选择相关属性。id属性值在同一个HTML文档中是不允许重复出现的#heading {font-weight:bold;}

<div id=”heading”>First Chapter</div>
组选择器通过一个逗号分隔的串值来选择多个不同类型的元素属性h2, .myclass, #title {font-family:Arial;}
父子元素选择器通过节点之间的父子属性来选择相关属性#heading {color:blue;}
子元素选择器用于单独选择指定元素的子节点元素的相关属性#heading > p {color:blue;}
通用孙元素选择器用于指定选择元素的孙元素的相关属性

p至少为section元素的重孙元素


p至少为section元素的重孙元素是


p至少为table元素的孙元素的同时,也至少为section元素的重孙元素


section * p {color:blue;}

section * * p {color:blue;}

section * * table * p {color:blue;}
相邻兄弟元素选择器用于选择2个相邻元素的相关属性。IE6不支持该属性h1 + h2 {font-style:italic;}
一般兄弟元素选择器用于选择所有共享一个父元素同级元素中的相关属性,但并不要这些元素彼此相邻h1 ~ p {font-style:italic;}

2. 在CSS3中的选择器有:

选择器类型相关说明示例代码
[att]该属性选择器选择匹配att的元素属性span[class=footer] {color:blue;}
[att=val]该选择器选择值为val的属性
[att ~= val]该选择器所选择的属性是一个关键字列表,关键字之间用空格分隔,并且其中只有一项的值为val
[att = fr]该选择器所选择的属性是一个列表,列表各项都已”fr”开头,并且用连字符彼此链接。
[att^=val]该选择器选择前缀为val的属性p[title^=”right”]{color:blue;}
att $= val该选择器选择后缀为val的属性p[title$=”wing”]{color:red;}
[att*=val]该选择器选择其中至少包含了一个val子串的属性p[title*=”left”]{color:gray;}
<p title=”right-wing”>The Right-wing conspiracy.</p>

3. CSS3中新增伪类:

p:first-of-type 选择属于其中父元素的首个<p>元素的每个<p>元素。
p:last-of-type选择属于其父类元素的最后的<p>元素的每个</p>元素。
p:only-of-type选择属于其父类元素的唯一的<p>元素的每个</p>元素。
p:only-child选择属于其父元素的唯一子元素的每个<p>元素。
p:nth-child(2)选择属于其父元素的第二个子元素的每个<p>元素
:enable、:disabled控制表单控件的禁用状态。
:checked单选框或复选框被选中。

CSS可继承的属性有:

font-size, font-family, color, ul, li, dl, dd, dt

CSS不可继承的属性有:

border, padding , margin, width, height

在css中有一个就近优先原则,样式定义最近者为准。

载入样式以最后载入的定位为准

标签

发表评论