CSS-引入方式和选择器

最新推荐文章于 2024-08-17 22:24:13 发布

花_城

最新推荐文章于 2024-08-17 22:24:13 发布

阅读量224

点赞数 1

分类专栏：前端文章标签： css 前端

本文链接：https://blog.csdn.net/qq_39330486/article/details/119862919

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括CSS的三种引入方式（行内、内部、外部）及其优缺点，选择器的类型如基本选择器、组合选择器、属性选择器、伪类和伪元素选择器，并阐述了选择器的优先级规则。此外，还讲解了CSS注释的使用，为初学者提供了全面的学习路径。

摘要由CSDN通过智能技术生成

系列文章目录

一、CSS简介

CSS的中文名叫做层叠样式表，用来改变HTML标签的样式，让其更加美观。

它的基础格式如下：

选择器 {
    属性: 值;
    属性1: 值1;
    ……
}

二、CSS注释

/* 单行注释 */

/* 
多行注释
多行注释
*/

三、CSS的三种引入方式

1. 行内方式

直接在html标签内部书写(格式比较特殊)，耦合度高，尽量不要用：

<h1 style="属性: 值;属性1：值1">内容</h1>

2. 内部方式

在style标签内书写：

<head>
    <style>
        选择器 {
            属性: 值;
            ……
        }
        ……
    </style>
</head>

注意：style标签要写在head标签内！

3. 外部方式（推荐）

首先新建一个扩展名为css的文件，将css代码写入该文件内。

然后使用link标签，将css文件引入html文件中：

<head>
    <link rel="stylesheet" href="css文件的路径">
</head>

四、选择器

CSS的选择器，用来指定样式要被应用到哪个标签上。

1. 基本选择器

简单直接，通过id、class等直接筛选出标签。

id选择器：
```
#对应标签的id属性值 {……}
```
类选择器：
```
.对应标签的class属性值 {……}
```
注意开头的英文句点！
标签（元素）选择器：
```
标签名称 {……}
```
通用选择器：

通用选择器会修改所有标签的样式。
```
* {……}
```

2. 组合选择器

根据标签之间的特定关系来筛选出标签。

后代选择器：

后代是指标签的嵌套关系中，某个标签内部的所有标签，都属于该标签的后代标签。

后代选择器会从某标签的所有后代中筛选标签。
```
选择器 选择器 {……} 
```
比如，筛选出ad类标签下的所有p标签：
```
.ad p {……}
```
子选择器：

在XXX标签的嵌套关系中，处于XXX标签内第一层的所有标签，就是XXX的子标签，更深层次的标签就不属于子标签。后代标签包含子标签，子标签是后代标签的一部分。

子选择器会从某标签的所有子标签中筛选标签。
```
选择器>选择器 {……}
```
相邻弟弟选择器：
属于同一层（没有嵌套关系）且紧挨着的下一个标签，就是相邻弟弟标签。

比如，下面p标签中的h1标签下面的span标签，就是相邻弟弟标签：
```
<p>
    <h1>我是哥哥</h1>
    <span>我是弟弟</span>
    <div>我是弟弟的弟弟</div>
</p>
<div>
    <h1>上面的哥哥弟弟跟我没关系</h1>
</div>
```
相邻兄弟选择器会筛选出相邻的弟弟标签。
```
选择器+选择器 {……}
```
普通弟弟选择器：

上面的选择器筛选出的是紧挨着的下一个标签，而普通弟弟选择器则没有紧挨着的限制。

普通弟弟选择器会从所有弟弟标签中筛选标签。
```
选择器~选择器 {……}
```

3. 属性选择器

根据html标签的属性、属性值等筛选出标签。

属性选择器：

筛选出含有A属性的所有标签。
```
[A属性] {……}
```
属性和值选择器：

筛选出某个属性等于某个值的所有元素。
```
[属性=值] {……}
```

4. 选择器分组

先看一组很烂的代码：

