HTML基础学习02_CSS基础属性

内容概述

一、文本属性

1.text-decoration

设置文本的修饰外观（下划线、上划线、贯穿性、删除线或者闪烁

None 无装饰线可去除 a 默认下划线
Underline ：下划线
overline:上划线
Line-through 中划线
letter-spacing: 10px; 字母间的间距
word-spacing: 10px;单词间的间距

2.text-transform 大小写转换

capitalize 首字符大写
uppercase 所有字符转换成大写
Lowercase 所有字符转换成小写
none 阻止所有字符的大小写被转换

3. text-indent 首行缩进

4.text-align 文本对齐方式

left 左对齐
right 右对齐
center 居中对齐
justify 最后一行没有效果文字向两侧对齐，对最后一行无效
justify-all 和justify一致，但是强制使最后一行两端对齐

5. font-size 设置字体大小

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n42" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit; background-repeat: inherit;">/* <absolute-size>，绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* <relative-size>，相对大小值 */
font-size: larger;
font-size: smaller;

/* <length>，长度值 */
font-size: 12px;
font-size: 0.8em;

/* <percentage>，百分比值 */
font-size: 80%;

font-size: inherit;</pre>

6. font-family 设置字体 Font-weight 文本粗细

Font-weight :字体的粗细程度一些字体只提供 normal 和 bold 两种值也可跟数字默认 400

注意： font-weight: 700; 后面不可跟px

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n48" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;">normal</pre>

正常粗细。与400等值
bold 加粗。与700等值。
font-weight 数值采取离散式定义（使用 100 的整倍数）。数值为实数，非 100 的整数倍的值将被四舍五入转换为 100 的整倍数，遇到 *50 时，将向上转换，如 150 将转换为 200

7. font-style

italic 斜体（前提是： font-family 支持文字倾斜）
oblique 斜体（让文字倾斜）

8.font-variant 所有小写字母变大写字母按小写字母显示

normal 默认值。浏览器会显示一个标准的字体
small-caps 小型大写字母的字体
inherit 规定应该从父元素继承 font-variant 属性的值。

[图片上传失败...(image-4ebd26-1641522383945)]

9.line-height 行高

10 字体的缩写

font-style : font-variant: 字体变化 font-weight: 字体粗细 font-size:/ line-height: font-family:

font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体

简写的时候需要注意：

必须包含以下值： font-size font-family
可以选择性包含以下值： font-styley font-variant font-weight line-height
font-style，font-variant，font-weight 必须在font-sitze之前
line-height必须在font-size后用/ 分割 eg 16px/30
Font-fimily必须最后指定

/* font: 40px/2 "Fira Sans", serif; */

/* font: italic 1.2em "Fira Sans", serif; */

/* font: oblique small-caps 40px/60px serif; */

/* font: 24px sans-serif; */

三、选择器

通配选择器 *
元素选择器
类元素选择器
ID选择器
属性选择器

按照给定的属性，选择所有匹配的元素。 语法：[attr] 只要有attr属性

[attr=value]

[attr~=value]

[attr|=value] 恰好等于 value 或者以单词value 开头后紧跟连字符 -

[attr^=value] 以 value开头

[attr$=value] 以value 结尾

[attr*=value] 包含value 例子：[autoplay] 选择所有具有 autoplay 属性的元素（不论这个属性的值是什么
后代选择器：（空格）组合器选择前一个元素的后代节点。

/* 选中div 底下的span 包括直接和间接 */

div span{

color: red;

}
子选择器： > 组合器选择前一个元素的直接子代的节点

div > span{

color: red;

}
邻兄弟选择器：+ 组合器选择相邻元素，即后一个元素紧跟在前一个之后，并且共享同一个父节点。

/* div 紧挨着的p */

div + p{

color: red;

}
全兄弟选择器：~ 组合器选择兄弟元素，也就是说，后一个节点在前一个节点后面的任意位置，并且共享同一个父节点。

/* div 全兄弟选择器 p */

div ~ p{

color: red;

}
交集选择器 :同时符合两个

/* div 和 class 为.one */

div.one{

color: red;

}
并集选择器：

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n222" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;">, 是将不同的选择器组合在一起的方法，它选择所有能被列表中的任意一个选择器选中的节点。
语法：A, B</pre>
伪选择器

伪类

: 伪选择器支持按照未被包含在文档树中的状态信息来选择元素。 例子：a:visited 匹配所有曾被访问过的 `` 元素。

伪元素

:: 伪选择器用于表示无法用 HTML 语义表达的实体。 例子：p::first-line 匹配所有 `` 元素的第一行。

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n434" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; caret-color: rgb(51, 51, 51); color: rgb(51, 51, 51); font-style: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-indent: 0px; text-transform: none; widows: auto; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; text-decoration: none; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选中div 底下的span 包括直接和间接 /
/ div span{
color: red;
} /
/ 后代选择器 3 4 5/
/ div span{
color: red;
} */

/* 前一个元素的直接子代节点 3 4 5 /
/ div > span{
color: red;
} */

/* 兄弟节点具有共同父节点 div 后紧挨着span 7 /
/ div + span{
color: red;
} */

/* 兄弟全节点后节点在前一个节点后面的任意位置 78/
/ div ~ span{
color: red;
} */

