深入理解css 笔记（完）

一个网站，从看起来还可以，到看起来非常棒，差别在于细节。在实现了页面里 某个组件的布局并写完样式之后，不要急着继续，有意识地训练自己，以挑剔的眼光审视刚刚完成的代码。如果增加或者减少一点内边距是不是看起来更好。调一下颜色是不是效果更好，如果在开发设计师详细的视觉稿，实现效果有没有做到完美还原。

  接下来我们讲细节。按钮使用了背景渐变和投影的话，就会有种立体感。还有一种设计大家使用扁平化设计。扁平化设计讲究色彩明快统一，外观简洁明了，意味着少用渐变，阴影和圆角。我们还是讲点基础东西吧

  基础选择器由 4 种。tagname,类型或者标签选择器。它的优先级是 0,0,1 例如 p h1 strong。.class 类选择器。该选择器匹配 class 属性中有指定类名的元素。它的优先级是 0,1,0.#id id 选择器。该选择器匹配拥有指定 id 属性的元素。它的优先级是 1,0,0.*通用选择器。该选择器匹配所有元素。它的优先级是 0,0,0.组合器将多个基础选择器连接起来组成一个复杂选择器。例如.nav-menu li 选择器种，两个基础选择器之间的空格被称作后代组合器。它表示目标元素 li 是一个拥有 nav-menu 类的元素的后代。不过还存在其他几个组合器，它们分别代表了元素的某种特定关系。

  子组合器> 匹配的目标元素是其他元素是其他元素的直系后代。例如.parent>.child。相邻兄弟组合器+匹配的目标元素紧跟在去他元素的后面。例如：p + h2。通用兄弟选择器~匹配所有跟随在指定元素之后的兄弟元素。注意，它不会选中目标之前的目标元素。例如 li.actvie ~li。多个基础选择器可以连起来（不使用空格或者其他组合器）组成一个复合选择器。复合选择器选中的元素将匹配其全部基础选择器。例如.dropdown.is-active 能够选中div class="dropdown is-active"/div,但是无法选中div class="dropdown"/div

  伪类选择器用于选中处于某个特定状态的元素。伪类选择器始终以一个冒号开始。优先级等于一个类选择器:first-child匹配的元素是其父元素的第一个子元素。:last-child匹配的元素是其父元素的最后一个子元素。:only-child匹配的元素是其父元素的唯一一个子元素。没有兄弟元素。:nth-child(an+b)匹配的元素在兄弟元素中间有特定的位置。公式an+b可以从0带入。:ntn-last-child(an+b)类似nth-child(),但不是从一个元素往后数，而是从最后一个元素从前数。:first-of-type类似于：first-child，但不是根据在全部子元素中的位置查找元素，而是根据拥有相同标签名的子元素中的数字顺序查找第一个元素。:last-of-type匹配美中类型的最后一个子元素。:only-of-type该选择器匹配的元素是满足该类型的唯一一个子元素。:nth-of-type(an+b)根据元素在特定类型下的数字顺序以及特定公式选择元素。:nth-last-of-type(an+b)根据元素类型以及特定公式选择元素，从其中最后一个元素往前算，类似:nth-last-chid。:not(selector)匹配的元素不匹配括号内的选择器。括号内的选择器必须是基础选择器。它只能指定元素本身，无法用于排除祖先元素，同时不允许包含另一个排除选择器。:empty匹配的元素必须没有子元素。如果元素包含空格就无法由该选择器匹配，因为空格在dom中属于文本节点。:focus匹配鼠标点击，触摸屏幕或者按tab键导航而获得焦点的元素。:hover匹配鼠标指针正悬停在其上方的元素。:root匹配文档根元素。:disabled匹配已禁用的元素。:enabled匹配已启用的元素，即那些能够被激活或者接受焦点的元素。:checked匹配已经针对选定的复选框，单选按钮或者选择框选项。:invalid根据输入类型中定义，匹配有非法输入值的元素。例如input type="email",值不是一个合法的邮箱地址时。:valid匹配有合法值的元素。:required匹配设置了required属性的元素。:optional匹配没有设置required属性的元素。

  伪元素类似于伪类，但是它不匹配特定状态的元素，俄式匹配在文档中没有直接对应html元素的特定部分。这些选择器以双冒号开头，不多数浏览器也支持单冒号的语法以便向后兼容。伪元素选择器的优先级与类型选择器(0,0,1)相等。:before创建一个伪元素，使其成为匹配元素的第一个子元素。该元素默认是行内元素，可用于插入文字，图片或其他形状。必须指定content属性才能让元素出现.:after创建一个伪元素，使其成为匹配元素的最后一个子元素。:first-letter用于匹配元素的第一个文本字符的样式。:first-line用于指定元素的第一行文本的样式。:selection用于指定用户使用鼠标高亮选择的任意文本的样式。

  属性选择器用于根据html属性匹配元素。其优先级与一个类选择器(0,1,0)相等。[attr]匹配的元素拥有指定属性attr，无论属性值是什么，例如：input[disabled].[attr='value']匹配的元素拥有指定属性attr，且属性值等于指定的字符串值，例如input[type='radio'].[attr^{='value']开头属性选择器。该选择器匹配的元素拥有指定属性attr，且属性值的开头是指定的字符串值，例如：a[href}='https'].[attr='value']结尾属性选择器。该选择器匹配的元素拥有指定属性attr,且属性值的结尾是指定的字符串值，例如:a[href=′value′]结尾属性选择器。该选择器匹配的元素拥有指定属性attr,且属性值的结尾是指定的字符串值，例如:a[href='.pdf']。[attr*='value']包含属性选择器。该选择器匹配的元素拥有指定属性attr,且属性包含指定的字符串值，例如：[class*='sprite-'].[attr~='value']空格分隔的列表属性选择器。该选择器匹配的元素拥有指定属性attr,且属性值是一个分隔的值列表。列表中的某个值等于指定的字符串。如a[rel='author'].上述属性选择器都是区分大小写的。（完）