首页 > Web开发 > 详细

二、CSS选择器

时间:2019-03-13 21:23:57      阅读:179      评论:0      收藏:0      [点我收藏+]

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;
}

运行结果:

技术分享图片

 

二、CSS选择器

原文:https://www.cnblogs.com/gyqqqqq/p/10526272.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!