/* 交集 234568 /
/ div.one{
color: red;
} */

/* 后代选择器 6 /
/ div .one{
color: red;
} */

/* 并集选择器，隔开 234568 79 下面只要符合其中一个就满足条件 */
div, .one , [title="test"]{
color: red;
}

</style>
</head>
<body>
<span>文字内容1</span>
<div class="one"> 文字内容2
<span>
文字内容3
<p>
文字内容4
</p>
</span>

四、伪类（pseudo-class）和伪元素

1. 常见的伪类

动态伪类：顺序有要求

使用时特别注意：：hover 必须放在：link 和：visited后面才能完全生效

：active必须放在： hover后面才能完全生效

女朋友看到 LV后 haha 大笑

女朋友看到LV后疯（：focus)了样的哈哈大笑
- ：link a:link 未访问的状态
- :visited a:visited 已访问的状态
- :hover 鼠标放在链接上的颜色（也可放在别的元素上）
  
  strong:hover{
  
  }
- :active 激活的链接（鼠标在链接上长按住未松开）
- :focus 获取焦点
  
  去掉a元素的焦点状态
  
  a:focus{
  
  outline: none;
  
  }
  
  <a href="" tabindex="-1"></a>
  
  tabindex 可以调整tab选中元素的顺序
  
  动态伪类eg:
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n438" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
/* 未访问 /
a:link{
color: red;
}
/ 已访问 /
a:visited{
color: green;
}
/ 手指放上去 /
a:hover{
color: #600;
}
/ 活跃的时候手指点下去未松手 */
a:active{
color: rgb(34, 34, 34);
}

</style>

</head>
<body>
<a href="#"> 百度一下</a>
</body>
</html></pre>
目标伪类：：taget

目标伪类：target eg

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n449" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
:target{
color: red;
}
</style>
</head>
<body>
<a href="#title1">标题1</a>
<a href="#title2">标题2</a>
<a href="#title3">标题3</a>

 <h2 id="title1">标题1</h2>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>
 <p>我是内容1</p>

 <h2 id="title2">标题2</h2>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>
 <p>我是内容222</p>



 <h2 id="title3">标题3</h2>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>
 <p>我是内容3</p>

</body>
</html></pre>

语言伪类：：lang()
元素状态伪类: :disabled

Eg：

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n455" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<style>
/* button[disabled]{
color: red;
} */
:disabled{
color: red;
}

</style>

</head>
<body>

<button disabled>我是按钮</button>
<button >我是按钮</button>

</body>
</html></pre>
结构伪类
- :nth-child(1) 选中第几个子类
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n471" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选中子元素的第三个 /
/ :nth-child(3){
color: red;
} */

/* 选中子元素的自然数 /
/ :nth-child(n){
color: red;
} */

/* 倒数第三个 /
/ :nth-last-child(3){
color: red;
} */

/* 同类型下第都3个忽略别的元素 */
:nth-of-type(3){
color: red;

}

</style>
</head>
<body>
<div>

<p>文字内容1</p>
<p>文字内容2</p>
<p>文字内容3</p>
<p>文字内容4</p>
<p>文字内容5</p>
<p>文字内容6</p>
<p>文字内容7</p>
<p>文字内容8</p>
<p>文字内容9</p>
</div>

</body>
</html></pre>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n474" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;"> /* 父元素中唯一子元素 */
span:only-child{
color: red;
}</pre>

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n475" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> /* 是父元素中唯一的这种类型的子元素 */
:only-of-type{
color: red;
}</pre>

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n480" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> /* 元素为空 */
:empty{
height: 20px;
columns: red;
}</pre>

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n481" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> /* 否定伪类除啦html 除啦body 除啦div之外的所有元素*/
:not(html):not(body):not(div){
color: red;
}
</pre>
常见的伪元素
- :first-letter 第一个字母
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n493" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> p::first-letter{
font-size: 50px;
}</pre>
- <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n503" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 0px; width: inherit; background-position: inherit; background-repeat: inherit;">第一行
  p::first-line{
  font-size: 50px;
  }</pre>
- ：:before 在某元素前加内容
- ：：after 在后边加元素
  
  <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n512" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> span::before{
  content: "1323";
  color: red;
  }</pre>

五、 Emment元素

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

</html>

</pre>

div#title id属性 #
div.box 类 .
上一级 ^ div#main>div.box+p.p1+span.title^div.footer>span
属性内容带数字 {内容 $} eg:div>p{内容$ }*5
css隐式

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n548" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
/* w200 */
width: 100px;

/* h200 */
height: 200px;

/* m20 */
margin: 20px;

/* p20 */
padding: 20px;

/* fz20 */
font-size: 20px;

/* fw700 /
font-weight: 700;
/ lh50px 行高需要加px */
line-height: 50px;

}
</style>
</head>
<body>

<div></div>

</body>
</html></pre>
隐式写法 eg

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n538" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit; background-repeat: inherit;"> lv可以不写一样的效果
li>lv.item ${列表元素$ }*5
.container 会自动补齐 div
<div class="container"></div>

</pre>

最后编辑于：2022.01.14 10:42:28

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,602评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,442评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,878评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,306评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,330评论 5赞 373
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,071评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,382评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,006评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,512评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,965评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,094评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,732评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,283评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,286评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,512评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,536评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,828评论 2赞 345