目录

@import 指令 ⚠️ 需要谨慎使用

现代建议: 开发时使用预处理器@import，生产环境用构建工具合并CSS

  • 引入别的 css 脚本

/* ⚠️ 性能问题 - 阻塞并行下载 */
@import url("base-text.css");
@import url("only-screen.css");

问题:

  1. 阻塞并行下载，影响页面加载速度

  2. 增加HTTP请求数量

  3. 可能导致FOUC (无样式内容闪烁)

现代解决方案:

// ✅ Sass/Less中使用 - 编译时合并
@import "base-text";
@import "only-screen";
<!-- ✅ HTML中直接链接 - 支持并行下载 -->
<link rel="stylesheet" href="base-text.css">
<link rel="stylesheet" href="only-screen.css">

css 选择器

.class {
}
类选择器 #id {
}
id 选择器 h1 {
}
标签选择器 h3.class {
}
交集选择器,
h3 和.class之间没有空格 h3,
class {
}
并集选择器 .class h3 {
}
后代选择器，class 标签里面所有的 h3 标签 .class > h3 {
}
子选择器，class 标签里面所有 子级 h3 标签 h1[src] {
} /*匹配所有拥有class属性的h1标签*/

a[href][title] {
} /*匹配同时拥有href和title属性的a标签*/

a[href="http://www.baidu.com"] {
} /*属性值匹配*/

a[href="http://www.baidu.com"][title="baidu"] {
} /*同时满足...*/

a[class^="icon"] {
} /*查询class以icon开头的a元素*/

a[href$="pdf"] {
} /*查询href以pdf结尾的a元素*/

a[title*="more"] {
} /*查询title中包含more字段的元素*/

div:not([id="footer"]) {
} /* 除了div的id为footer的选择器 */

div:empty {
} /* 选择的是里面没有内容的div元素 */

ol > li:first-child {
} /* 先选中ol下所有li子元素,再取第一个 */
ol > li:last-child {
} /* 匹配到的列表中最后一个元素 */
ol > li:nth-child(3) /* 匹配第3个li */
ol > li:nth-child(2n+1) /* 匹配奇数项　*/
ol > li:nth-child(2n) /* 匹配偶数项 */
ol > li:nth-last-child(n) /* 与 nth-child 一样，不同的是从最后一个元素开始计算 */
input[type="text"]:enabled {
} /*可用性选择器*/
input[type="text"]:disabled {
} /*不可用性选择器*/
input[type="checkbox"]:checked {
} /*被选中状态的单选或复选框*/
input[type="text"]:read-only {
} /* 只读属性选择器　*/
input[type="text"]:read-write {
} /* 可读写属性选择器　*/

现代CSS选择器 🚀 2018年后新增

:is() 选择器 - 简化复杂选择器

/* ✅ 现代写法 - 简洁清晰 */
:is(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  color: var(--heading-color);
}

:is(.card, .panel, .modal) :is(h1, h2, h3) {
  font-weight: bold;
}

/* ❌ 传统写法 - 冗长重复 */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  color: var(--heading-color);
}

.card h1, .card h2, .card h3,
.panel h1, .panel h2, .panel h3,
.modal h1, .modal h2, .modal h3 {
  font-weight: bold;
}

:where() 选择器 - 零权重选择器

/* 零权重，方便覆盖 */
:where(ul, ol) :where(ul, ol) {
  margin-block: 0;
}

/* 重置样式常用 */
:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:has() 选择器 - 父选择器

/* ✅ 根据子元素选择父元素 */
.card:has(.urgent) {
  border-color: red;
  background: #fff5f5;
}

.form:has(input:invalid) {
  border: 2px solid red;
}

.article:has(> img) {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 16px;
}

/* 选择包含链接的段落 */
p:has(a) {
  color: #0066cc;
}

:not() 选择器增强

/* 增强的:not()选择器，支持复杂选择器 */
.nav-item:not(:first-child, :last-child) {
  border-left: 1px solid #ccc;
}

/* 选择没有class的div */
div:not([class]) {
  background: #f0f0f0;
}

高效的 css 选择器

  1. div #myid 错误 ，改为 #myid,解释：id 选择器为唯一的,前面加上标签反而累赘

  2. 使用 class 代替层级关系

伪类

tr:hover {
  background: yellow;
}
input[type="submit"]:active {
  background: yellow;
}
input:focus {
  background: yellow;
}

