[attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
[attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素 [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。 可以使用+号代表相邻元素 :not() 伪类 还有一种比较常用的场景就是搭配:not() 伪类，完成一些判断检测性的功能。譬如下面这个选择器，就可以选取所有没有 [href] 属性的 a 标签， a:not([href]){ border: 1px solid red; } 角标功能 这里有一个小知识点，伪元素的 content 属性，通过 attr(xxx)，可以读取到对应 DOM 元素标签名为 xxx 的属性的值。 <div count=“5“>Message</div> div { position: relative; width: 200px; height: 64px; } div::before { content: attr(count); ... }
css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度， 除了vw和vh外，还有vmin和vmax两个相关的单位：vh vw较小值 较大值
p:first-of-type 选择属于其父元素的首个元素 p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素 p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素 p:nth-of-type(2)选择属于其父元素的第二个
p子元素 :enabled :disabled 表单控件的禁用状态。 :checked 单选框或复选框被选中。 用
Font-Size：0来清除间距 inline-block的元素之间会受空白区域的影响，也就是元素之间差不多会有一个字符的间隙。 如果在同一行内有4个25%相同宽度的元素，会导致最后一个元素掉下来 你可以利用元素浮动float，或者压缩html，清除元素间的空格来解决。 但最简单有效的方法还是设置父元素的font-size属性为0。
调试小技巧 1 但如果你在寻找一种更快捷的方法仅使用开发者工具让元素可见，可以遵循以下步骤： 打开开发者工具 打开 Sources 面板 执行用户操作让对象可见（例如鼠标悬停） 在元素可见的时候按下 F8（与“暂停脚本执行”按钮相同） 点击开发者工具左上角的“选取元素”按钮 点击页面上的元素 2 元素查找 CTRL + F 或者 CMD + F）在 Elements 面板搜索一个元素。可以是任意合法的 CSS 选择器。查找功能将告诉你选择器是否与任何元素匹配。 3 对比度 首先，开发者工具有查看可访问性功能，当你在 Styles 面板看到 Color 属性值时，你可以点击颜色值旁边的方块打开颜色采集器。 在颜色采集器里面，你将看到对比度选项指示你所选择的文本颜色搭配背景是否有可访问的对比度。 4 切换颜色值语法 最后，在开发者工具中一个鲜为人知的小知识是在查看颜色值时你可以切换颜色值的语法。 默认情况下，Styles 面板会显示 CSS 里写的颜色的语法。 但是开发者工具允许你按住 shift，点击颜色值左边的小方块，在 hex、RGBA 以及 HSLA 之间切换颜色值的语法： 5 直接编辑盒模型 如果你审查了页面上的一个元素，请在右侧面板单击 Styles 面板旁的 Computed 面板。你将看到该元素的可视化盒模型图示，上面有各部分的数值： 可以通过双击任意编辑它们的值，所做的任何更改都会以与在 Styles 面板中编辑 CSS 时相同的方式反映在页面上。
