前端学习——CSS初学__2 CSS基础选择器

最新推荐文章于 2024-10-04 17:24:00 发布

龙蛋蛋啊

最新推荐文章于 2024-10-04 17:24:00 发布

阅读量97

点赞数 1

分类专栏： CSS 文章标签：前端 css html5 css3 学习

本文链接：https://blog.csdn.net/m0_53428059/article/details/125581555

版权

5 篇文章 0 订阅

订阅专栏

选择器可以分为基础选择器和复合选择器

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

一.标签选择器

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

基本语法格式:

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

标签选择器不能设计差异化样式,只能选择全部的当前标签.

二.类选择器

类选择器可以单独选择一个或者某几个标签,进行差异化设计样式。

基本语法格式:

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

类名是由用户自己定义的,如定义red类的HTML元素均为红色:

.red {
  color: red;
}

如果想使用定义好的类名,利用class属性来调用类:

<div class="red">111</div>

注意:长名称或词组可以使用中横线来为选择器命名,不要使用纯数字,中文进行命名。

2.1类选择器特殊用法:多类名

我们可以给一个标签指定多个类名,从而达到更多的选择目的。

使用方式 :

<div class="red font20">茹茹</div>

在标签class属性中可以写入多个类名,多个类名必须用空格分开,此时这个标签将具有这些类名的样式。

三.id选择器

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

HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。

语法结构:

#id名 {
   属性1: 属性值1;
   ...
}

注:类可以多次使用,id一般用于页面唯一性的元素上只能使用一次!!!

四.通配符选择器

在CSS中,通配符选择器使用"*"定义,表示选取页面中所有元素(标签)。

语法格式:

* {
   属性1: 属性值1;
   ...
}

这里是把所有的标签,包括<html><body><div>等等等等

通配符选择器常用于特殊情况,如清除所有元素标签的内外边距:

* {
  margin: 0;
  padding: 0;
}

此处只需大概了解就行

五.总结

总结一下: