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选择器只能被调用一次。 伪类选择器我们会在后面详细讲解。
相关文章
|
20天前
|
XML 前端开发 数据格式
css核心组成部分包括选择器、属性和值。
【4月更文挑战第5天】css核心组成部分包括选择器、属性和值。
18 7
|
1月前
|
前端开发 算法
CSS 选择器的优先级算法
在CSS中,选择器的优先级由四个级别和各级别的出现次数决定**。这四个级别分别为:行内选择符、ID选择符、类别选择符、元素选择符,优先级依次降低。
|
1月前
|
前端开发
CSS语言的选择器
CSS语言的选择器
|
3月前
|
前端开发
CSS3新增的has伪类选择器,让你能轻松选择父元素
CSS3新增的has伪类选择器,让你能轻松选择父元素
27 0
|
1月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
20 1
|
9天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
19 1
N..
|
30天前
|
前端开发 UED
CSS选择器
CSS选择器
N..
9 0
|
1月前
|
前端开发
css选择器
css选择器【2月更文挑战第26天】
25 12
|
1月前
|
前端开发 JavaScript 开发者
前端的CSS选择器
前端的CSS选择器
21 1
|
1月前
|
前端开发 开发者
掌握CSS中的常见选择器
掌握CSS中的常见选择器
34 0