CSS选择器的使用

HTML的局限性

① 它只关注内容的语义 ⽐如< h1 >表明这是 标题，

表明这是段落，表示此处有链接

②丑

③能写简单的样式，但步骤繁琐

CSS简介

css是层叠样式表（Cascading Style Sheets）的简称，也称为 css样式表或级联样式表

css也是⼀种标记语⾔

css的主要作⽤就是美化⽹⻚、布局⻚⾯

——（ 设置HTML⻚⾯中⽂本内容，图⽚外形及版⾯的布局和外观显式样式）

css最⼤价值：由HTML做结构呈现，样式给css，即结构与样式相分离

1.CSS语法规范

CSS规则由两部分构成：选择器以及⼀条或多条声明

image-20221108160723738

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <style>
        p{color:red;
          font-size:12px
        }
    </style>
</head>
<body>
    <p>
        改样式
    </p>
</body>

△选择器是⽤于指定CSS样式的HTML标签，花括号⾥是对该对像设置的具体样式

△属性与属性值以“键值对”的形式出现

△属性是对指定的对象设置样式属性，例如字体⼤⼩、⽂本颜⾊等

△属与属性值之间⽤英⽂“ ： ” 分开

△多个键值对之间⽤英⽂“ ； ” 区分

CSS样式表中注释快捷键为 Ctrl +／

2.CSS代码⻛格

1.样式格式书写

①紧凑格式

1
h3{color:deeppink;font-size:20px}

②展开格式

1
2
3
4
h3{
    color:pink;
    font-size:20px;
}

样式选择器，属性名，属性值关键词全部使⽤⼩写字⺟，特殊情况除外

2.空格规范

①属性值前⾯，冒号后⾯，保留⼀个空格

②选择器（标签）和⼤括号中间保留空格

3.CSS选择器的作⽤

1.选择器作⽤就是选择标签

2.选择器分为基础选择器和复合选择器两⼤类

▪ 基础选择器是由单个选择器组成

▪ 基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

①标签选择器（元素选择器）

指⽤HTML标签名称作为选择器，按标签名分类，为⻚⾯中某⼀类标签指定统⼀的 CSS样式

如：

1
2
3
4
标签名 ｛
       属性1：属性值1；
        …
   ｝

标签选择器可以选择相同的标签，⽐如所有的< div >标签和所有的< span >标签

优点：能快速为⻚⾯中同类型的标签统⼀设置样式

缺点：不能设计差异化样式，只能选择全部的当前标签

②类选择器※

差异化选择不同的标签，单独选⼀个或某⼏个标签，可以使⽤类选择器

可以选⼀个或多个标签

记忆⼝决：样式点定义，结构类（class）调⽤，⼀个或多个，开发最常⽤

语法：

1
2
3
4
. 类名｛
       属性1: 属性值1；
       …
   ｝

如：将所有拥有red类的HTML元素均为红⾊

1
2
3
.red{
    color:red;
}

△ 结构需要⽤class属性来调⽤class类的意思

1
2
3
4
5
6
7
8
9
10
<style>
    .red{
        color:red;
    }
</style>
<body>
    <div class="rde">
        变红色
    </div>
</body>

▪ 类选择器使⽤ “ . ” 进⾏标识，后⾯紧跟类名（⾃定义），不能以标签的名字命名

▪ ⻓名称或词组可以使⽤中横线来为选择器命名

▪ 不要使⽤纯数字、中⽂等命名，尽量使⽤英⽂字⺟表示

▪ 命名要有意义，尽量别⼈⼀眼就知道这个类名的⽬的

背景颜⾊：background- color

多类名

可以给⼀个标签指定多个类名，这些类名都可以选出这个标签

1.多类名使⽤⽅式

①在标签class属性中写多个类名

1
如：< div class =“ red  font 20 ” >亚瑟<／div >

② 多个类名中间必须⽤空格分开

③这个标签就可以分别具有这些类名的样式

2.多类名开发中使⽤场景

①可以把⼀些标签相同的样式放到⼀个类⾥

②这些标签都可以调⽤这个公共的类

③节省 CSS代码 统⼀修改也⽅便

③ id选择器

HTML元素以id属性来设置id选择器， CSS中id选择器以 “ # ”来定义

如：将id为nav元素中的内容设置为红⾊

1
2
3
#nav{
    color：red；
}

△ id ⼀次只能选择⼀个标签

​ ⼝决：样式#定义 结构id调⽤ 只能调⼀次

id只能调⽤⼀次，⽽类可以多次调⽤

类选择器在修改样式中⽤最多，id⼀般⽤于⻚⾯唯⼀性的元素上，经常和 JS搭配使⽤

④通配符选择器

它表示选择所有的元素（标签） 使⽤ “ * ” 定义

1
2
3
4
*{
    属性1：属性值；
    ...
}

▪ 它不需要调⽤，可以将HTML中所有标签更改样式

▪ 特殊情况才使⽤（如：清除有元素标签的内外边距）

1
2
3
4
*{
    margin：0；
    padding：0；
}
CSS
#CSS
CSS选择器的使用
http://example.com/2023/04/17/CSS选择器的使用/
作者
花怜
发布于
2023年4月17日
许可协议