CSS 选择器的常见用法

最新推荐文章于 2024-09-04 19:27:43 发布

m0_58954724

最新推荐文章于 2024-09-04 19:27:43 发布

阅读量118

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_58954724/article/details/126910713

版权

CSS(层叠样式表)是能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 下面我们介绍常用的几种css基础选择器(标签选择器、类选择器、id选择器)

一.标签选择器

标签选择器的优点是:1.能快速为同一类型的标签都选择出来.
2.但是不能差异化选择

代码演示:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>这是一个标签</p>
</body>

这里的 <p> 就是一个标签~

这是效果：

二、类选择器

在css中,类的语法是用 . 开头的，在标签中使用class属性来进行调用，当然类名不要使用纯数字, 或者中文, 以及标签名来命名类名

优点：1.可以让多个标签的都使用同一个标签.

2.差异化表示不同的标签
代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
</head>
<body>
    <style>
        .lei {
            color: blue;
            font-size: 20px;
        }
    </style>
    <p class="lei">类选择器</p>
</body>
</html>

这是效果：

三、id选择器

在css(层叠样式表)中 ,id选择器和类选择器类似，不过id选择器是大于类选择器的.

它的语法特点是:1、CSS 中使用 # 开头表示 id 选择器

2、id 选择器的值和 html 中某个元素的 id 值相同
3、html 的元素 id 不必带 #
4、id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)
代码演示.

<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>

这是效果：

m0_58954724

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