一、派生选择器：
通过依据元素在其位置的上下文关系来定义样式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>派生选择器示例</
title
>
<
link
rel
=
"stylesheet"
href
=
"MyCss.css"
type
=
"text/css"
>
</
head
>
<
body
>
<
p
><
strong
>p标签Hello Css</
strong
></
p
>
<
ul
>
<
li
><
strong
>li标签Hello Css</
strong
></
li
>
</
ul
>
</
body
>
</
html
>
|
这时候要求li标签中的strong标签内的文字加一个样式，而p标签strong内的文字不需要加一个样式。这个时候就可以采用派生选择器来处理。
|
1
2
3
|
li strong{
color: red;
}
|
这时候在样式表中再加一个样式
|
1
2
3
4
5
6
|
li strong{
color: red;
}
strong{
color: blueviolet;
}
|
这时候列表项中的strong标签不会被影响，p标签中的strong被改变了颜色
这是派生选择器的另一种使用
从这里可以看出，已经被定义好的效果是不会被覆盖的，没有指定效果的被当前的效果所覆盖掉。
二、id选择器
1.id选择器可以为标有id的HTML元素指定特定的样式
2.id选择器以“#”来定义
|
1
2
3
4
|
<
p
id
=
"pid"
>Hello Css</
p
>
<
div
id
=
"divId"
>
这是div
</
div
>
|
|
1
2
3
4
5
6
|
#pid{
color: blueviolet;
}
#divId{
color: red;
}
|
3.目前比较常用的方式是id选择器常常用于建立派生选择器
|
1
|
<
p
id
=
"pid"
>Hello Css <
a
href
=
"https://www.baidu.com/"
>百度</
a
></
p
>
|
|
1
2
3
|
#pid a{
color: blueviolet;
}
|
三、类选择器
1.类选择器以一个点显示
|
1
2
3
4
|
<
p
class
=
"pClass"
>这是一个class效果</
p
>
<
div
class
=
"divClass"
>
Hello div
</
div
>
|
|
1
2
3
4
5
6
|
.pClass{
color: red;
}
.divClass{
color: blueviolet;
}
|
2.class也可以用作派生选择器
|
1
2
3
4
5
|
<
p
class
=
"pClass"
>这是一个class效果 <
a
href
=
"https://www.baidu.com"
>百度</
a
></
p
>
<
div
class
=
"divClass"
>
Hello div
<
p
>p标签</
p
>
</
div
>
|
|
1
2
3
4
5
6
|
.pClass a{
color: red;
}
.divClass p{
color: blueviolet;
}
|
四、属性选择器
1.属性选择器
对带有指定属性的HTML元素设置样式
|
1
2
3
4
5
6
|
<
style
type
=
"text/css"
>
[title]{
color: blue;
}
</
style
>
<
p
title
=
"t"
>属性选择器</
p
>
|
2.属性和值选择器
|
1
2
3
4
|
[title=te]{
color: red;
}
<
p
title
=
"te"
>属性和值选择器</
p
>
|
结合上面两个例子也就是说，选择器如果不指定其值，它的值怎么写都无所谓。如果指定了其值，那么必须按照其值具体是多少来写，如果值变化，将不再生效
注：属性选择器在IE6以及更低的版本中是不支持的
本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1771601
