CSS选择器学习

2017-02-25 本文已影响96人颭夏

CSS选择器是学习CSS的一个核心部分，HTML页面中的元素就是通过CSS选择器来进行控制的，熟练使用CSS选择器能迅速根据文档结构对文档样式进行一对一，一对多或者多对一的控制和调整。

一、CSS 元素选择器（类型选择器）

文档的元素是最基本的选择器也是最常见的选择器，如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html本身，如：

html {margin: 0; padding: 0;}
h1 {font-family: "华文楷体"; color:blue;}
a {font-size:16px; text-decoration: none;}

在 W3C 标准中，元素选择器又称为类型选择器（type selector）。类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例，所以类似HTML, XML等标记语言都可以通过类型选择器来匹配，甚至一些自定义标签都会生效。

二、CSS 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。

提示： 只有适当地标记文档后（指定claess属性），才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

语法： 类选择器前面有个"."。

/* 基本语法 */
.important {color:red;}
/* 结合通配符使用 */
*.important {color:red;}
/* 结合元素使用，解释为：其 class 属性值为 important 的所有 p 元素 */
p.important {color:red;}

CSS多类选择器

HTML元素的class属性可以包含一个词列表，各个词之间用空格分隔，词的顺序无关紧要。如：

<p class="important">
    This paragraph is a very important.
</p>

<p class="warning">
    This paragraph is a very warning.
</p>

<p class="important warning">
    This paragraph is a very important warning.
</p>

设置class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。就可以写作：

.important {font-weight:bold;}
.warning {font-style:italic;}
/* 注意：在HTML元素的class属性中的两个词需要用“空格”隔开，在CSS中不能用“空格”隔开 */
.important.warning {background:silver;}

注意： 把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限），如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。如：

p.important.urgent {background:silver;}

这个选择器将只匹配 class 属性中同时包含词 important 和 urgent 的 p 元素。因此，如果一个 p 元素的 class 属性中只有词 important 和 warning，将不能匹配。不过，它能匹配以下元素：

<!-- 没有同时包含 important 和 urgent ，不能匹配 -->
<p class="important warning">
    This paragraph is a very important.
</p>

<!-- 同时包含了 important 和 urgent ，可以匹配，与出现的顺序无关 -->
<p class="important warning urgent">
    This paragraph is a very important.
</p>

三、CSS ID选择器

语法： ID选择器前面有个"#"。

/* 基本语法 */
#intro {font-weight:bold;}
/* 配合通配符使用 */
*#intro {font-weight:bold;}

与Javascript的区别：

/* 在同一个页面中能匹配所有 ID 为 mostImportant 的元素 */
#mostImportant {color:red; background:yellow;}

/* 在同一个页面中只能获取文档中第一个 ID 为 mostImportant 的内容 */
document.getElementById("mostImportant").innerHTML;

<!-- 以下内容在同一个html文件中，当然这不符合标准，此处仅用于说明区别 -->
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

与类选择器的区别：

区别 1：只能在文档中使用一次
不同于类选择器，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

区别 2：不能使用 ID 词列表
不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

注意：

关于命名：id和class属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用；

关于大小写：id和class在HTML和XHTML中是区分大小的。

四、CSS 属性选择器

CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。

简单属性选择：

/* 通过单个属性选择 */
*[title] {color:red;}
a[href] {color:red;}

/* 通过多个属性选择，注意：匹配同时含有多个属性的元素 */
a[href][title] {color:red;}
img[alt][title] {border: 5px solid red;}

根据完全匹配的属性值选择：

/* 通过单个属性值选择 */
a[href="http://xiachengwei5.coding.me"] {color: red;}

/* 通过多个属性值选择 */
a[href="http://xiachengwei5.coding.me"][title="颭的博客"] {color: red;}

根据部分属性值选择

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute = value]	用于选取带有指定属性和值的元素。
[attribute ~= value]	用于选取属性值中包含指定词汇的元素，该值匹配是没有空格的字符串。
[attribute	= value]	用于选取带有以指定值开头的元素，该值匹配的是value或value-。
[attribute ^= value]	匹配属性值以指定值开头的每个元素，该值可以是任意值，推荐使用。
[attribute $= value]	匹配属性值以指定值结尾的每个元素。
[attribute *= value]	匹配属性值中包含指定值的每个元素，该值可以是任意值，推荐使用。

五、CSS 后代选择器（包含选择器）

后代选择器可以选择作为某元素后代的元素。

语法： 父元素和后代元素从左至右排列，中间用空格隔开。

/* 匹配 h1 下所有的 em 元素 */
h1 em {color:red;}

/* 匹配所有 class 为 "maincontent" 的 div下所有的 a 元素 */
div.maincontent a {color:blue;}

<!-- 匹配成功 -->
<h1>This is a <em>important</em> heading</h1>

<!-- 匹配失败 -->
<p>This is a <em>important</em> paragraph.</p>

注意： 有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。

