常用css选择器

1.元素选择器

例子： div{color:#f00;}

2.类选择器

例子： .class1{color:#f00;}

3.id选择器

例子： #id1{color:#f00;}

4.通配符选择器 (*)

例子： *{font-size:16px;}

5.属性选择器

选择器描述说明[attr]表示带有以 attr 命名的属性的元素[attr=value]表示带有以 attr 命名的，且值为”value”的属性的元素[attr*=value]表示带有以 attr 命名的，且值包含有”value”的属性的元素。[attr~value]表示带有以 attr 命名的，且值包含有”value”单词的属性的元素。这里区分于attr*=value，这里value是一个单词，用空格隔开的[attr|=value]实践结果：表示带有以 attr 命名的，且值是以”value-“开头的属性的元素[attr^=value]表示带有以 attr 命名的，且值是以”value”开头的属性的元素。[attr$=value]表示带有以 attr 命名的，且值是以”value”结尾的属性的元素。

6.子选择器

语法：元素1 > 元素2 { 样式声明 }

例子： div > span { color:#f00; }

7.后代选择器

语法：元素1 元素2 { 样式声明 }

例子： div span { color:#f00; }

8.相邻兄弟选择器

概述：它只会匹配紧跟其前方元素的同胞元素

语法：前方元素 + 目标元素 { 样式声明 }

例子： div + p { color:#f00; }

9.通用兄弟选择器

概述：在使用~连接两个元素时，它会匹配第二个元素，条件是第二个元素必须是在第一个元素后面，且他们有同一个父元素(即它们必须是兄弟元素)

语法：前方元素 ~ 目标元素 { 样式声明 }

例子： div ~ p { color:#f00; }

10.伪类选择器

概述：伪类选择器约有三四十种，但由于部分伪类选择器的支持性非常差，所以无需掌握，下面是常用的伪类选择器。

10.1 和a链接关系密切的伪类选择器

选择器(顺序lvha：love hate)说明:link正常状态:visited访问过:hover鼠标停留:active鼠标激活

选 择 器说明:focus:focus 在一个元素成为焦点时生效，用户可以通过键盘或鼠标激活焦点（例如：一次表单输入）。注意点：当:focus用于a标签的时候，它与:lvha的书写顺序不同，结果可能也会有所不同。

选择器说明:target和a链接的锚有关，匹配当前活动的目标元素。

例子：利用:target做一个简单的tabPanel

html代码：

<ul> <li><a href="#d1">面板1</a></li> <li><a href="#d2">面板2</a></li> <li><a href="#d3">面板3</a></li> </ul> <div id="d1">1</div> <div id="d2">2</div> <div id="d3">3</div>

css代码：

ul{ list-style-type: none; } ul:after{ content:""; display:block; clear:both; } li{ float:left; padding:5px 10px; background:#ff3; } div{ width:100%; height:100px; display:none; border:1px solid #f00; } div:target{ display:block; }

结果：

10.2 和表单元素关系密切的伪类选择器

选择器说明:checked匹配radio、checkbox、option选中状态:disabled匹配disabled:enabled匹配非disabled:required匹配required:read-only匹配readonly:focus匹配鼠标焦点:focus-within存在兼容性，但是挺有用，可查资料了解:default:default CSS 伪类表示在一组相似元素中所有默认的用户交互元素。不常用。:indeterminate不常用。(部分有兼容性问题)

10.3 :read-write

匹配非readonly的表单元素；(即使是disabled也符合条件)

匹配contenteditable是“”，“true”,”plaintext-only”的元素

10.4 child

选择器(顺序lvha：love hate)说明:first-child匹配第一个子元素:last-child匹配最后一个子元素:nth-child(an+b)例子:nth-child(even) :nth-child(odd) :nth-child(3n+1);:nth-last-child(an+b)和:nth-child(an+b)类似，只不过是从最后开始往前计算

10.5 of-type

概述：和10.3child类似，只不过它匹配元素的type，div和p是不同的type元素

选择器(顺序lvha：love hate)说明:first-of-type匹配第一个同类型的子元素:last-of-type– 匹配最后一个同类型的子元素:nth-of-type(an+b)例子:nth-of-type(even) :nth-of-type(odd) :nth-of-type(3n+1);:nth-last-of-type(an+b)和:nth-of-type(an+b)类似，只不过是从最后开始往前计算

10.6 :only-child

概述：属于某个父元素的唯一一个子元素。等效于 :first-child:last-child，但是:first-child:last-child的优先级更高。

10.7 :only-of-type

概述：代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。等效于 :first-of-type:last-of-type，但是:first-of-type:last-of-type的优先级更高。

10.8 :empty

概述：代表没有子元素的父元素。 这里说的子元素，只计算元素结点及文本（包括空格），注释、运行指令不考虑在内。

11.伪元素选择器

11.1 ::before ::after

选择器说明::before::before 会为当前元素创建一个子元素作为第一个元素。常通过 content 属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。::after::after用来创建一个伪元素，做为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。

11.2 ::first-line

概述：::first-line 是将样式只应用于一个元素的首行。首行文本的数量取决于元素的宽，document的宽和文本的字号。和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的html元素。

::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell ,list-item或者 table-caption中有用.。在其他的类型中，::first-line 是不起作用的。

在一个使用了 ::first-line 伪元素的选择器中，只有很小的一部分css属性能被使用：

所有和字体有关的属性：font, font-kerning, font-style, font-variant, font-variant-numeric,font-variant-position,font-variant-east-asian,font-variant-caps,font-variant-alternates,font-variant-ligatures,font-synthesis,font-feature-settings,font-language-override, font-weight, font-size,font-size-adjust,font-stretch, font-family ,the color property所有和背景有关的属性： background-color,background-clip,background-image,background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-modeword-spacing, letter-spacing, text-decoration, text-transform, line-heighttext-shadow,text-decoration,text-decoration-color,text-decoration-line,text- decoration-style, vertical-align.

11.3 ::first-letter

概述：::first-letter会选中一整块文字第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）

首行只在 block-container box内部才有意义, 因此 ::first-letter 伪元素 只在display属性值为block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用. 其他情况下, ::first-letter 毫无意义。

只有一小部分CSS可以在包含使用了::first-letter 伪元素选择器的CSS规则集声明块内运用:

所有的字体属性 : font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height 以及 font-family.所有的背景属性 : background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment以及 background-blend-mode.所有的外边距属性: margin, margin-top, margin-right, margin-bottom, margin-left.所有的内边距属性: padding, padding-top, padding-right, padding-bottom, padding-left.所有的边框属性: 比如一些简短的边框属性 border, border-style, border-color, border-width, border-radius, border-image, 还剩下许多冗长的边框属性等等.color 属性.text-decoration, text-shadow, text-transform, letter-spacing, word-spacing (使用恰当的话), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align 注意此刻必须没有浮动) 等属性.

11.4 ::selection

概述：::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

只有一小部分CSS属性可以用于 : :selection 选择器： color, background-color, cursor, outline, text-decoration, text-emphasis-color和text-shadow。要特别注意的是，background-image 会如同其他属性一样被忽略。

::selection中的text-shadow属性仅有Chrome, Safari 和 Firefox 17+支持。