CSS选择器类型总结

CSS选择器类型总结

1.通用选择器

* {
margin: 0;
padding: 0;
}

2.元素选择器

div { color: #ff0000; }
span { font-size: 18px; }

3.类选择器

.class属性值

• 一个元素可以有多个class值，每个class值之间用空格隔开；
• class值如果由多个单词组成，单词之间可以用

  中划线-

  、

  下划线_

  ，也可以使用驼峰标识；
• 最好不要用标签名作为class值；

.box {
width: 100px;
height: 100px;
background-color: #ff0000;
}

<div class="box"></div>

4.id选择器

#id属性值

• 一个HTML文档里面的id值是唯一的，不能重复；
• id值如果由多个单词组成，单词之间可以用

  中划线-

  、

  下划线_

  ，也可以使用驼峰标识；
• 最好不要用标签名作为id的值；

#container { color: #ff0000; }

<div id="container"></div>

5.属性选择器

• [attr]

  ：选中拥有attr属性的元素；

  /* 选中拥有title属性的元素 */
  [title]: { color: #ff0000; }

  <div title="one">内容</div>

• [attr=val]

  ：选中attr属性值恰好等于val的元素；

  /* 选中title值恰好等于one的元素 */
  [title="one"] { color: #ff0000; }

  <div title="one">内容</div>

• [attr*=val]

  ：选中attr属性值包含单词val的元素；

  /* title属性值包含单词one的元素 */
  [title*="one"] { color: #ff0000; }

  <div title="one">内容1</div>
  <p title="aaaone">内容2</p>
  <span title="one-two">内容3</span>

• [attr^=val]

  ：选中attr属性值以val开头的元素；

  /* title属性值以单词one开头的元素 */
  [title^="one"] { color: #ff0000; }

  <div title="one">内容1</div>
  <span title="one-two">内容2</span><p title="one two">内容3/p>

• [attr|=val]

  ：选中attr属性值恰好等于val或以单词val开头后面紧跟

  连字符-

  的元素；

  /* title属性值恰好等于one或者以单词one开头且后面跟着连字符-的元素 */
  [title|="one"] { color: #ff0000; }

  <div title="one">内容1</div>
  <span title="one-two">内容2</span>

• [attr~=val]

  ：选中attr属性值包含单词val的元素（单词之间必须用空格隔开）；

  /* title属性值包含单词one的元素（单词one与其他单词之间必须用空格隔开） */
  /* 效果类似于类选择器 */
  [title~="one"] { color: #ff0000; }

  <div title="one">内容1</div>
  <p title="one two">内容2</p>

• [attr$=val]

  ：选中attr属性值以单词val结尾的元素；

  /* title属性值以单词one结尾的元素 */
  [title$="one"] { color: #ff0000; }

  <div title="two-one">内容1</div>
  <p title="two one">内容2</p>

6.后代选择器

/* 选择div下所有span元素 */
div span { color: #ff0000; }

<div>
<span>文字内容1</span>
<p>
<span>文字内容2</span>
</p>
</div>

7.子代选择器

>

/* 选择div元素下的直接span元素 */
div > span { color: #ff0000; }

<div>
<span>文字内容1</span>
</div>

8.兄弟选择器

• 相邻兄弟选择器

  +

  ：选择某元素后面紧挨的兄弟元素；

  /* div元素后面紧挨的p元素 */
  div + p { color: #ff0000; }

  <div></div>
  <p>内容</p>

• 全兄弟选择器

  ~

  ：选择某元素后面的兄弟元素，不需要紧挨；

  /* div元素后面的p元素 */
  div ~ p { color: #ff0000; }

  <div></div>
  <p>内容1</p>
  <p>内容2</p>

9.交集选择器

/* 选择div元素且class为one的 */
div.one { color: #ff0000; }

/* 选择div元素且class为one且title属性值等于one的 */
div.one[title="one"] { color: #ff0000; }

<div class="one" >内容1</div>
<div class="one" title="one">内容2</div>

10.并集选择器

,

/* 所有的div元素 + 所有class值有one的元素 + 所有title属性值等于one的元素 */
div, .one, [title="one"] { color: #ff0000; }

<div>内容1</div>
<span title="one">内容2</span>
<p class="one">内容3</p>

11.伪类选择器

11.1.动态伪类

• :link

  ：a:link未访问的链接；

• :visited

  ：a:visited已访问的链接；

• :hover

  ：a:hover鼠标移动到链接上；

• :active

  ：a:active激活的链接（鼠标在链接上长按未松开）；

• :focus

  ：当前拥有输入焦点的元素（能接收键盘的输入，一般为input）；

注意点：

• :hover

  必须放在

  :link

  和

  :visited

  后面才能完全生效；

• :active

  必须放在

  :hover

  后面才能完全生效；
• 建议编写顺序：link、visited、focus、hover、active；
• 处理a元素，

  :hover

  和

  :active

  也能用于其他元素；

11.2.目标伪类和语言伪类

• 目标伪类：

  :target

  ；

• 语言伪类：

  :lang

  ；

11.4.元素状态伪类

• :enabled

  ：可用的；

• :disable

  ：禁用的；

• :checked

  ：选中的；

11.5.结构伪类

• :nth-child(n)

  ：父元素中的第n个子元素（n代表任意正整数和0，也可用even（偶数）和odd（奇数））；

  /* 选中所有父元素下的第一个为p的元素 */
  p:nth-child(1) { color: #ff0000; }

• :nth-last-child(n)

  ：与

  :nth-child相反

  ，父元素中倒数第n个子元素；

  /* 选中父元素下倒数第一个为p的元素 */
  p:nth-last-child(1) { color: #ff0000; }
  
  /* 选中最后两个为p的元素 */
  p:nth-last-child(-n + 2)  { color: #ff0000; }

• nth-of-type(n)

  ：计数时只计算同种类型的元素；

  /* 选中父元素下所有p元素中的第二个p元素 */
  p:nth-of-type(2) { color: #ff0000; }

• :nth-last-of-type(n)

  ：从后往前计算同种类型的元素；

  /* 选中父元素下所有p元素中倒数第二个p元素 */
  p:nth-last-of-type(2) { color: #ff0000; }

• :first-child

  ：等同于

  :nth-child(1)

  ；

• :last-child

  ：等同于

  :nth-last-child(1)

  ；

• :first-of-type

  ：等同于

  :nth-of-type(1)

  ；

• :last-of-type

  ：等同于

  :nth-last-of-type(1)

  ；

• :only-child

  ：是父元素中唯一的子元素；

• :only-of-type

  ：是父元素中唯一的指定类型的元素；

• :empty

  ：里面完全空白的元素，不包含子元素和内容；

• :root

  ：根元素，就是html元素；

11.6.否定伪类

:not()

not(x)

/* 选中父元素下所有p元素不是第一个和最后一个的p元素 */
p:not(:first-of-type):not(:last-of-type) { color: #ff0000; }

注意：

:not()