HiDocs

1.:placeholder-shown

":placeholder-shown" 是 CSS 中的一个标准伪类，而不是 Ant Design 特有的选择器。

":placeholder-shown" 伪类用于选中表单元素（如 input、textarea 等）中的占位符文本显示时的状态。当用户未输入任何内容或未与表单元素交互时，占位符文本会显示在表单元素中。

下面是一个示例，演示如何使用 ":placeholder-shown" 伪类为占位符文本显示状态设置样式：

css

input:placeholder-shown {
  /* 占位符显示时应用的样式 */
  color: gray;
  font-style: italic;
  text-overflow: ellipsis;
}

在上述示例中，当输入框中的占位符文本显示时，文本颜色将变为灰色，并且字体样式将变为斜体，超出的文本变成省略号。

2.:not(:last-child)

如果你想选择除了特定元素以外的其他元素，你可以使用 ":not" 伪类结合其他选择器来实现。

1.使用 ":not(:last-child)" 选择器来为除最后一个输入框之外的所有输入框应用样式：

css

.item:not(:last-child) {
  /* 应用于除最后一个输入框之外的所有输入框的样式 */
  margin-bottom: 10px;
  border: 1px solid gray;
}

2.使用 ":not" 伪类来选择除了具有类名 "exclude-element" 的元素之外的其他元素：

css

.item:not(.exclude-element) {
  /* 应用于除具有类名 "exclude-element" 的元素之外的其他元素的样式 */
  color: red;
  font-weight: bold;
}

3.选择除了第二个元素以外的其他元素：

css

.item:not(:nth-child(2)) {
  /* 应用于除第二个元素以外的其他元素的样式 */
  color: red;
  font-weight: bold;
}

4.使用 ":not" 伪类来选择除了类型为 "range" 的 input 元素以外的其他 input 元素：

css

input:not([type='range']) {
  /* 应用于除类型为 "range" 的 input 元素以外的其他 input 元素的样式 */
  border: 1px solid gray;
  padding: 5px;
}

3.text-align: inherit

"text-align: inherit" 是一个 CSS 属性，用于继承父元素的文本对齐方式。

当应用于一个元素时，该属性会将元素的文本对齐方式设置为继承自其父元素的值。如果父元素没有显式地设置文本对齐方式，那么子元素将继承默认的文本对齐方式。

以下是一个示例，展示如何使用 "text-align: inherit" 属性：

scss

.parent {
  text-align: center;
  .child {
    text-align: inherit; /* 继承父元素的文本对齐方式 */
  }
}

4.input[type=“range”]

type="range" 是 HTML 中 <input> 元素的一种类型属性，用于创建一个滑动条（range slider）的输入控件。

以下是一个示例，展示一个使用 type="range" 的 <input> 元素：

html

<input type="range" min="0" max="100" step="1" value="50">

效果：

5.:focus动态伪类

:focus 是 CSS 中的一个动态伪类（Dynamic Pseudo-class）。动态伪类用于匹配元素在特定状态下的样式。

:focus 伪类用于匹配当前获得焦点（被用户选中或通过键盘焦点导航选中）的元素。当一个元素处于焦点状态时，可以应用特定的样式规则，以突出显示或改变元素的外观。

以下是一个示例，展示如何使用 :focus 伪类来定义焦点状态下的样式：

css

input:focus {
  border-color: blue;
  outline: none;
}

可以使用 :focus 的元素都有什么？

可以使用 :focus 伪类的元素主要是那些具有焦点行为的交互式元素。以下是一些常见的具有焦点行为的元素：

输入框元素 (<input>)：包括文本输入框、密码输入框、数字输入框等。
文本区域元素 (<textarea>)：用于多行文本输入的区域。
可编辑元素 (contenteditable)：设置为可编辑状态的元素，如 <div>、<p> 等。
链接元素 (<a>)：通过键盘焦点导航时，可以使链接元素处于焦点状态。
按钮元素 (<button>)：包括普通按钮、提交按钮、重置按钮等。
下拉列表元素 (<select>)：包括单选下拉列表和多选下拉列表。
多选框元素 (<input type="checkbox">)：用于选择多个选项。
单选框元素 (<input type="radio">)：用于单选一个选项。

需要注意的是，对于一些非交互性的元素，如 <div>、<span> 等，它们本身不具备焦点行为，因此 :focus 伪类在这些元素上将不会匹配到任何样式。

实例：实现一个 input 框，鼠标放上去显示蓝色边框，鼠标点击后显示蓝色边框和光晕，鼠标点击别的地方消除蓝色边框和光晕

html

<head>
  <style>
    #myInput:hover {
      border-color: blue;
      transition: border-color 0.3s;
    }

    #myInput:focus { /*:focus可以实现很好的效果*/
      outline: none;
      border-color: blue;
      box-shadow: 0 0 5px blue;
    }
  </style>
</head>

<body>
  <input type="text" id="myInput">
</body>

6.pdf 转换为 md

要将PDF转换为Markdown，你需要使用专门用于PDF提取和转换的工具或服务。这些工具采用各种技术，如光学字符识别（OCR），从PDF中提取文本和格式信息，并将其转换为Markdown。

请记住，将PDF转换为Markdown并不总是一种直接的过程，输出结果可能需要进行一些调整和修正。

在线工具：https://www.zamzar.com/、https://smallpdf.com/cn ——> 不好用，很难转换

pdf到word：https://pdf2doc.com/、https://xpdf.cn

pdf 去水印：大宁工作室 —— 公众号

最终流程：大宁工作室去水印 ——> https://xpdf.cn转换为 word ——> https://www.zamzar.com/ 转换为 markdown

但是效果并不好，需要自己调整

1.:placeholder-shown ​

2.:not(:last-child) ​

3.text-align: inherit ​

4.input[type=“range”] ​

5.:focus动态伪类 ​

6.pdf 转换为 md ​