CSS选择器总结（代码实例+执行效果图）

最新推荐文章于 2024-06-19 15:19:49 发布

leeon_l

最新推荐文章于 2024-06-19 15:19:49 发布

阅读量5.6k

点赞数 7

分类专栏： HTML CSS 文章标签： HTML CSS

本文链接：https://blog.csdn.net/zhangliangzi/article/details/49978499

版权

一、标签选择器

我们一般声明或定义样式要用到如下格式的代码：

选择器{

CSS样式代码；

}

在'{'之前的就是CSS选择器，选择器确定了'{ }'中样式的作用对象，如下代码，“h1”就是选择器。确定了大括号内的样式作用对象就是h1标签，这也是一种最直接的选择器——标签选择器。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>标签选择器</title>
<style type="text/css">
h1{                          /*此处h1就为选择器*/
    font-size:25px;          /*文字大小定为25px*/
    color:red;               /*文字颜色定为红色*/
    border:1px solid green;  /*设定文字边框绿色1px*/
}
</style>
</head>
<body>
<h1>标签选择器</h1>
</body>
</html>

执行效果：

二、类选择器

我们除了可以选择文档标签作为选择器，也可以独立于文档元素来指定样式，这就需要用到——类选择器。

类选择器的语法是：

.类选器名称{

css样式代码;

}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>类选择器</title>
<style type="text/css">
.set{               /*set为类选择器*/
    color:green;    /*设置颜色为绿色*/
}
</style>
</head>
<body>
    <h1>类选择器</h1>
    <p><span class="set">类选择器</span>在css样式编码中是最常用到的。类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。</p>
</body>
</html>

执行效果：