Css样式详解--选择器

来源:互联网 发布:知君本无邪番外 编辑:程序博客网 时间:2024/05/17 18:13

1.元素选择器是最基本的css选择器:

比如 p、h1、em、a,甚至可以是 html 本身。

2.选择器的分组:

/* 没有分组 */h1 {color:blue;}h2 {color:blue;}h3 {color:blue;}h4 {color:blue;}h5 {color:blue;}h6 {color:blue;}/* 已经分组 */h1, h2, h3, h4, h5, h6 {color:blue;}

3.通配符(*)选择器:该选择器可以与任何元素匹配,就像是一个通配符。

* {color:red;}

4.声明分组:(即平时将选择器,以及多条声明写在一行

5.结合元素选择器:

<h1 class="important">This heading is very important.</h1><p class="important">This paragraph is very important.</p>

p.important {color:red;}h1.important {color:blue;}

选择器现在会匹配 class 属性包含 important 的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性。选择器 p.important 解释为:“其 class 属性值为 important 的所有段落”

6.CSS 多类选择器:

一个 class 值中可能包含一个词列表,各个词之间用空格分隔。例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:

<p class="important warning">多类选择器</p>
p.important{ width:500px; height:300px;}p.warning{ font-size:14px; font-weight:bold;}.important.warning{ background-color:#660033}

[注意]区分大小写

类选择器和 ID 选择器可能是区分大小写的。这取决于文档的语言。HTML 和 XHTML 将类和 ID 值定义为区分大小写,所以类和 ID 值的大小写必须与文档中的相应值匹配。

7.属性选择器: