# Pointer-Event 禁用事件
给这个元素设置这个样式后不会再有任何的点击事件触发
<style>
.btn {
pointer-events: none;
}
</style>
<body>
<div class="btn" id="btn">
点击
</div>
</body>
<script>
var btn = document.getElementById("btn");
btn.onclick = function () {
// 点击事件不在触发
console.log(11);
};
</script>
# 用 Caret-Color 来自定义光标的样式
<style>
input {
/* input 输入框的颜色会变成红色 */
caret-color: red;
}
</style>
<body>
<input type="text" />
</body>
# 用 User-Select 来禁用文本选中
body {
user-select: none; //页面中的文本不能被选中
}
# css 伪类及伪元素的使用
# 伪类
伪类更多的定义的是状态，如:hover，或者说是一个可以使用 CSS 进行修饰的特定的特殊元素，如:first-child 伪类使用一个冒号: 常见伪类：
- :hover
- :active
- :focus
- :visited
- :link
- :lang
- :first-child
- :last-child
- :not
# 伪元素
伪元素简单来说就是不存在于 DOM 文档树中的虚拟的元素，它们和 HTML 元素一样，但是你又无法使用 JavaScript 去获取，如:before 伪元素使用两个冒号:: 常见伪元素：
- ::before
- ::after
- ::first-letter
- ::first-line
# 用:valid 和:invalid 来做表单即时校验
html5 丰富了表单元素，提供了类似 required,email,tel 等表单元素属性。同样的，我们可以利用:valid 和:invalid 来做针对 html5 表单属性的校验。
- :required 伪类指定具有 required 属性的表单元素
- :valid 伪类指定一个通过匹配正确的所要求的表单元素
- :invalid 伪类指定一个不匹配指定要求的表单元素
# 用:target 来实现折叠面板
TIP
:target 是文档的内部链接，即 URL 后面跟有锚名称 #，指向文档内某个具体的元素。
利用 :target 的特性可以实现以前只能使用 JavaScript 实现的显示隐藏或者 Collapse 折叠面板
<div class="t-collapse">
<a class="collapse-target" href="#modal3">target 3</a>
<div class="collapse-body" id="modal3">
<a class="collapse-close" href="#">target 3</a>
<p>
:target 是文档的内部链接，即 URL 后面跟有锚名称
#，指向文档内某个具体的元素。
</p>
</div>
</div>
.t-collapse {
position: relative;
}
.t-collapse > .collapse-target {
display: block;
}
.t-collapse > .collapse-body {
display: none;
}
.t-collapse > .collapse-body:target {
display: block;
}
.t-collapse > .collapse-body:target .collapse-close {
display: block;
border-bottom: 1px solid #ddd;
}
.t-collapse > .collapse-body .collapse-close {
display: none;
position: absolute;
top: 0;
width: 100%;
left: 0;
}
# Stickey Stack 实现吸顶效果
给要吸顶的元素设置 position:stictty 就可以达到吸顶效果
<style>
.box {
height: 200px;
width: 100px;
border: 1px solid #ccc;
overflow-y: auto;
}
.nav {
position: sticky;
top: 0;
width: 100%;
background: #000;
color: #fff;
}
</style>
<body>
<div class="box">
<ul>
<li class="nav">A</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li class="nav">B</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li>2222</li>
<li class="nav">C</li>
<li>3333</li>
<li>3333</li>
<li>3333</li>
<li>3333</li>
<li>3333</li>
<li>3333</li>
<li>3333</li>
<li>3333</li>
<li>3333</li>
<li>3333</li>
<li>3333</li>
</ul>
</div>
</body>
# Scroll Snap 滑动操作
可以控制滑动时滑动效果（是否一个滑块滑动结束来显示下一个滑块） 核心代码：
/* 父元素 */
scroll-snap-type: x mandatory;
/* 子元素 */
scroll-snap-align: center;
全部代码
<style>
.box {
text-align: left;
width: 250px;
height: 250px;
overflow-x: auto;
display: flex;
box-sizing: border-box;
border: 1px solid #000;
}
.li {
flex: 0 0 250px;
width: 250px;
background-color: #663399;
color: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: center;
}
</style>
<body>
<div class="box" style="scroll-snap-type: x mandatory;">
<div class="li">1</div>
<div class="li">2</div>
<div class="li">3</div>
<div class="li">4</div>
</div>
</body>
# 有用但被忽略的选择器
用:not 来排除其他选择器
用::selection 来美化选中文本
用::placeholder 来美化占位符