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