一、CSS派生选择器
作用:通过根据元素在上下文之间的关系来定义样式,可以是标记更加简洁。
派生选择器的英文名称是contextual selectors(直译是上下文选择器)。
在CSS1中依据这种规则的选择器称为上下文选择器(contextual selectors),在CSS2中称为派生选择器。
派生选择器允许你根据上下文之间关系来确定某个标签的样式。通过合理使用派生选择器,可以使HTML代码更加简洁。
重要提示:
派生,顾名思义就是在原本元素的默认样式下在派生出一个其他样式。
比如下面代码中的strong元素,其原本定义为粗体字,通过使用派生给其不一样的定义。
CSS代码:下面的派生影响<li>标签下的<strong>标签内的内容样式
li strong {
font-style : italic; /*此处为斜体字*/
font-weight : normal;
}
HTML代码:
<p><strong>此处内容为strong的默认粗体</strong></p>
<ol>
<li><strong>此处内容为CSS派生出的特殊定义字体:斜体字</strong></li>
<li>系统默认的正常字体</li>
</ol>
二、CSS id选择器
作用:为标有特定id的HTML元素指定特定的样式。
在CSS中id选择器以“#”来定义。
顾名思义id选择器和id属性密切相关,确切的说是必须和id匹配。当然衍生出的派生id选择器即另当别论。
如下:
CSS代码:
#red {
color : red;
}
HTML代码:
<p id = "red">id属性值就是CSS所指定的特定样式:红色</p>
注意:id属性在每个HTML文档中只能出现一次。
2.1、id选择器衍生处的派生选择器
作用范围:只作用在id属性所对应的标签中的衍生元素内的内容。
如下代码所示:作用域为test属性所对应标签中的<p>标签内的内容。
CSS衍生选择器代码:
# test p {
color : red;
}
HTML代码:(标题中插入段落,不标准,仅供测试)
<h id = "test">你好<p>此处区域显示红色</p></h>
<h id = "test">此处区域不会显示红色</h>
三、CSS类选择器
在CSS中,类选择器以一个点号显示。HTML中类选择器要匹配class属性。
如下:.center {text-align : center;}
HTML代码:
<h class = "center">此处标题的内容居中</h>
<p class = "center">此处内容也居中</p>
3.1、类选择器衍生的派生选择器
其使用方法和id的衍生的派生使用方法雷同
3.2、元素也可基于他们的类而被选择(也可理解为基于特定标签的类选择器)
如下CSS代码:
td.fancy {
color : red;
}
此CSS代码指明类选择器fancy只是针对于<td>标签。
四、CSS属性选择器
对带有指定属性的HTML元素设置样式。不仅限于class 和 id属性,同时chass和id属性为特别的选择器。
注释:只有在规定了<!DOCTYPE>时,IE7以后的浏览器才支持属性选择器;在IE6以下(包括IE6)浏览器中不支持属性选择。
4.1、简单属性选择器
如下:为带有title属性的所有HTML元素设置样式。
CSS代码:
[title]{
color : red;
}
HTML代码:
<h1 title = "hello">此处内容字体为红色</h1>
<p title = "hi">此处内容字体也为红色</p>
<p>此处内容为正常字体颜色</p>
4.2、属性和值选择器(属性对应单一值)
以属性和值此对为依据,只要有包含此对的HTML元素都可以设置样式。
如下:
[title=hello]{
color : red;
}
HTML代码:
<h1 title = "hello">此处内容字体设置为红色</h1>
<p title = "hello">此处内容字体也为红色</p>
<p title = "hi">此处内容字体为正常字体颜色</p>
4.3、属性对应多个值选择器
比如:[title~=hello] 表示:属性为title值只要包含单独的的hello。只要拥有此对的HTML元素就可设置样式。
注意:hello必须是单独词,属于一个单词的一部分是不合法的。
[title~=hello]{
color : red;
}
HTML代码:
<h1 title = "hello world">此处内容字体为红色</h1>
<p title = "say hello">此处内容字体为红色</p>
<p title = "sayhello">此处内容为正常的字体颜色</p>