常用css选择器总结

常用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

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

2. 匹配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-mode
• word-spacing, letter-spacing, text-decoration, text-transform, line-height
• text-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+支持。