二、CSS选择器

1.CSS派生选择器

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

实例:

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p><strong>p-label :hello css</strong></p>
    <ul>
        <li><strong>li-label :hello cess</strong></li>
    </ul>
</body>
</html>
/*mycss.css*/
li strong{
    color: brown;
}

strong{
    color: blue;
}

运行结果:

2、id选择器

概念:

  id选择器可以为标有id的HTML元素制定特定的样式

  id选择器以“#”来定义

注:id选择器和派生选择器可以结合使用

 实例:

<!--index02.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="mycss02.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p id="pid">hello css <a href="http://www.baidu.com">baidu</a></p>
    <div id="divid">
        this is a div style
    </div>
</body>
</html>
/*mycss02.css*/
#pid{
    color: blue;
}

#pid a{
    color: blueviolet;
}
#divid{
    color: brown;
}

运行结果:

猜你喜欢

转载自www.cnblogs.com/gyqqqqq/p/10526272.html