文章目录

一：CSS概述
- （1）概述
- （2）语法规范
- （3）CSS引入方式
二：选择器
- （1）基础选择器
- - ①：标签选择器
  - ②：类选择器
  - ③：id选择器
  - ④：通配符选择器
  - 总结
- （2）复合选择器
- - ①：后代选择器
  - ②：子选择器
  - ③：并集选择器
  - ④：伪类选择器
  - 总结

一：CSS概述

（1）概述

CSS（Cascading Style Sheet）：中文名叫做层叠样式表，可以实现对网页中元素位置的排版进行像素级别的精确控制，以达到美化页面的目的，同时可以试页面样式和结构分离

（2）语法规范

语法规范：CSS基本语法格式为选择器+{一条或多条声明}。CSS文件可以独立于HTML文件也可以嵌入其中

选择器决定针对谁进行修改、声明决定修改什么
CSS中使用/**/作为注释
选择器和{}之间有空格
如果把CSS内嵌在HTML中，则需要使用style标签，一般会将其放在head标签内

这里将CSS嵌入到HTML中，展示其基本语法规范

div：是选择器，表示选中所有div标签
color:red、font-size=100ox、font-family=思源黑体：设置属性，分别表示把文字设置为红色，字体大小为100px，字体为“思源黑体”

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>test</title>  <style>  div {  color:red;  font-size: 100px;  font-family: 思源黑体;  }  </style>  </head>
<body>  <div>  你好 CSS  </div>
</body>
</html>

（3）CSS引入方式

CSS引入方式：CSS的引入共有三种方式

内部样式表：写在style标签中，然后嵌入到HTML内部，一般会将其放在head标签内
- 优点：可以使样式和页面结构分离
- 缺点：分离还不够彻底
行内样式表：通过style属性来指定某个标签的样式，这种方式只适合写简单的样式，而且还会覆盖其他样式
外部样式表：是最为推荐的引入方式，介绍如下
- 优点：使样式和结构完全分离
- 缺点：受浏览器缓存影响，所以修改后不一定能生效

首先创建一个test.html

<!DOCTYPE html>
![](image/（Java高级教程）第四章必备前端基础知识-第二节：CSS/Pasted%20image%2020230117161248.png)<html lang="en">
<head>  <meta charset="UTF-8">  <title>test</title>
</head>
<body>  <div>  你好CSS  </div>
</body>
</html>

建立一个层叠样式表文件style.css

div {  color: red;  font-size: 50px;  font-family: 胡晓波男神体;
}

然后在test.html中通过link引入style.css

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>test</title>  <link rel="stylesheet" href="style.css">
</head>
<body>  <div>  你好CSS  </div>
</body>
</html>

最终效果如下

二：选择器

CSS选择器：使用不同的选择器可以选中HTML中的特定标签，主要分为如下两种

基础选择器：由单个选择器构成
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
复合选择器：由多个基础选择器构成
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器

参考文档：W3CSchool

