CSS选择器（CCS第三版）

什么是选择器？CSS选择器使样式找到应用它的对象。简单选择器（Simpleselectors）是最常用的选择器，也是日常开发中最基本的选择器。元素选择器（Typeselector）是HTML元素的选择器，用于查找指定的HTML元素。一个{颜色：蓝色；}p{颜色：黑色；}通用选择器（UniversalSelector）通用选择器可以设置所有的HTML元素，用*表示。*{保证金：0；}属性存在和值选择器类型描述[title]选择所有具有title属性的元素。[title="baidu"]选取所有title属性值为"baidu"的元素。[title~="baidu"]选取title属性值中出现的以空格分隔的“baidu”元素。[title^="baidu"]选取所有title属性值以"baidu"开头的元素。[title$="baidu"]选取所有title属性值以“baidu”结尾的元素。[title*="baidu"]选取所有title属性值包含字符串“baidu”的元素。and[title|="baidu"]：选取所有title属性值等于“baidu”或以“baidu-”开头的元素。类选择器为HTML元素中具有指定类的元素定义样式。使用。以表示。.large-text{字体大小：18px；}ID选择器（IDSelectors）为HTML元素中指定id的元素定义样式。用#表示。#main-content{边距：8px；}选择器组（Groupsofselectors）将具有相同样式的元素分组。用,表示。h1{font-family:sans-serif}h2{font-family:sans-serif}h3{font-family:sans-serif}等于h1,h2,h3{font-family:sans-serif}伪类选择器(伪类）伪类选择器需要根据文档结构以外的条件将样式应用于元素。使用:表示伪类选择器。a:hover{color:red}伪类选择器包含两种类型：状态伪类和结构伪类。状态伪类根据HTML元素的当前状态进行选择。元素的状态在与用户交互过程中是动态变化的，因此元素会根据其状态呈现不同的样式。当元素处于一种状态时样式存在，而当它进入另一种状态时样式丢失。属性描述cssversion:link匹配没有访问过的链接的元素。(label)1:visited匹配已经访问过的链接的元素。(label)1:active匹配一个被激活的元素。（比如鼠标点击的瞬间）1:hover当鼠标悬停在元素上时，给元素添加样式。2:focus匹配具有键盘输入焦点的元素。2:target匹配相关URL指向的E元素。3:checked匹配处于选中状态的元素添加样式。(当input类型为radio和checkbox时使用)3:enabled为可用状态的元素添加样式。3:disabled将元素设置为禁用状态。3：indeterminate表示状态不确定的表单元素。（当输入类型为radio、checkbox、时使用）3结构伪类结构伪类是CSS3中新增的选择器，利用dom树通过文档结构之间的关系来过滤元素和匹配元素，这可以减少class和id属性的定义，使文档结构更加简洁。属性描述cssversion:not(s)匹配不包含s选择器的元素。3：first-child匹配父元素的第一个子元素E。2:last-child匹配父元素的最后一个子元素E。3:only-child匹配父元素的唯一子元素E。3：nth-??child(n)匹配父元素的第n个子元素E。3：nth-??last-child(n)匹配父元素的最后第n个子元素E。3：first-of-type匹配相同类型的第一个兄弟元素E。3:last-of-type匹配同类型的最后一个兄弟元素E。3：only-of-type匹配相同类型的唯一兄弟元素E。3:nth-of-type(n)匹配相同类型的第n个兄弟元素E。3:nth-last-of-type(n)匹配同类型的最后第n个兄弟元素E。3:empty匹配没有任何子元素（包括文本节点）的元素。3:root匹配文档根元素。在HTML中，根元素始终是。3其他伪类及相关资料请参考：各伪类的伪类实现（待补...）伪元素选择器（Pseudo-elements）伪元素对具体内容进行操作元素，而不是描述状态。它的操作层次比伪类深一层，所以它的动态性比伪类低很多。其实伪元素是普通选择器做不到的，选择某些元素的前面或者后面。控件的内容与元素相同，但本身是基于元素的抽象，不存在于文档结构中！使用::作为伪元素选择器。属性说明cssversion::first-letter向文本的第一个字母添加特殊样式。1::first-line向文本的第一行添加特殊样式。1::before在元素之前添加内容。2::after在元素之后添加内容。CSS中引入2::before和::after::before和::after，核心目的是实现语义化。关闭::before和::after布局的问题。清除::之后{内容：'';显示：块；明确：两者；}组合选择器后代组合器（Descendantcombinator）由于HTML元素之间存在层次关系，所以在某些情况下，我们需要根据对应的HTML结构来查找指定的HTML元素。p跨度{颜色：#999；}ulli{font-size:14px;}#main-contentdiv{颜色：黑色；}子组合器（Childcombinators）选择元素的直接子元素。使用>表示。正文>div{背景：#c0c??0c0;高度：100px；width:100%;}body>div>div{background:red;}相邻选择器（Next-siblingcombinator）是根据一个元素与另一个元素的相邻关系来为其应用样式。用+表示。/*相邻元素选择后面的元素进行样式设置*/li+li{border-left:1pxsolid#000000;}一般的兄弟选择器（Subsequent-siblingcombinator）是基于一个元素在另一个元素后面并且两个元素都属于一个父元素，为后面选中的元素设置样式。用～表示。/*选择以下元素进行样式设置*/p~span{color:red;}选择器级联和特异性当你随意打开一个页面查看源码时，你会发现同一个元素有多个CSS选择和对应的样式。而一个元素只能应用一种样式，那么应用一堆样式中的哪一种呢？这就涉及到CSS的层叠规则。CSS级联规定了选择器的特异性，特异性分为a、b、c、d四个注册，每一级的特异性逐渐降低（即a>b>c>d）。样式选择是通过比较选择器特异性来实现的。计算规则如下：写在style或带有!important的样式的内联样式的特异性为1,0,0,0（!important>inlinestyle），每个ID选择器的特异性为0,1,0,0对每个类、伪类或属性选择器的特异性0,0,1,0对每个元素或伪元素选择器贡献的特异性0,0,0,1对组合选择器和通配符的特异性style属性总是比任何其他规则都特殊；带有ID选择器的规则比没有ID选择器的规则特殊；带有类选择器的规则比只有类型选择器的规则特殊；如果两个规则具有相同的特异性，则以后定义的规则优先。参考CSSSelectorSelectorsLevel3--W3CWorkingDraft