CSS选择器

2023-09-29 12:29:46

CSS(层叠样式表)也是标记语言, 用于美化HTML网页. 布局界面
HTML 负责主体结构呈现, CSS 负责布局样式, 即结构(html)与样式(CSS)分离

CSS代码编写位置:

<head></head> html的头部标签中

<head>
    <title>Document</title>
    <style>
        CSS编写位置
    </style>
</head>

单独写在一个文件中，再链接到html

组成部分: 选择器 {一条或多条属性声明}

通过选择器(选择符) 根据需求选择对应的标签进行属性设置
属性和属性值以键值对的方式出现，多个键值对间以";"隔开
选择器分为基础选择器和复合选择器

基础选择器

基础选择器由单个选择器组成
基础选择器包括: 标签选择器、类选择器、id选择器、通配符选择器

标签选择器

将 HTML 标签作为选择器, 按标签名称分类, 为页面中的某一类标签设置统一的 CSS 样式

标签 {
    属性: 属性值;
    属性: 属性值;
}

优缺点: 可以快速为页面中的某一类标签设置统一样式，但无法单独为某个标签设置样式

类选择器

可以单独为某个或数个标签设置样式谁使用，谁去调用

定义类选择器：

.自定义类名 {
    属性: 属性值;
    属性: 属性值;
}

调用:
```
<div class = "自定义类名"> </div>
```
语法规范: 起名有意义. 尽量使用英文
- 调用多个类选择器:
```
<div class = “类名1 类名2"> </div>
```
- 调用时类名之间用空格隔开
- 对于多个自定义类中重复属性的设置: 抽取重复属性,单独封装成一个类

id选择器

为标有特有 id 的 HTML 标签指定样式
id 属性在每个 HTML 文档中只能出现一次, 只能调用一次

定义id选择器

#自定义id名 {
    属性: 属性名;
}

调用
```
<div id="自定义id名"></div>
```
id选择器与类选择器区别:
- 类选择器可以随意重复调用, 修改样式常用
- id选择器只能调用一次, 一般用于页面唯一性的元素上(如链接跳转到页面某一位置), 经常与 JS 配合使用

通配符选择器

对文档中所有的标签进行属性设置
不需要调用, 自动给所有的元素设置样式, 特殊情况下才使用

{
属性: 属性名;
}

复合选择器

复合选择器建立在基础选择器之上, 由两个以上、相同或不同的基础选择器组合形成
能够更准确更高效的选择目标元素

后代选择器

又称包含选择器，在标签嵌套的情况下，用来选择父元素中的子元素

元素1 元素2 {属性样式}

表示选择元素1中的所有元素2，可以跨(嵌套)级选择
元素1与元素2可以是任意基础选择器，之间用空格隔开
元素1为父级(嵌套中的外层标签)，元素2为子级(内层标签)，最终选择的是元素2
也可以继续嵌套元素3，即选择元素1中，所有元素2中的所有元素3

子选择器

子元素选择器，类似后代选择器，但只能选择某元素最近的一级子元素,可以理解为亲儿子选择器

元素1>元素2 {属性样式}

元素2必须是元素1内相邻的一级

并集选择器

可以选择多组标签，同时为其定义相同的样式，通常用于集体声明

元素1,元素2 {属性样式}

表示同时选择元素1和元素2，可以是任意类型的选择器，包括复合选择器
","可以理解为和的意思

伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给链接添加效果，或选择第1个、第n个元素
书写特点是元素后紧跟着":",如

a:hover {}
a:ntf-child() {}

伪类选择器有很多，如链接伪类、结构伪类等

链接伪类选择器

a:link    /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover   /*选择鼠标悬停其上的链接*/
a:active  /*选择鼠标点住未弹起的链接*/

为确保生效，需要按照以上顺序声明
根据需要来使用,不一定要全部写出来
a链接在浏览器中有默认样式，所以一般需要单独指定样式

:focus 焦点伪类选择器

焦点就是光标，一般''表单元素才能获取，所以这个选择器也主要针对表单元素来说
光标选择了哪个元素, 就对哪个元素进行修改，如

input:focus {
    background-color: red;
}

码农公寓