h1 {
  color: red;
}

#dd {
  color: red;
}

[class="xyz"] {
  color: red;
}

上面的css代码，三个代码块，虽然选择器不一样，但样式一样，代码冗余很高。因此，我们可以用选择器分组，来简化书写：

h1,#dd,[calss="xyz"] {
    color: red;
}

选择器分组是一种对CSS代码的简化方法，它的语法如下（注意是用英文逗号隔开选择器）：

选择器,选择器…… {……}

5. 伪类选择器

伪类的作用：
- 能够使同一个标签，根据标签的不同状态，展现不同的样式。
- 给选择器添加一些特殊效果，比如:not(p)会选择除了p标签以外的所有标签。
- 伪类选择器和下面的伪元素选择器，都是为了满足一些五花八门的特殊需求而产生的。

语法：

选择器:伪类(参数) {……}  /* “(参数)” 有的伪类需要，有的不需要 */

或者：

:伪类(选择器) {……}

伪类：

选择器	例子	例子描述
:active	a:active	选择活动的链接。即鼠标左键按下时，松开后失效。
:checked	input:checked	选择每个被选中的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:empty	p:empty	选择没有子元素的每个元素。
:enabled	input:enabled	选择每个已启用的元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个元素。
:first-of-type	p:first-of-type	选择作为其父的首个元素的每个元素。
:focus	input:focus	选择获得焦点的元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的元素。
:invalid	input:invalid	选择所有具有无效值的元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个元素的每个元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个元素的每个元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个元素的每个元素。
:only-of-type	p:only-of-type	选择作为其父的唯一元素的每个元素。
:only-child	p:only-child	选择作为其父的唯一子元素的元素。
:optional	input:optional	选择不带 “required” 属性的元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的元素。
:read-write	input:read-write	选择不带 “readonly” 属性的元素。
:required	input:required	选择指定了 “required” 属性的元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的元素。
:visited	a:visited	选择所有已访问的链接。

该表引用自w3cschool。

常用的有focus、hover、activate、等

举例：

根据a标签的不同的状态，显示不同的颜色。

/* link代表未访问时 */
a:link {
  color: #FF0000;
}

/* visited代表访问之后 */
a:visited {
  color: #00FF00;
}

/* hover代表鼠标悬停时 */
a:hover {
  color: #FF00FF;
}

/* active代表鼠标左键按下时（松开左键失效） */
a:active {
  color: #0000FF;
}

6. 伪元素选择器

伪元素选择器和上面的伪类选择器有点相似，也是用来满足一些特殊需求的。但后者修改的是真正的元素（标签），而前者则是操作元素的一部分或创建一个虚假的元素。比如，修改元素内容的首字母样式。

伪元素：

选择器	例子	例子描述
::after	p::after	在每个元素之后插入内容。
::before	p::before	在每个元素之前插入内容。
::first-letter	p::first-letter	选择每个元素的首字母。
::first-line	p::first-line	选择每个元素的首行。
::selection	p::selection	选择用户选择的元素部分。

该表引用自w3cschool。

语法：
```
选择器::伪元素 {……}
```
举例：
```
p::before {
    content: "要插入的内容"
}
```
注意：使用CSS插入的内容，不能被鼠标选中。

五、选择器优先级

在属性后面使用!important会覆盖页面内任何位置定义的元素样式。比如：{color: red !important}。慎用！

引入方式：

就近原则：谁离元素近就应用谁，行内方式 > 内部方式 > 外部方式。
不同选择器：

选择器的精确度越高（筛选出的元素越少）优先级越高。

!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器 > 浏览器默认属性。

花_城

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS-引入方式和选择器

CSS简介、CSS注释、CSS的三种引入方式. 行内方式. 内部方式. 外部方式、选择器. 基本选择器. 组合选择器. 属性选择器. 选择器分组. 伪类选择器. 伪元素选择器、选择器优先级、!important
复制链接

扫一扫