css基本选择器是哪三种?

在CSS中,选择器是一种模式,用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。CSS选择器分为基本选择器和扩展选择器。其中css常用的基本选择器有三个,下面给大家介绍一下。

基本选择器有三种:标签选择器、class选择器、id选择器。

标签选择器

p{
    color:red;
}

什么是标签选择器?

根据指定标签名称,在当前界面中找到所有该名称的标签,并设置属性。

注意点

  • 标签选择器选中的是当前界面所有同名标签,不能单独选中

  • 只要是HTML中的标签都可以作为标签选择器

id选择器

#id{
    color:red;
}

什么是id选择器?

根据指定标签的id,在当前界面中找到该id的标签,并设置属性

注意点

  • 每个HTML标签都有id属性

  • 同一个界面中id是唯一的,不能重复

  • 编写id选择器必须要在id前面加上一个#号

  • id的名称有一定的规范,只能由字母数字和下划线组成

  • id的名称不能够以数字开头

  • id的名称不能与HTML标签同名

  • 如果仅仅是为了设置样式,我们不会使用id,因为前段开发中id是留给js使用的

class选择器

.class{
    color:red;
}

什么是class选择器?

根据指定标签的class,在当前界面中找到该class的标签,并设置属性

注意点

  • 每个HTML标签都有class属性

  • 同一个界面中class属性是可以重复

  • 编写class选择器必须要在class名称前面加上一个.号

  • class的名称有一定的规范,只能由字母数字和下划线组成

  • class的名称不能够以数字开头

  • class的名称不能与HTML标签同名

  • class就是专门给某一类标签设置样式的

  • 一个标签可以同时绑定多个class属性

    <p class="p1 p2 p3">Test paragraph</p>,这样就绑定了三个类属性

类选择器实践,通过对不同类的组合来实现不同的效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class选择器</title>
    <style>
        .red{
            color: #FF0000;
        }
        .underline{
            text-decoration: underline;
        }
        .bigsize{
            font-size: 30px;;
        }
    </style>
</head>
<body>
<p class="bigsize red">第一段文字</p>
<p class="underline bigsize">第二段文字</p>
<p class="red underline">第三段文字</p>
</body>
</html>

基本选择器的优先级

style > id选择器 > class选择器 > 标签选择器

更多CSS相关知识,可访问 CSS教程 !!

以上就是css基本选择器是哪三种?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读