选择器	例子	例子描述
.class	.intro	选择 class=“intro” 的所有元素。
.class1.class2	.name1.name2	选择 class 属性中同时有 name1 和 name2 的所有元素。
.class1 .class2	.name1 .name2	选择作为类名 name1 元素后代的所有类名 name2 元素。
# id	# firstname	选择 id=“firstname” 的元素。
*	*	选择所有元素。
element	p	选择所有 <p> 元素。
element.class	p.intro	选择 class=“intro” 的所有 <p> 元素。
element,element	div, p	选择所有 <div> 元素和所有 <p> 元素。
element element	div p	选择 <div> 元素内的所有 <p> 元素。
element 选择器">element>element	div > p	选择父元素是 <div> 的所有 <p> 元素。
element+element	div + p	选择紧跟 <div> 元素的首个 <p> 元素。
element1~element2	p ~ ul	选择前面有 <p> 元素的每个 <ul> 元素。
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target=“_blank” 属性的所有元素。
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 “flower” 的所有元素。
[attribute	=value]	[lang
[attribute^=value]	a[href^=“https”]	选择其 src 属性值以 “https” 开头的每个 <a> 元素。
[attribute$=value]	a[href$=“.pdf”]	选择其 src 属性以 “.pdf” 结尾的所有 <a> 元素。
[attribute*=value]	a[href*=“w3schools”]	选择其 href 属性值中包含 “abc” 子串的每个 <a> 元素。
:active	a:active	选择活动链接。
::after	p::after	在每个 <p> 的内容之后插入内容。
::before	p::before	在每个 <p> 的内容之前插入内容。
:checked	input:checked	选择每个被选中的 <input> 元素。
:default	input:default	选择默认的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。
:enabled	input:enabled	选择每个启用的 <input> 元素。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 input 元素。
:fullscreen	:fullscreen	选择处于全屏模式的元素。
:hover	a:hover	选择鼠标指针位于其上的链接。
:in-range	input:in-range	选择其值在指定范围内的 input 元素。
:indeterminate	input:indeterminate	选择处于不确定状态的 input 元素。
:invalid	input:invalid	选择具有无效值的所有 input 元素。
:lang(language)	p:lang(it)	选择 lang 属性等于 “it”（意大利）的每个 <p> 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未访问过的链接。
:not(selector)	:not§	选择非 <p> 元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。
:optional	input:optional	选择不带 “required” 属性的 input 元素。
:out-of-range	input:out-of-range	选择值超出指定范围的 input 元素。
::placeholder	input::placeholder	选择已规定 “placeholder” 属性的 input 元素。
:read-only	input:read-only	选择已规定 “readonly” 属性的 input 元素。
:read-write	input:read-write	选择未规定 “readonly” 属性的 input 元素。
:required	input:required	选择已规定 “required” 属性的 input 元素。
:root	:root	选择文档的根元素。
::selection	::selection	选择用户已选取的元素部分。
:target	# news：target	选择当前活动的 # news 元素。
:valid	input:valid	选择带有有效值的所有 input 元素。
:visited	a:visited	选择所有已访问的链接。

（1）基础选择器

①：标签选择器

标签选择器：根据给定的标签名选择标签

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>test</title>  <link rel="stylesheet" href="style.css">
</head>
<body>  <div>div标签</div>  <div>div标签</div>  <div>div标签</div>  <p>p标签</p>  <p>p标签</p>  <p>p标签</p>
</body>
</html>

div {  color: red;  font-size: 50px;  font-family: 胡晓波男神体;
}  p {  color:blue;  font-size: 50px;  font-family: 禹卫书法行书简体;
}

②：类选择器

类选择器：通过.类名的方式选中具有特定类名的标签

<body>  <div class="normal">div标签</div>  <div>div标签</div>  <div>div标签</div>  <p class="normal">p标签</p>  <p>p标签</p>  <p>p标签</p>
</body>

.normal {  color: red;  font-size: 100px;  font-family: 方正准圆简体;
}

一个类可以被多个标签使用，一个标签也能使用多个类，多个类名要使用空格分割，这种做法可以让代码更好复用

<div class="box red">box, red</div>
<div class="box green">box, green</div>
<div class="box red">box, red</div>

.box {  width: 200px;  height: 150px;
}  .red {  background-color: red;
}  .green {  background-color: green;
}

③：id选择器

id选择器：每个元素都有一个id属性，在当前HTML页面是唯一的，所以可以使用#id名来选中指定id名的标签

<div id="div_tag">有id的div标签</div>
<div>没有id的div标签</div>
<div>没有id的div标签</div>

#div_tag {  color: red;  font-size: 100px;  font-family: 字魂36号-正文宋楷;
}

④：通配符选择器

通配符选择器：使用通配符*选中所有的标签

<div id="div_tag">有id的div标签</div>
<div>没有id的div标签</div>
<div>没有id的div标签</div>

总结

选择器名	语法	作用	特点
标签选择器	`标签名` {}	选出所有具有相同名字的标签	不能差异化选择
类选择器	`.class` {}	选出一个或多个具有相同类名的标签	可以根据需求选择，最常用
id选择器	`#id` {}	能选出具有特定`id`的标签	同一个`id`只能在HTML中出现一次
通配符选择器	`*` {}	选出所有标签	特殊情况下使用

（2）复合选择器

①：后代选择器

后代选择器：又叫做包含选择器，用于选择父标签中的某个子标签，语法格式如下

选择器1和选择器2要使用空格分开
选择器1是父级，选择器2子级，选择时只会选择子级及其后代所选中的标签

选择器1 选择器2 {样式声明}

<ul id="firstul">  <li>  <div>第一个ul中li后代div1</div>  <div>第一个ul中li后代div2</div>  </li>
</ul>  <br>  <ul id="secondeul">  <li>  <div>第二个ul中li后代div1</div>  <div>第二个ul中li后代div2</div>  </li>
</ul>

#firstul li{  color: red;  font-size: 100px;  font-family: 字魂36号-正文宋楷;
}

②：子选择器

子选择器：子选择器只选中子标签而不选择其后代标签，语法格式如下

选择器1和选择2要使用大于号分开

选择器1>选择器2 {样式声明}

