首页技术css选择器是什么,css三大选择器的含义

css选择器是什么,css三大选择器的含义

编程之家2026-06-23703次浏览

本篇文章给大家谈谈css选择器是什么,以及css三大选择器的含义对应的知识点,文章可能有点长,但是希望大家可以阅读完,增长自己的知识,最重要的是希望对各位有所帮助,可以解决了您的问题,不要忘了收藏本站喔。

css选择器是什么,css三大选择器的含义

css的选择器是什么东西

CSS主要的作用就是给网页中的dom元素设置样式,选择器则是用来匹配dom元素的。

CSS中的选择器有三种,分别是标签选择器(根据元素标签名称),类选择器(根据元素class属性),id选择器(根据元素id属性),并且三种选择器可以相互结合使用

例如:

body{background-color:red}

//这里的body就是标签选择器了,{}中是设置匹配元素的背景颜色,即设置body背景色为红色

#main{width:600px}

css选择器是什么,css三大选择器的含义

//这里的#main就是id选择器了,匹配网页中id为main的元素

.logo{width:300px}

//这里的.logo就是类型选择器了,匹配网页中class为logo的元素

div.logo{width:300px}

//这里的div.logo结合了标签选择器和类选择器,匹配网页中class为logo的div元素

什么是css选择器字符串

css的选择器是还是比较富的,主要的css选择器如下:

css选择器是什么,css三大选择器的含义

标签选择器(如:body,div,p,ul,li)

.类选择器(如:class="head",class="head_logo")

ID选择器(如:id="name",id="name_txt")

全局选择器(如:*号)

.组合选择器(如:.head.head_logo,注意两选择器用空格键分开)

.继承选择器(如:div p,注意两选择器用空格键分开)

伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

字符串匹配的属性选择符(^$*三种,分别对应开始、结尾、包含)

以上选择器在日常开发中最常用的就是标签选择器、类选择器和id选择器,下面是这三种选择器的基本用法1、标签名选择器一个XHTML文档中有许多标签,例如p标签,h1标签等。若要使文档中的所有p标签都使用同一个CSS样式,就应使用标签选择器。

1

2

div{color:red;border:1px blue solid;}

p{color:#000;}

2、类选择器使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中,XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。

1

2

<div class="test">测试代码</div>

.test{color:red;border:1px blue solid;}

3、id选择器,id选择器是唯一的,只可以获取独一无二的一个元素。

1

2

<div id="test">测试代码</div>

#test{color:red;border:1px blue solid;}

css有哪三大基本选择器

1、标签选择器

p{color:red;}

什么是标签选择器?

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

注意点:

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

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

2、id选择器#id{color:red;}

什么是id选择器?

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

注意点:

每个HTML标签都有id属性

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

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

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

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

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

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

3、类选择器.class{color:red;}

什么是类选择器?

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

注意点

每个HTML标签都有class属性

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

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

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

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

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

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

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

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

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

文章分享结束,css选择器是什么和css三大选择器的含义的答案你都知道了吗?欢迎再次光临本站哦!

c语言基础知识100个 c语言基本知识点全国计算机等级考试二级c语言,计算机一级考试题库