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以及更低的版本中是不支持的

本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1771601