:before 和 :after 在元素内部的前后插入内容

// 清除浮动
.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  zoom: 1;
}

// 前后加距离
ol.paginatioin a[rel="prev"]:before {
  content: "";
  padding-left: 0.5em;
}
ol.paginatioin a[rel="next"]:after {
  content: "";
  padding-right: 0.5em;
}

鼠标选中的文本的状态

input:selection {
}

选择器的权值

  • 当两个选择器匹配到了同一个元素，并且为这个元素设置了同一个属性如 border，浏览器会使用权值高的那个选择器

p {
  color: red;
} /*权值为1*/
p span {
  color: green;
} /*权值为1+1=2*/
.warning {
  color: white;
} /*权值为10*/
p span.warning {
  color: purple;
} /*权值为1+1+10=12*/
#footer .note p {
  color: yellow;
} /*权值为100+10+1=111*/

层叠特性

  • 在同一权值下，后声明的属性会覆盖已经声明的同一属性

继承

  • 子元素继承父元素 css 属性的特性

  • 可继承的 css 元素如下

color:#eee;
font:
font-style
font-variant:
font-weight:bold
font-size
font-family:
font-stretch:
font-size-adjust:
visibility: visible | hidden | collapse  /* 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。*/

list-style
list-style-image
list-style-position
list-style-type

table-layout
border-collapse
border-spacing
caption-side
empty-cells

text-decoration-skip 检索或设置对象中的文本装饰线条必须略过内容中的哪些部分
text-underline-position 检索或设置对象中的下划线的位置。
text-shadow         设置或检索对象中文本的文字是否有阴影及模糊效果

text-transform 检索或设置对象中的文本的大小写
white-space    设置或检索对象内空格的处理方式
tab-size       检索或设置对象中的制表符的长度
word-wrap      设置或检索当内容超过指定容器的边界时是否断行
overflow-wrap  设置或检索当内容超过指定容器的边界时是否断行
word-break     设置或检索对象内文本的字内换行行为
text-align     设置或检索对象中内容的水平对齐方式
text-align-last 设置或检索一个块内的最后一行 包括块内仅有一行文本的情况，这时既是第一行也是最后一行,或者被强制打断的行的对齐方式
text-justify   设置或检索对象内调整文本使用的对齐方式
word-spacing   检索或设置对象中的单词之间的最小，最大和最佳间隙
letter-spacing 检索或设置对象中的字符之间的最小，最大和最佳间隙
text-indent    检索或设置对象中的文本的缩进
vertical-align 设置或检索对象内容的垂直对其方式
line-height    检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离
text-size-adjust 检索或设置移动端页面中对象文本的大小调整

cursor:
zoom:
direction:ltr|rtl;

设计好 css 代码的结构

按顺序书写以下结构

主体样式

  1. reset 样式

  2. 链接

  3. 标题

辅助样式

  1. 表单

  2. 通知与错误

  3. 一致的条目

页面结构

  1. 标题,页脚,导航

  2. 布局

  3. 其他页面结构元素

页面组件

  1. 各个页面

特殊覆盖样式

建立样式指南表

建立包含这个站点可能出现的每种排版和布局组合的页面

a 链接

  1. 只能用于 GET 请求，绝对不要用于 POST 请求

margin

  • 行内元素之间的水平 margin 当两个行内元素紧邻时，它们之间的距离为第一个元素的右 margin 加上第二元素的左 margin。

  • 两个竖直排列的块级元素的距离,是两者中的 margin 较大者。

  • 嵌套盒子,子块的 margin 以父块的 content 为参考进行排列

  • margin 设为负值会使设为负数的块向相反的方向移动，甚至会覆盖在另外的块上。

样式的继承

有些属性对一个标签声明后，它会被该标签的所有后代元素继承。

所有元素可继承：visibility,cursor

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

块状元素可继承：text-indent 和 text-align

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

表格元素可继承：border-collapse

不可继承的：display、margin、border、padding、background、height、min-height、
max- height、width、min-width、max-width、overflow、position、left、right、
top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after
page-bread-before 和 unicode-bidi

样式的权值

标签的权值为 1，类选择符的权值为 10，ID 选择符的权值最高为 100

权值决定哪条 css 起作用

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
p{color:red!important;} /* !important 权值最大*/