<div class="one">  <a href="#">链接1</a>  <p>  <a href="#">链接2</a>  </p>
</div>
<br>
<div>  <a href="#">链接3</a>
</div>

.one>a{  color: red;  font-size: 25px;  font-family: 字魂36号-正文宋楷;
}

③：并集选择器

并集选择器：针对多个不同的选择器应用相同的样式，格式如下

选择器1和选择2要使用逗号分开

标签1, 标签2 {样式声明}

<div>div1</div>
<div>div2</div>
<div>div3</div>  <p>p1</p>
<p>p2</p>
<p>p3</p>  <p class="one">p4</p>
<p id="two">p5</p>

div, p, .one, #two{  color: red;  font-size: 25px;  font-family: 字魂36号-正文宋楷;
}

④：伪类选择器

伪类选择器：用于选定处于特殊状态的标签，主要有以下几种伪类

动态伪类
目标伪类
语言伪类
元素状态伪类
结构伪类
否定伪类

这里我们重点介绍动态伪类，主要有

选择器:link：选择未被访问过的标签
选择器:visited：选择已经被访问过的标签
选择器:hoveer：选择鼠标悬停上的链接
选择器:active：选择活动链接（鼠标按下但是没有弹起）
选择器:focus：选择获取焦点的input表单元素

如下观察标签a的四种状态

<a href="#">小猫</a>

a:link {  color: black;
}  a:visited {  color: green;
}  a:hover {  color:red;
}  a:active {  color: blue;
}

如下，被选中的表单字体会变为红色

总结

选择器名	语法	作用	特点
后代选择器	`选择器1 选择器2` {}	选出所有后代标签	可以是子孙标签
子选择器	`选择器1>选择器2` {}	选出子白浅	只能是子标签，不能是所有后代
并集选择器	`选择器1, 选择器2, ..` {}	选出一组标签	-
伪类选择器	-	选出具有特殊状态标签	-

（Java高级教程）第四章必备前端基础知识-第二节1：CSS概述和选择器相关推荐

SQL SERVER2000教程-第四章创建和维护表第二节数据完整性
是通过实现过程数据完整性和声明数据完整性来强制执行的. 1.Identity : identity属性可以生成唯一标识表中每一行的连续值. (1)格式: Identity (初始值 ,增量) (2)实 ...
计算机基础知识第四章测试,计算机基础知识测试题第四章
第四章电子表格Excel 一．单项选择题 1.利用"文件"菜单打开Excel 2000的文件,一次可以打开多个不连续的文件,方法是先单击一个文件名,然后按住( )键,再单击其他文 ...
第四章 Android WiFi基础知识
系列文章目录第一章国内下载AOSP最新源码的方法第二章下载AOSP WiFi相关的代码第三章将源码导入Android Studio(无需编译idegen) 文章目录系列文章目录前言一 ...
软件设计师教程（四）程序设计语言基础知识
软件设计师教程软件设计师教程(一)计算机系统知识-计算机系统基础知识软件设计师教程(二)计算机系统知识-计算机体系结构软件设计师教程(三)计算机系统知识-计算机体系结构程序设计语言知识软件设 ...
软考高级-系统架构师-第四章系统开发基础知识
本篇博文目录: 一.软件开发方法 1.软件开发生命周期 (1) 软件定义 (2) 软件开发 (3) 软件运行与维护 2.软件开发模型 3.敏捷方法 (1) 敏捷方法的特点 (2) 敏捷方法核心思想 ( ...
第四章程序设计语言基础知识
一. 程序语言的基本概念 1.低级语言与高级语言 1)低级语言:汇编 2)高级语言: 常见的有Java.C.C++.PHP.Pyhton.Delphi 等. 2.编译形式:汇编.解释.编译. 3.程序 ...
韦东山嵌入式教程第四篇Linux驱动基础知识学习笔记（1）——Hello驱动程序
驱动入门--Hello驱动程序 1.怎么写出一个驱动程序? 确定主设备号定义自己的file_operations结构体实现对应的open.read.write函数,填入file_operation ...
Java高级教程3_图形用户界面GUI
张老师的Java高级教程中图形用户界面GUI对应的笔记网络编辑器还要重新排版,提供原始文件下载,先看个概貌 Java高级3_图形用户界面GUI AWT的基础知识 GUI:Graphical User ...
计算机的指令合成为,第二章计算机操作基础知识doc
第二章计算机操作基础知识doc (29页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 23.9 积分第二章计算机操作基础知识第一节计算机基础知识 ...

（Java高级教程）第四章必备前端基础知识-第二节1：CSS概述和选择器