优秀的编程知识分享平台

网站首页 > 技术文章 正文

CSS选择器(一)(css选择器及常用属性)

nanyue 2024-09-07 16:48:45 技术文章 10 ℃

CSS选择器(选择符)就是根据不同需求把不同的标签选出来,这就是选择器的作用。 简单来说,就是选择标签用的。

选择器分为基础选择器复合选择器两个大类,这里先介绍一下基础选择器。

  • 基础选择器是由单个选择器组成的
  • 基础选择器又包括:标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

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

// 语法

标签名{

      属性1: 属性值1;

      属性2: 属性值2;

      属性3: 属性值3;

      ...

}

标签选择器可以把某一类标签全部选择出来,比如所有的 <div> 标签和所有的 <span> 标签。能快速为页面中同类型的标签统一设置样式。缺点是不能设计差异化样式,只能选择全部的当前标签。

类选择器

如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点“.”号显示。

// 语法
.类名 {
		属性1: 属性值1;
		...
}
<div class='red'> 变红色 </div>

我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签。简单理解就是一个标签有多个名字。

<div class='red  one'> 变红色 </div>

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以“#" 来定义。id 属性只能在每个 HTML 文档中出现一次。

//语法
#id名 {
 		属性1: 属性值1; 
 		...
}
#nav {
 color:blue;
}

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

  • 类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
  • id 选择器好比人的身份证号,是唯一的,不能重复。
  • id 选择器和类选择器最大的不同在于使用次数上。
  • 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和JavaScript 搭配使用。

通配符选择器

//语法
* {
 		属性1: 属性值1; 
 ...
}

注意:通配符选择器不需要调用, 自动就给所有的元素使用样式。

基础选择器总结

基础选择器

作用

特点

使用情况

标签选择器

可以选出所有相同的标签

不能差异化选择

较多

类选择器

可以选出1个或者多个标签

可以根据需求选择

非常多

id选择器

一次只能选择1个标签

id属性只能在HTML文档中出现一次

一般和js搭配使用

通配符

选择所有的标签

选择的太多,有部分不需要

特殊情况使用

最近发表
标签列表