CSS常用选择器(通配符选择器,标签选择器,类选择器,id选择器……),你知道了多少?

目录

CSS常用选择器

一、什么是选择器

二、通配符选择器

基本语法格式:

三、标签选择器

基本语法格式:

四、类选择器

基本语法格式:

五、id选择器

基本语法格式:

[六、类选择器还是 ID 选择器?](#六、类选择器还是 ID 选择器?)

[区别 1:只能在文档中使用一次](#区别 1:只能在文档中使用一次)

[区别 2:不能使用 ID 词列表](#区别 2:不能使用 ID 词列表)

[区别 3:ID 能包含更多含义](#区别 3:ID 能包含更多含义)


CSS常用选择器

css常用的选择器有很多种,如通配符选择器、标签选择器、类选择器等

CSS选择器的作用是从HTML页面中找出特定的某类元素,而常用的CSS选择器有如下几类,一起来看看吧!

一、什么是选择器

每一条css样式声明由两部分组成,如下:

复制代码
选择器{
    样式;
}

在css中{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是说该"样式"作用与网页中的哪些元素。

二、通配符选择器

通配符选择器常用 '*' 号表示,它是所有选择器里作用范围最广的,能匹配页面中所有的元素。

基本语法格式:

*{ 属性1:属性值1;属性2:属性值2;}

例子

使用该选择器定义样式,清除所有HTML标记的默认边距。

复制代码
*{
margin:0;       /*定义外边距*/
padding:0;     /*定义内边距*/
}

三、标签选择器

标签选择器是指用HTML标记名称作为选择器,按标记名称分类,为页面中某一类标签指定统一的CSS样式。

基本语法格式:

标签名{ 属性1:属性值1;属性2:属性值2;}

所有的HTML标记名都可以作为标签选择器,例如a、body、p、h1等等。用标签选择器定义的样式对页面中该类型的所有标签都有效。

例子

使用p选择器定义HTML页面中所有段落的样式。

复制代码
p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }

标签选择器最大的优势是能快速为页面中同类型的标签统一样式,同时这也是它的缺点,不能设计差异化样式。

四、类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用,也可以与其他元素结合使用。

类选择器使用**'.'**(英文点号)进行标识,后面紧跟类名。

基本语法格式:

. 类名{ 属性1:属性值1;属性2:属性值2;}

该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。

例子

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.red{color: red;}
.green{color:green;}
.font22{font-size:22px;}
p{ text-decoration:underline; font- family:"微软雅黑"; }
</style>
</head>
<body>
<h2 class="red">二级标题文本</h2>
<p class-"green font22">段落文本内容</p>
<p class="red font22">段落二文本内容</p>
<p>段落三文本内容</p>
</body>
</html>

类选择器最大的优点是可以为元素对象定义单独或相同的样式,而且多个标记可以使用同一个类名,可以实现为不同类型的标记指定相同的样式。同时,一个HTML元素也可以应用多个class类,设置多个样式,此时多个类名之间需要用空格隔开,如上述代码中的前两个<p>标记。

注意:类名的第一个字符不能使用数字,并且严格区分大小写。一般采用小写的英文字符。

五、id选择器

ID 选择器允许以一种独立于文档元素的方式来指定样式;在某些方面,ID 选择器类似于类选择器,不过也有一些重要差别。

基本语法格式:

#id名 { 属性1:属性值1;属性2:属性值2;}

例子

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
#red{color: red;}
#green{color:green;}
#font22{font-size:22px;}
p{ text-decoration:underline; font- family:"微软雅黑"; }
</style>
</head>
<body>
<h2 id="red">二级标题文本</h2>
<p id-"green font22">段落文本内容</p>
<p id="red font22">段落二文本内容</p>
<p>段落三文本内容</p>
</body>
</html>

id选择器跟类选择器最大的区别是id选择器只能在文档中使用一次,而类选择器可重复使用。

六、类选择器还是 ID 选择器?

在类选择器这一章中我们曾讲解过,可以为任意多个元素指定类。前一章中类名 important 被应用到 p 和 h1 元素,而且它还可以应用到更多元素。

区别 1:只能在文档中使用一次

与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。

区别 2:不能使用 ID 词列表

不同于类选择器,ID 选择器不能结合使用,因为 ID 属性不允许有以空格分隔的词列表。

区别 3:ID 能包含更多含义

类似于类,可以独立于元素来选择 ID。有些情况下,您知道文档中会出现某个特定 ID 值,但是并不知道它会出现在哪个元素上,所以您想声明独立的 ID 选择器。例如,您可能知道在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容,它可能在任何元素中,而且只能出现一个。在这种情况下,可以编写如下规则:

复制代码
#mostImportant {color:red; background:yellow;}

这个规则会与以下各个元素匹配(这些元素不能在同一个文档中同时出现,因为它们都有相同的 ID 值):

复制代码
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

多多转发、点赞、评论、谢谢大家,让更多人受益!!!

相关推荐
阿里巴巴首席技术官18 分钟前
CSS 高级用法
前端·css
今晚吃什么呢?1 小时前
前端面试题之CSS中的box属性
前端·css
CodePencil2 小时前
CSS专题之外边距重叠
前端·css
carterwu3 小时前
是否使用原子式tailwindcss 代替css module?
css
Linruoxin3 小时前
为什么给 body 设置背景会直接铺满整个视口?
前端·css
咖啡教室20 小时前
前端开发中JavaScript、HTML、CSS常见避坑问题
前端·javascript·css
CodePencil1 天前
CSS专题之盒模型
前端·css
FanetheDivine1 天前
正确使用flex-1
css·html
吞掉星星的鲸鱼1 天前
使用高德api实现天气查询
前端·javascript·css
-代号95272 天前
【JavaScript】十四、轮播图
javascript·css·css3