css01

最新推荐文章于 2026-01-07 20:49:20 发布

原创最新推荐文章于 2026-01-07 20:49:20 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css

从零开始学习HTML5 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了CSS中各种选择器的使用方法，包括通用的选择器如h1, 分组选择器如h1,h2, 派生选择器如#pida, 类选择器如.pclassa, 以及属性选择器等。通过实例展示了如何应用这些选择器来修改页面元素的样式。

首先给一个h1标签来增加一个样式，写法为h1{里面设置属性}。如果属性大于一个用分号隔开，如果属性值单词大于一个，则用双引号包裹起来，单词用空格分开。

CSS的分组写法是用逗号将标签分开的具体写法h1,h2{属性}。CSS的继承body{属性}

h1,h2{
    color: red; font-size: 50px;
}

body{
    color: blueviolet; font-size: 100px;
}
p{
    color: chartreuse; font-size: 20px;
}

css的派生选择器列表中的数据会按照li strong来改变

li strong{
    color: aqua; font-size: 15px;
}
strong{
    color: darkgoldenrod;
}

css的id选择器，它一般和派生选择器一起使用的。在css中用#加上id来表示

#pid a{
    color: blueviolet;
}
#mydiv p{
    color: blue;

css的类选择器，在我的理解他和id选择器差不多，但是不知道具体有什么区别。类选择器是以一个点（.）来表示的。

.pclass a{
    color: chartreuse;
}
.divclass p{
    color: blueviolet;
}

css的属性选择器还有属性和值选择器，具体看代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        [title]{
            color: brown;
        }
        [title=pe]{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <p title="p1">属性选择器</p>
    <p title="pe">属性和值选择器</p>
</body>
</html>