css知识总结——选择器

css选择器规定了css规则用于那些元素上

基本选择器

选择器	示例	示例说明
*	*	通用元素选择器， 匹配所有的元素。
. class	.info	类选择器，匹配所有class属性值中包含info的元素。
element	p	标签选择器。匹配p标签。
#id	#info	id选择器，匹配id属性为#info的元素。

组合选择器

选择器	示例	示例说明
element + element	div + p	紧邻兄弟选择器。选择紧接着div元素的第一个p元素
element > element	div > p	子元素选择器。选择所有父级元素为div元素的p元素
element，element	div ， p	多元素选择器。 选择所有的div元素和p元素
element~ element	div~p	一般兄弟选择器。将会匹配同一父元素下，div 元素后的所有 p 元素。
element element	div p（中间有一个空格）	后代选择器。将会将匹配 div 元素内所有的 p 元素。

伪类

伪类较多，只列举一些比较常用的

选择器	示例	示例说明
:hover	div:hover	匹配鼠标悬停在上方的div元素
:link	a:link	匹配所有未被访问的链接
:visited	a:visited	匹配所有已被访问的链接
:active	a:active	匹配所有活动链接
:focus	input:focus	匹配获得焦点的input元素
:disabled	input:disabled	匹配被禁用的input元素
:enabled	input:enabled	匹配处于启用状态的input元素
:first-child	p:first-child	匹配其父元素的第一个子元素p。
:last-child	p:last-child	匹配父元素的最后一个子元素p
:only-child	p:only-child	匹配父元素中唯一一个子元素p
:first-of-type	p:first-of-type	匹配其父元素中第一个出现的p元素
:last-of-type	p:last-of-type	匹配其父元素中最后一个出现的p元素
:only-of-type	p:only-of-type	匹配其父元素中没有与其相同类型的子元素

nth-child(an + b)

这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，依此类推。示例：

注意：a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。an 必须写在 b 的前面，不能写成 b+an 的形式。

• p:nth-child(0n + 3) 或者是p:ntn-child(3)。匹配 父元素中第3个子元素，如果该子元素是p元素，就会被匹配。
• p:nth-child(1n+0) 或简单的 p:ntn-child(n)。匹配父元素中的每个p元素
• p:nth-child(2n)。匹配父元素中2，4，6，8。。。偶数位置的p元素，如果该位置上是p元素，就会被匹配，如果不是，就不会配匹配
• p:nth-child(2n + 1)。匹配父元素中1，3，5，7。。。奇数位置上的p元素。
• p:nth-child(3n + 4)。匹配父元素中4，7，10，13。。。位置上的p元素。

:nth-last-child(an + b)

这个 CSS 伪类匹配文档树中在其之后具有 an+b-1个兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-child一样，只是它从结尾处反序计数，而不是从开头处。其用法参考:nth-child

:nth-of-type(an+b)

与:nth-child用法一样，但是只匹配使用同种标签的元素。例如:

HTML

<div>
  <div>这段不参与计数。</div>
  <p>这是第一段。</p>
  <p>这是第二段。</p>
  <div>这段不参与计数。</div>
  <p>这是第三段。</p>
  <p>这是第四段。</p>
</div>

CSS

/* 奇数段 */
p:nth-of-type(2n+1) {
    color: red;
}

/* 偶数段 */
p:nth-of-type(2n) {
   color: blue;
}

 /* 第一段 */
p:nth-of-type(1) {
   font-weight: bold;
}

效果图

:nth-last-of-type(an+b)

它基本上和 :nth-of-type一样，只是它从结尾处反序计数，而不是从开头处。

伪元素

就像 pseudo classes (伪类)一样， 伪元素也可以添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式。

所有的伪元素:

• ::after
• ::befor
• ::first-letter
• ::frirst-line
• ::selection

::after

::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。例如：

HTML

<div>
  <p class="first-text">这是第一段文字</p>
  <p>这是第二段文字</p>
  <p class="third-text">这是第三段文字</p>
</div>

CSS

.first-text::after {
    content: "<- 让人兴兴兴奋!";
    color: blue;
}

.third-text::after {
   content:    "<- 无聊!";
   color:      red;
}

效果图

::before

::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。
HTML

<div>
  <p class="first-text">这是第一段文字</p>
  <p>这是第二段文字</p>
  <p class="third-text">这是第三段文字</p>
</div>

CSS

.first-text::before {
    content: "<- 让人兴兴兴奋!";
    color: blue;
}

.third-text::before {
   content:    "<- 无聊!";
   color:      red;
}

效果图

::first-letter

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

::first-line

::first-line在块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

::selection

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

HTML

<div>
  <p class="first-text">这是一段文字这是一段文字这是一段文字这是一段文字</p>
  <p>这是第二段文字</p>
  <p class="third-text">这是第三段文字</p>
</div>

CSS

.first-text::selection {
      background-color: blue;
      color: white;
    }

效果图