ホームページ > 記事 > ウェブフロントエンド > CSS选择器总结 - zhongJaywang

CSS选择器总结 - zhongJaywang

WBOYオリジナル: 2016-05-20 13:49:111440ブラウズ

最近在www.w3school.com.cn学习了CSS选择器，下面做一个知识汇总。部分源码来自www.w3school.com.cn！

插入样式表的方法有三种：

第一种：外部样式表

<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="mystyle.css"</span> <span style="color: #0000ff;">/></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span></span></span>

第二种：内部样式表

<span style="color: #0000ff;"><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;">
  hr </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> sienna</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
  p </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">margin-left</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 20px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
  body </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">background-image</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> url("images/back40.gif")</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;"></span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span></span></span>

第三种：内联样式表

<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">style</span><span style="color: #0000ff;">="color: sienna; margin-left: 20px"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This is a paragraph
</span><span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span>

CSS基本的选择器有四种，其它复杂的选择器都由这四种组合而成

元素选择器（类型选择器）
id选择器
类选择器
属性选择器

选择器的基础语法，规则由两个主要的部分构成：选择器，以及一条或多条声明。

<span style="color: #800000;">//CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector </span>{<span style="color: #ff0000;">declaration1; declaration2; ... declarationN </span>}<span style="color: #800000;">

//每条声明由一个属性和一个值组成。

selector </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}

1. 元素选择器（类型选择器）

<span style="color: #800000;">h1 </span>{<span style="color: #ff0000;">font-family</span>:<span style="color: #0000ff;"> sans-serif</span>;}

同时也可以为XML文档设置样式：

XML文档：

<span style="color: #0000ff;"></span><span style="color: #ff00ff;">xml version="1.0" encoding="ISO-8859-1"</span><span style="color: #0000ff;">?></span>
<span style="color: #0000ff;"></span><span style="color: #ff00ff;">xml-stylesheet type="text/css" href="note.css"</span><span style="color: #0000ff;">?></span>
<span style="color: #0000ff;"><span style="color: #800000;">note</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">to</span><span style="color: #0000ff;">></span>George<span style="color: #0000ff;"></span><span style="color: #800000;">to</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">from</span><span style="color: #0000ff;">></span>John<span style="color: #0000ff;"></span><span style="color: #800000;">from</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">heading</span><span style="color: #0000ff;">></span>Reminder<span style="color: #0000ff;"></span><span style="color: #800000;">heading</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>Don't forget the meeting!<span style="color: #0000ff;"></span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">note</span><span style="color: #0000ff;">></span></span></span></span></span></span>

CSS样式：

<span style="color: #800000;">note
  </span>{<span style="color: #ff0000;">
  font-family</span>:<span style="color: #0000ff;">Verdana, Arial</span>;<span style="color: #ff0000;">
  margin-left</span>:<span style="color: #0000ff;">30px</span>;
  }<span style="color: #800000;">

to
  </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;">28px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
  }<span style="color: #800000;">

from
  </span>{<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;">28px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
  }<span style="color: #800000;">

heading
  </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;">60px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
  }<span style="color: #800000;">

body
  </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> blue</span>;<span style="color: #ff0000;">
  font-size</span>:<span style="color: #0000ff;">35px</span>;<span style="color: #ff0000;">
  display</span>:<span style="color: #0000ff;"> block</span>;
  }

2.id选择器

id 属性只能在每个 HTML 文档中出现一次！

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="red"</span><span style="color: #0000ff;">></span>这个段落是红色。<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="green"</span><span style="color: #0000ff;">></span>这个段落是绿色。<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span></span>

CSS样式：

<span style="color: #800000;">#red </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}<span style="color: #800000;">
#green </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">green</span>;}

3.类选择器

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<span style="color: #0000ff;"><span style="color: #800000;">h1 </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This heading will be center-aligned
</span><span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">p </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="center"</span><span style="color: #0000ff;">></span><span style="color: #000000;">
This paragraph will also be center-aligned.
</span><span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span></span>

CSS样式：

<span style="color: #800000;">.center </span>{<span style="color: #ff0000;">text-align</span>:<span style="color: #0000ff;"> center</span>}

4.属性选择器

css属性选择器参考
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute=value*]	匹配属性值中包含指定值的每个元素。

为了更准确的定位HTML元素并对其添加样式，在上面四种基础选择器上面，CSS选择器还可以分成：分组选择器，派生选择器，后代选择器，子元素选择器，相邻兄弟选择器，伪类和伪元素。

