page contents

CSS常用的4种基础选择器介绍

CSS选择器分为基础选择器和复合选择器两大类 基础选择器由单个选择器组成 基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器 1、标签选择器 是指用HTML标签名称作为选择器...

attachments-2021-06-xz5wmLKR60dbea129f3b3.png

CSS选择器分为基础选择器复合选择器两大类

基础选择器由单个选择器组成

基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器

1、标签选择器

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

语法:

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

}
例如给P标签设置颜色为红色
p {
color: red;
}

这样不太好的是所有的P标签都会变成红色,不能差异化设置。

2、类选择器

如果想要差异化选择不同的标签,单独选一个或则某几个标签,可以用类选择器。后边通过class调用

口诀: 样式点定义,结构类(class)调用。一个或多个,开发最常用

语法:

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

}

3、id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式

HTML元素以id属性来设置id选择器,CSS中的id选择器以“#”来定义

口诀: 样式#定义,结构id调用,只能调用一次,别人切勿使用

语法:

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

}

4、通配符选择器

在CSS中,通配符选择器使用“*”定义,它表示选取页面中的所有元素

语法:

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

}
通配符选择器不需要调用,自动就给所有的元素使用样式
特殊情况才使用,后面讲解使用场景(以下是清楚所有的元素标签的内外边距)
* {
margin: 0;
padding: 0;
}

id选择器和类选择器的区别

(1)类选择器(class)好比人的名字,一个人可以又多个名字,同时一个名字也可以被多个人使用。

(2)id选择器好比人的身份证号码,全国是唯一的,不得重复

(3)id选择器和类选择器最大的不同在于使用次数上

(4)类选择器在修改样式中用的最多,id选择器一般用于页面上唯一性的元素上,经常和JavaScript搭配使用。

基础选择器总结表

attachments-2021-06-yGfwy8U160dbe9ac680da.png

每个基础选择器都有使用场景,都需要掌握

如果是修改样式,类选择器是使用最多的

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群:805358732

如果你想用Python开辟副业赚钱,但不熟悉爬虫与反爬虫技术,没有接单途径,也缺乏兼职经验
关注下方微信公众号:Python编程学习圈,获取价值999元全套Python入门到进阶的学习资料以及教程,还有Python技术交流群一起交流学习哦。

attachments-2022-06-J5jEh37y62ad2c03629f4.jpeg

0 条评论

请先 登录 后评论
轩辕小不懂
轩辕小不懂

2403 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1478 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章