一、派生选择器:

    通过依据元素在其位置的上下文关系来定义样式

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