1. 基本选择器
-
元素选择器：如
选择所有指定的元素。
p { color: blue; } -
类选择器：如 class=""选择所有带有指定类名的元素。
.my-class { color: red; } -
ID选择器：如 id=" " 选择具有指定id的元素。
#my-id { color: green; } -
通配符选择器：选择所有元素(大部分应用中*都是代表着所有)。
* { color: black; }伪类选择器
-
链接伪类：用于链接的不同状态。
a:link { color: blue; } a:visited { color: purple; } -
动作伪类：用户与元素交互时的状态，可修改其颜色等。
a:hover { color: red; } a:active { color: green; } -
结构伪类：基于元素在文档树中的位置。
p:first-child {//第一个 color: blue; } p:last-child {//最后一个 color: green; } p:nth-child(2) {//第二个 color: red; } -
其他伪类：
input:focus {//聚焦 border: 2px solid blue; }当然 还有我们常用的伪类
伪元素选择器
-
::before 和 ::after：在元素内容前后插入内容。
p::before { content: "前缀 - "; color: gray; } p::after { content: " - 后缀"; color: gray; } -
::first-line 和 ::first-letter：样式化元素的第一行或第一个字母。
p::first-line { font-weight: bold; } p::first-letter { font-size: 2em; }简单说说stylus样式
我们都知道，js有预处理器，那么css呢？是的，有这样一种工具，能够预处理我们的样式，提高我们开发的效率和质量。它就是stylus。
要使用它呢，我们需要进行安装。
在项目的终端中输入指令
npm i -g stylus等待片刻安装完成，输出stylus --version若出现stylus版本信息则安装成功。基本使用
我们先创建一个后缀名为styl的文件，然后在该目录下输入以下命令。
stylus xxx.styl -o xxx.css这样就会创建一个css文件，并且你在styl总的代码会进行预编译并且同步到css文件中，大家可以试试。（两者名称可不一样）
下面我们来看一个例子
<div class="container">
<div class="form-block">
<label for="" class="label">
<span>账号</span>
<input class="text" type="text">
</label>
</div>
<div class="form-block">
<label for="" class="label">
<span>密码</span>
<input class="text" type="text">
</label>
</div>
<div class="form-block">
<label for="" class="label">
<span>邮箱</span>
<input class="text" type="text">
</label>
</div>
<div>
<button class="btn">提交</button>
</div>
</div>
我们有这样一个表单 为了显示清楚，把边框加粗了一点
.text:focus
border-color #6244cd
（我只需要这样书写，就可以省很多事了 也降低了犯错的概率。）这里我们为id为text的输入框focus属性添加了一个颜色，当我们点击输入框就可以发现不一样了。
那么我要为整个form-block添加此样式呢？这样吗？
.form-block:focus
background #6244cd
我们会发现并没有效果。为什么呢？ 因为div压根就不能被聚焦。
那怎么办呢 用js吗？大可不必
我们只需要将focus改为focus-within 就会实现效果了。大家动手试试。 那么，如果我们再加上transition，设置一个延迟呢。让它过渡地更加自然一点，动态性更强了。
