CSS基础之选择器

简介: 总所周知,css可以为网页设置多种多样的样式,那怎么样可以精确为每一个html标签设置相应的样式呢?

总所周知,css可以为网页设置多种多样的样式,那怎么样可以精确为每一个html标签设置相应的样式呢?

tips:小白初学,如有错误,还请各位大佬指教


<h1>
  css选择器
</h1>


这在里,我们列举了一个简单的例子来讲解css选择器。 首先h1就是我们所说的选择器,然后这个{}里面的的代码我们称之为声明块,color:aqua;就是声明,声明里面的color是属性,也就是我们要为这个html标签设置的属性,接下来属性后面的aqua就是属性值。 当然这是一个最基本的选择器,css里面的选择器有很多,基本选择器分为一下几种:通配符选择器、类选择器、id选择器、伪类选择器。 首先是通配符选择器


<h1>
  通配符选择器
</h1>


可以看到,通配符选择器这里,它的选择器是*,这个意思就是自动选择html页面所有的标签,并且为所有标签设置属性。 然后就是类选择器


<h1 class="h1_color">
  类选择器
</h1>


可以看到类选择器在定义的时候,选择器前面有一个".",这就是类选择器的一个特征,然后在使用类选择器的时候,我们可以看到在html标签里面有一个“class”属性,通过这个class属性里面的值,我们找到css里面相应的声明块,然后这个标签就被相应的声明块设置了相应的属性。 我们需要注意的是:

  • 每一个html标签都有class属性,也就是说每一个html标签都可以有类名。
  • 在写css样式的时候,一定要在选择器名称的前面加上"."
  • 在html中,一个标签里面可以同时绑定多个类名,多个类名之间,我们使用“,”隔开,例如<标签名  class = "类名1,类名2,类名3···">接下来就是id选择器:


<h2 id="h2_color">
  id选择器
</h2>


在id选择器里面,和前面选择器有一个很大的不同,就是id选择器前面有一个#,然后在html标签里面使用这个选择器,需要id属性,后面的属性值就是选择器的名字。 id属性需要注意的地方:

  • 在书写id选择器的时候,一定要记得在选择器名字前面加“#”
  • id选择器只可以使用一次,也就是说在html页面里面,id选择器只能被调用一次。 伪类选择器我们会在后面详细讲解。
相关文章
|
23天前
|
缓存 前端开发
CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
|
19天前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
16天前
|
前端开发
CSS选择器详解与应用实例
CSS选择器详解与应用实例
115 44
|
9天前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
10 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
16天前
|
前端开发 开发者
CSS伪类选择器:增强内容表现力的利器
CSS伪类选择器:增强内容表现力的利器
15 4
|
23天前
|
前端开发
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
|
23天前
|
前端开发
CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
|
25天前
|
前端开发 JavaScript
CSS id选择器
CSS id选择器
12 1
|
6天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
12 0
|
12天前
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
13 0