<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- c3的兼容性 -->
<!-- /* 浏览器内核 */
/* IE */
/* O */
/* 苹果 */
/* 火狐 */
/* 谷歌 */
/* IE */
/* -ms-transition: ; */
/* O */
/* -o-transition: ; */
/* 苹果 */
/* -webkit-transition: ; */
/* 火狐 */
/* -moz-transition: ; */ -->
<!-- 属性选择器 伪元素选择器 -->
<!-- 相邻兄弟选择器 + -->
<!-- span+div span下面的div -->
<!-- 匹配选择器 ~ -->
<!-- 位于div 后面的所有span元素都会被选中 -->
<!-- div ~ span -->
<!-- 属性选择器 -->
<!-- [attribute]用于选取带有指定属性的元素。 -->
<!-- [attribute=value] 用于选取带有指定属性和值的元素。 -->
<!-- [attribute^=value]匹配属性值以指定值开头的每个元素。 -->
<!-- [attribute$=value]匹配属性值以指定值开头的每个元素。 -->
<!-- [attribute*=value]匹配属性值中包含指定值的每个元素。 -->
<!-- [attribute~=value]用于选取属性值中（包含）指定词汇的元素，还可以空格为分隔符。 -->
<!-- [attribute|=value]用于选取带有以指定值（开头）的属性值的元素，还可以连字符为分隔符。 -->
<!-- ::selection 文本被选中时改变样式 -->
<!-- 整体结构选择器 -->
<!-- p:last-child p标签中的最后一个（同一父元素下） -->
<!-- 当p不再是整体结构中的最后一个元素 那么此句不会生效 -->
<!-- p:first-child p标签中的第一个（同一父元素下） -->
<!-- 标签结构类型 -->
<!-- 当h1不再是整体结构中的最后一个元素 那么此句也会生效 -->
<!-- .content2 h1:last-of-type -->
<!-- .content2 h1:first-of-type -->
<!-- 指定子元素 -->
<!-- 2n偶数 2n+1奇数 odd奇数 even偶数 -->
<!-- :nth-child(n) 对指定序号的子元素设置样式（从前往后数） -->
<!-- :nth-last-child(n) 对指定序号的子元素设置样式（从后往前数）。参数同上。 -->
<!-- :nth-of-type(n) 匹配指定序号的同一种类型的子元素（从前往后数） -->
<!-- :nth-last-of-type(n) 匹配 指定序号的同一种类型的子元素（从后往前数）。参数同上。 -->
<!-- 其他伪类选择器 -->
<!-- - :root：将样式应用到页面的根元素中。root选择器就是将样式应用到根元素中。在整个HTML页面中，指的就是整个“html”部分。 -->
<!-- - :empty 指定当元素内容为空白时使用的样式。 -->
<!-- - :not(selector)排除selector选择器选中的元素，不对它们应用样式解析。 -->
<!-- - :target 对页面中某个target元素指定样式，该样式只在用户单击了页面中的链接，并且跳转到target元素后生效。 -->
<!-- 表单伪类选择器 -->
<!-- - :disabled 指定当前元素处于不可用状态时的样式。 -->
<!-- - :enabled 指定当前元素处于可用状态时的样式。 -->
<!-- - :checked 指定表单中单选框或复选框处于选中状态时的样式。 -->
<!-- ::selection 文本被选中时改变样式 -->
<!-- 内容追加伪元素 -->
<!-- - ::before:向当前的元素前面追加内容(创建一个伪元素，其将成为匹配选中的元素的第一个子元素) -->
<!-- - ::after:向当前的元素内容后面追加内容(创建一个伪元素，作为已选中元素的最后一个子元素) -->
<!-- JS新增一个选择器 -->
<!-- 获取一个元素 -->
<!-- document.querySelector() 可以是class id 元素 属性 -->
<!-- 多重背景 -->
<!-- background-image: url() ,url(); -->
<!-- 线性渐变 -->
<!-- background-image: linear-gradient(to left bottom, pink, skyblue, springgreen); -->
<!-- 从left到bottom, -->
<!-- 径向渐变 -->
<!-- background-image: radial-gradient(#00FFFF, #00FA9A, #000000); -->
<!-- 从中心开始 -->
<!-- 透明度 -->
<!-- 0-1 -->
<!-- opacity: 0; -->
<!-- 过滤 -->
<!-- grayscale设置灰度 -->
<!-- filter: grayscale(100%); -->
<!-- blur 设置模糊 -->
<!-- filter: blur(200px) -->
<!-- hsla 表示`色相-饱和度-亮度`（Hue-saturation-lightness）模式。 -->
<!-- hsla(颜色值0-360, 饱和度0%-100%,亮度0%-100%, 透明度0-1) -->
<!-- background-color: hsla(0, 100%, 50%, 1); -->
<!-- calc() 计算 -->
<!-- width: calc(100% - 100px); -->
</body>
</html>
07-12
789
789
07-12
64
64
07-12
127
127
07-08
297
297
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