*1.分组选择器

<span style="color: #008000;">/*</span><span style="color: #008000;"> no grouping </span><span style="color: #008000;">*/</span><span style="color: #800000;">
h1 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h2 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h3 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h4 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h5 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}<span style="color: #800000;">
h6 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}

<span style="color: #008000;">/*</span><span style="color: #008000;"> grouping </span><span style="color: #008000;">*/</span><span style="color: #800000;">
h1, h2, h3, h4, h5, h6 </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">blue</span>;}

*2.派生选择器

派生选择器是通过依据元素在其位置的上下文关系来定义样式的。

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>

<span style="color: #0000ff;"><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>我是斜体字。这是因为 strong 元素位于 li 元素内。<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>我是正常的字体。<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

CSS代码：

<span style="color: #800000;">li strong </span>{<span style="color: #ff0000;">
    font-style</span>:<span style="color: #0000ff;"> italic</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> normal</span>;
  }

*3.后代选择器

后代选择器又称包含选择器，可以选择某元素的任意一代的后代元素。

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>This is a <span style="color: #0000ff;"><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>important<span style="color: #0000ff;"></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span> heading<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>This is a <span style="color: #0000ff;"><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>important<span style="color: #0000ff;"></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span> paragraph.<span style="color: #0000ff;"></span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span></span></span></span></span>

CSS代码：

<span style="color: #800000;">h1 em </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}

*4.子元素选择器

子元素选择器只可选择某元素第一代后代的选择器。

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>This is <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>very<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>very<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span> important.<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>This is <span style="color: #0000ff;"><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>really <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>very<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span> important.<span style="color: #0000ff;"></span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

CSS代码：

<span style="color: #800000;">h1 > strong </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}

*5.相邻兄弟选择器

相邻兄弟选择器会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级。

eg1:

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>This is a heading<span style="color: #0000ff;"><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>This will be styled.<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>This will not be styled.<span style="color: #0000ff;"></span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span></span></span></span></span></span></span>

CSS代码：

<span style="color: #800000;">h2 + strong </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}

语法规则是h2和strong之间有一个“＋”，“＋”和前面的h1或者后面的strong之间的空格都是可有可无的。
在以上例子中，第一个strong紧邻着h2并且他们拥有相同的父级(h1)，所以h2 + strong会选择到第一个而不会选到第二个.

eg2:

HTML代码：

<span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> 
    <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span>     
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 1<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 2<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
        <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 3<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
    <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> 
     <span style="color: #0000ff;"><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> 
         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 1<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 2<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
         <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>List item 3<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> 
    <span style="color: #0000ff;"></span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> 
<span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span>

CSS代码：

<span style="color: #800000;">li + li </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;">red</span>;}

在以上的例子中li+li是选择紧挨着li后面的第一个
，所以第一个
不会被选择；而第二个
是紧挨着第一个li的，所有会被选择；第三个
是紧挨着第二个
的，也会被选择。

*6伪类

伪类的语法：

<span style="color: #800000;">selector : pseudo-class </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}

CSS 类也可与伪类搭配使用：

<span style="color: #800000;">selector.class : pseudo-class </span>{<span style="color: #ff0000;">property</span>:<span style="color: #0000ff;"> value</span>}

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向元素的第一个子元素添加样式。
:lang	向带有指定 lang 属性的元素添加样式。

超链接例子：

<span style="color: #800000;">a:link </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #FF0000</span>}        <span style="color: #008000;">/*</span><span style="color: #008000;"> 未访问的链接 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:visited </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #00FF00</span>}    <span style="color: #008000;">/*</span><span style="color: #008000;"> 已访问的链接 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:hover </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #FF00FF</span>}    <span style="color: #008000;">/*</span><span style="color: #008000;"> 鼠标移动到链接上 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:active </span>{<span style="color: #ff0000;">color</span>:<span style="color: #0000ff;"> #0000FF</span>}    <span style="color: #008000;">/*</span><span style="color: #008000;"> 选定的链接 </span><span style="color: #008000;">*/</span>

*7伪元素

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：html5中 canvas标签中 2d上下文 globalCompositeOperation属性 - MythMan次の記事：一些常被你忽略的CSS小知识 - jerrylsxu

続きを見る

CSS选择器总结 - zhongJaywang

関連記事