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选择器只能被调用一次。 伪类选择器我们会在后面详细讲解。
相关文章
|
9天前
|
缓存 前端开发
CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
CSS基础+基本选择器和复合选择器(如果想知道CSS的基础+基本选择器和复合选择器知识点,那么只看这一篇就足够了!)
|
5天前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
2天前
|
前端开发
CSS选择器详解与应用实例
CSS选择器详解与应用实例
104 44
|
17天前
|
前端开发 JavaScript
CSS进阶-CSS选择器高级:伪类与伪元素
【6月更文挑战第13天】本文探讨了CSS伪类与伪元素的核心概念,包括伪类表示元素状态,伪元素创造抽象内容。常见问题涉及二者区别、冒号使用、顺序优先级及`content`属性。实践技巧涵盖`:not()`选择器、`:hover`与子元素伪类结合及自定义形状。通过代码示例展示了高亮悬停行、添加图标、首行样式和链接颜色的应用。理解并熟练运用伪类和伪元素可提升CSS设计效率和灵活性。
CSS进阶-CSS选择器高级:伪类与伪元素
|
2天前
|
前端开发 开发者
CSS伪类选择器:增强内容表现力的利器
CSS伪类选择器:增强内容表现力的利器
11 4
|
9天前
|
前端开发
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪元素选择器(如果想知道CSS的伪元素选择器知识点,那么只看这一篇就足够了!)
|
9天前
|
前端开发
CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
CSS基础之伪类选择器(如果想知道CSS的伪类选择器知识点,那么只看这一篇就足够了!)
|
11天前
|
前端开发 JavaScript
CSS id选择器
CSS id选择器
9 1
|
23天前
|
前端开发
CSS基础-CSS选择器:ID、Class、Tag
【6月更文挑战第7天】本文介绍了CSS中的三种基本选择器:ID、Class和Tag选择器。Tag选择器适用于统一设置同类型元素样式,但可能造成样式泛化;Class选择器灵活性高,适合复用,注意命名规范和避免过度使用;ID选择器具有最高优先级,用于唯一标识,应谨慎使用。理解其特点和场景,结合良好命名规范,能提升CSS代码效率和可维护性。
|
24天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
23 1