例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

因此，ul em 将会选择以下标记中的所有 em 元素：

<ul>
  <!-- 此处会匹配 -->
  <em>0</em>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <!-- 此处也会匹配 -->
          <li>List item <em>1-3-2</em></li>
          <li>List item 1-3-3</li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

六、CSS 子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

如果你不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，那就要使用子元素选择器。

后代元素： 所有由其包裹的元素；

子代元素： 由其包裹，层级结构只比其小一级的元素；

语法： 父元素和子元素从左至右排列，中间用 > 隔开。

/* 选择只作为 h1 元素子元素的 strong 元素 */
h1 > strong {color:red;}

<!-- 匹配成功 -->
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<!-- 匹配失败 -->
<h1>This is <em>really <strong>very</strong></em> important.</h1>

结合后台选择器和子选择器

/* 选择所有 class 为 "company" 的 table 的所有后代 td 的子元素 p */
table.company td > p

七、CSS 相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同父元素。

语法：兄弟元素从左至右排列，中间用 + 隔开。

/* 选择紧接在 h1 后（前面的元素不能匹配）的元素，而且二者有相同的父元素 */
h1 + p {color: red;}

<!-- 匹配失败 -->
<p>第一个段落</p>
<h1>标题</h1>
<!-- 匹配成功 -->
<p>第二个段落</p>
<!-- 匹配失败 -->
<p>第二个段落</p>

总结：

选择器	描述
h1 p	后代选择器，选择所有的后代元素。
h1 , p	多元素选择器，用","分隔，同时匹配元素h1或元素p。
h1 > p	子元素选择器，选择其子元素。
h1 + p	相邻兄弟选择器，选择其后面相邻的兄弟元素（有相同的父元素）。
h1 ~ p	一般兄弟选择器，选择其后面所有的兄弟元素（有相同的父元素）。

八、CSS 伪类

用于向某些选择器添加特殊的效果。

语法： 选择器和伪类之间通过 : 隔开。

/* 选择器 : 伪类 */
selector : pseudo-class {property: value}
/* CSS 类也可与伪类搭配使用 */
selector.class : pseudo-class {property: value}

锚伪类

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪类名称对大小写不敏感。

:first-child 伪类和:laft-child伪类

可以使用 :first-child 伪类来选择元素的第一个子元素。

<div>
  <!-- 第一个 p 元素 -->
  <p>These are the necessary steps:</p>
    <ul>
         <!-- 第一个 li 元素 -->
        <li>Intert Key</li>
        <li>Turn key
            <!-- 第一个 strong 元素 -->
            <strong>clockwise</strong>
         </li>
        <li>Push accelerator</li>
    </ul>
     <!-- 最后一个 p 元素 -->
    <p>Do
      <!-- 第一个 em 元素 -->
      <em>not</em>
      push the brake at the same time as the accelerator.
    </p>
</div>

/* 选择的就是第一个 p 元素，而不是 p 元素的第一个子元素 */
p:first-child {font-weight: bold;}
/* 选择的就是最后一个 p 元素，而不是 p 元素的最后一个子元素 */
p:last-child {font-weight: bold;}
/* 选择的就是第一个 li 元素，而不是 li 元素的第一个子元素 */
li:first-child {text-transform: uppercase;}
/* 通过CSS设置字母的大小写 */
li:first-child {text-transform: lowercase;}

伪类汇总

选择器	含义
E:first-child	匹配元素E的第一个子元素
E:link	匹配所有未被点击的链接
E:visited	匹配所有已被点击的链接
E:active	匹配鼠标已经其上按下、还没有释放的E元素
E:hover	匹配鼠标悬停其上的E元素
E:focus	匹配获得当前焦点的E元素
E:lang(c)	匹配lang属性等于c的E元素
E:enabled	匹配表单中可用的元素
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio或checkbox元素
E::selection	匹配用户当前选中的元素
E:root	匹配文档的根元素，对于HTML文档，就是HTML元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1
E:nth-last-child(n)	匹配其父元素的倒数第n个子元素，第一个编号为1
E:nth-of-type(n)	与:nth-child()作用类似，但是仅匹配使用同种标签的元素
E:nth-last-of-type(n)	与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
E:last-child	匹配父元素的最后一个子元素，等同于:nth-last-child(1)
E:first-of-type	匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child	匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一个不包含任何子元素的元素，文本节点也被看作子元素
E:not(selector)	匹配不符合当前选择器的任何元素

伪元素

伪元素可用于定位文档中包含的文本，为与伪类进行区分，伪元素使用双冒号 :: 定义，但单冒号 : 也能被识别。

属性	描述
::first-letter	向文本的第一个字母添加特殊样式。
::first-line	向文本的首行添加特殊样式。
::before	在元素之前添加内容。
::after	在元素之后添加内容。
::focue	在元素之后添加内容。

九、参考资料

W3School CSS 选择器

CSS选择器详解

十分钟搞定CSS选择器