[读书笔记] CSS权威指南1: 选择器 - 大炮～-html教程-PHP中文网

通配选择器

可以与任何元素匹配，就像是一个通配符

<span style="color: #008000;">/*</span><span style="color: #008000;">每一个元素的字体都设置为红色</span><span style="color: #008000;">*/</span><span style="color: #800000;">
* </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

登录后复制

元素选择器

指示文档元素的选择器。

<span style="color: #008000;">/*</span><span style="color: #008000;">为body的字体设置为红色</span><span style="color: #008000;">*/</span><span style="color: #800000;">
body </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red；
</span>}

登录后复制

分组

选择器分组

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

登录后复制

声明分组

<span style="color: #800000;">h1 </span>{<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;"> 18px Helvetica</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> purple</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> aqua</span>;
}

登录后复制

结合选择器和声明分组

<span style="color: #800000;">h1, h2, h3 </span>{<span style="color: #ff0000;">
    font</span>:<span style="color: #0000ff;"> 18px Helvetica</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> purple</span>;<span style="color: #ff0000;">
    background</span>:<span style="color: #0000ff;"> aqua</span>;
}

登录后复制

类选择器和ID选择器

独立于文档元素的方式来指定样式

类选择器

<span style="color: #800000;">.warning </span>{<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> bold
</span>}

<span style="color: #008000;">/*</span><span style="color: #008000;">包含warning元素的p标签会apply下面的style</span><span style="color: #008000;">*/</span><span style="color: #800000;">
p.warning </span>{<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> bold
</span>}

<span style="color: #008000;">/*</span><span style="color: #008000;">同时包含urgent和warning类名的元素会apply下面的style，类名顺序不限</span><span style="color: #008000;">*/</span><span style="color: #800000;">
.urgent.warning </span>{<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> bold
</span>}

<span style="color: #008000;">/*</span><span style="color: #008000;">同时包含urgent和warning类名的元素P会apply下面的style</span><span style="color: #008000;">*/</span><span style="color: #800000;">
p.urgent.warning </span>{<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> bold
</span>}

登录后复制

ID选择器

<span style="color: #800000;">#content </span>{<span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;"> 0</span>;
}

登录后复制

ID选择器和类选择器的不同之处：

立即学习“前端免费学习笔记（深入）”；

在一个HTML文档中，ID选择器会使用一次，而且仅一次。因此，如果有一个元素的id值为lead-para,那么该文档中所有其他元素的id值都不能是lead-para。(注: 浏览器通常并不检查HTML中ID的唯一性，这意味着如果你在HTML文档中设罝了多个有相同ID属性值的元素，就可能为这些元素应用相同的样式。)
ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表。

类选择器和ID选择器可能是区分大小写的，这取决于文档语言。HTML和 XHTML将类和ID值定义为区分大小写，所以类和ID值的大小写必须与文档中的相应值匹配。

属性选择器

简单属性选择器

如果希望选择有某个属性的元素，而不论该属性的值是什么，可以使用一个简单属性选择器。

<span style="color: #008000;">/*</span><span style="color: #008000;">选择有class属性（值不限）的所有h1元素，设置其字体颜色为红色 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
h1[class] </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">将同时有href和title属性的HTML超链接的文本置为粗体</span><span style="color: #008000;">*/</span><span style="color: #800000;">
a[href][title] </span>{<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> bold</span>;
}

登录后复制

根据具体属性值选择

<span style="color: #008000;">/*</span><span style="color: #008000;">设置具有href属性，并且属性值为http://www.w3.org/的a标签的font-size为200%</span><span style="color: #008000;">*/</span><span style="color: #800000;">
a[href="http://www.w3.org/"] </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 200%</span>;
}

<span style="color: #008000;">/*</span><span style="color: #008000;">同时满足</span><span style="color: #008000;">*/</span><span style="color: #800000;">
a[href="http://www.w3.org/"][title="W3C Home"]</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 200%</span>;
}

登录后复制

这种格式要求必须与属性值完全匹配

根据部分属性值选择

如果属性能接受词列表（词之间用空格分隔），可以根据其中的任意一个词进行选择。

<span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="barren rocky"</span><span style="color: #0000ff;">></span>Mercury<span style="color: #0000ff;"></</span><span style="color: #800000;">planet</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="cloudy barren"</span><span style="color: #0000ff;">></span>Venus<span style="color: #0000ff;"></</span><span style="color: #800000;">planet</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">span </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="life-bearing cloudy"</span><span style="color: #0000ff;">></span>Earth<span style="color: #0000ff;"></</span><span style="color: #800000;">planet</span><span style="color: #0000ff;">></span><span style="color: #000000;">
/*为了把class属性中有barren的所有元素变为斜体，可以写作：*/
<span style="color: #993300;">span[class~="barren"] {
    font-style: italic;
}</span></span>

登录后复制

p.warning和p[class~="warning"]应用到HTML文档时是等价的

类型	描述
[foo^="bar"]	选择foo属性值以"bar"开头的所有元素
[foo$="bar"]	选择foo属性值以"bar"结尾的所有元素
[foo~="bar"]	选择foo属性值包含"bar"的所有元素(属性的值根据空格分隔，其中任意一个词能完全匹配bar)
[foo*="bar"]	选择foo属性值包含"bar"的所有元素(只要包含就可以了，任意位置都可以，不必是一个完整的单词)

特定属性选择类型

用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

<span style="color: #0000ff;"><</span><span style="color: #800000;">h1 </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span>Hello!<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en-us"</span><span style="color: #0000ff;">></span>Greetings!<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en-au"</span><span style="color: #0000ff;">></span>G&rsquo;day!<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">p </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="fr"</span><span style="color: #0000ff;">></span>Bonjour!<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">h4 </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="cy-en"</span><span style="color: #0000ff;">></span>Jrooana!<span style="color: #0000ff;"></</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span><span style="color: #000000;">

/*上述标签前三个会变成红色，后两个还是黑色*/
<span style="color: #993300;">*[lang|="en"] {
  color: red;
}</span></span>

登录后复制

后代选择器

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

<span style="color: #008000;">/*</span><span style="color: #008000;">blockquote中包含的所有b（粗体）元素的文本颜色为灰色，另外正常段落中的所有粗体文本也为灰色</span><span style="color: #008000;">*/</span><span style="color: #800000;">
blockquote b, p b </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> gray</span>;
}

登录后复制

后代选择器中，元素之间的层次间隔可以是无限的。

子元素选择器

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

登录后复制

子元素选择器限制为只匹配树种直接相连的元素。

可以在同一个选择器中结合使用后代选择器和子选择器。

<span style="color: #008000;">/*</span><span style="color: #008000;">选择作为一个td元素子元素的所有p元素，这个td元素本身从table元素继承，该table元素有一个包含summary的class属性</span><span style="color: #008000;">*/</span><span style="color: #800000;">
table.suitimary td > p </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

登录后复制

相邻兄弟选择器

和子结合符一样，相邻兄弟结合符旁边可以有空白符。

<span style="color: #008000;">/*</span><span style="color: #008000;">去除紧接在一个h1元素后出现的段落的上边距</span><span style="color: #008000;">*/</span><span style="color: #800000;">
h1+p </span>{<span style="color: #ff0000;">
    margin-top</span>:<span style="color: #0000ff;"> 0</span>;
}

登录后复制

需要注意的是：

用一个结合符只能选择两个相邻兄弟中的第二个元素。因此，如果写作li+li {font-weight: bold;}，只会把各列表中的第二个及以后的列表项变成粗体。
两个元素之间的文本内容不会影响相邻兄弟结合符起作用。

<span style="color: #800000;"><div>
<ol>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ol> This is some text that is part of the 'div'.
<ul>
<li>A list item</li>
<li>Another list item</li>
<li>Yet another list item</li>
</ul>
</div>
</span><span style="color: #008000;">/*</span><span style="color: #008000;">尽管两个列表间多了一行文本，不过还是可以用选择器ol+ul来匹配第二个列表。</span><span style="color: #008000;">*/</span><span style="color: #800000;">
ol+ul </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

登录后复制

伪类和伪元素选择器

利用伪类和伪元素选择器，可以为文档中不一定具有存在的结构指定样式，或者为某些元素(甚至是文档本身)的状态所指示的幻像类指定样式。会根据另外某种条件而非文档结构向文档中的某些部分应用样式，而且无法通过研究文档的标记准确地推断出采用何种方式应用样式。

伪类选择器

伪类名	描述
:link	指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚。注意，有些浏览器可能会不正确地将:link解释为指向任何超链接，包括已访问和未访问的超链接
:visited	指示作为已访问地址超链接的所有锚 MacsMind 电商AI超级智能客服 131 查看详情
:focus	指示当前拥有输入焦点的元素，也就是说，可以接受键盘输入或者能以某种方式激活的元素
:hover	指示鼠标指针停留在哪个元素上。例如，鼠标指针可能停留在一个超链接上，:hover就会指示这个超链接
:active	指示被用户输入激活的元素。例如，鼠标指针停留在一个超链接上时，如果用户点击鼠标，就会激活这个超链接，将指示这个超链接

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

a:link </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}
<span style="color: #008000;">/*</span><span style="color: #008000;">两者是不同的，
a:link指示的是一个有href属性的，并且未访问过的所有a节点
a会应用到所有a标签
</span><span style="color: #008000;">*/</span>

登录后复制

<span style="color: #800000;">a:link </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> blue</span>;
}<span style="color: #800000;">

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

a.external:link, a.external:visited </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> maroon</span>;
}

登录后复制

伪类的顺序很重要，通常建议为link-visited-focus-hover-active。(这是由于样式有优先级的哦~~)

:link和:visited是静态的——第一次显示之后，它们一般不会在改变文档的样式。

:focus, :hover, :active是动态伪类。动态伪类可以应用到任何元素。

<span style="color: #800000;">input:focus </span>{<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> silver</span>;<span style="color: #ff0000;">
  font-weight</span>:<span style="color: #0000ff;"> bold</span>;
}

登录后复制

- 选择第一个子元素——:first-child，这也是一个静态伪类。

<span style="color: #008000;">/*</span><span style="color: #008000;">
作为某元素(可以是任意元素)的第一个子元素的所有P元素设置为粗体。
最常见的错误是认为p:first-child之类的选择器会选择p元素的第一个子元素。</span><span style="color: #008000;">*/</span><span style="color: #800000;">
p:first-child </span>{<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;"> bold</span>;
}

登录后复制

- 根据语言选择—— :lang()伪类。

从对应的模式来讲，:lang()伪类就像是|=属性选择器。

<span style="color: #800000;">*:lang(fr) </span>{<span style="color: #ff0000;"> 
  font-style</span>:<span style="color: #0000ff;"> italic</span>;
}

登录后复制

伪选择器和属性选择器之间的主要差别在于语言信息可以从很多来源得到，而且其中一些可能在元素之外。CSS2.1指出：

在HTML中，语言由lang属性和META元素的组合来确定，还可能包括协议提供的信息，如HTTP首部。XML使用一个xml:lang属性，另外可能还有其他文档语言特定的方法来确定语言。

因此，伪类比属性选择器稍微健壮一些。

结合伪类：

<span style="color: #008000;">/*</span><span style="color: #008000;">鼠标指针停留在未访问链接上时，可以让这些链接变成红色，而鼠标指针停留在已访问链接上时，链接变成紫红色。</span><span style="color: #008000;">*/</span><span style="color: #800000;">
a:link:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">

a:visited:hover </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> maroon</span>;
}

登录后复制

用哪种顺序指定并不重要，写成a:hover:link会得到与a:link:hover一样的效果。

伪元素选择器

就像伪类为锚指定幻象类一样，伪元素能够在文档中插入假想的元素，从而得到某种效果。CSS2.1中定义了4个伪元素：设置首字母样式、设置第一行样式、设置之前和之后的样式。

- 设置首字母样式

用于设置一个块级元素首字母的样式，而且仅对该首字母设置样式。

<span style="color: #008000;">/*</span><span style="color: #008000;">让每个h2中第一个字母的大小是标题中其余字母大小的2倍</span><span style="color: #008000;">*/</span><span style="color: #800000;">
h2:first-letter </span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;"> 200%</span>;
}

登录后复制

这个规则会导致用户代理(浏览器)对一个假想的元素作出响应，这个假想元素包含每个h2中的第一个字母。可能如下所示：

This is an h2 element

:first-letter样式只应用到上例所示假想元素的内容。这个元素并不出现在文档源代码中。相反，它是由用户代理动态构造的，用于向相应文本块应用：first-letter样式。换句话说，是一个伪元素。

- 设置第一行样式

:first-line可以用来影响元素中第一个文本行。(第一行是指显示区域的第一行，所以浏览器窗口大小不同，第一行所代表的字符数量也是不同的。)

<span style="color: #008000;">/*</span><span style="color: #008000;">应用于每一段所显示的第一行文本。</span><span style="color: #008000;">*/</span><span style="color: #800000;">
p:first-line </span>{<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;"> red</span>;
}

登录后复制

:first-letter, :first-line允许设置的CSS属性：

:first-letter	:first-line
所有的font属性	所有的font属性
color	color
所有background属性	所有background属性
所有margin属性
所有padding属性
所有border属性
text-decoration	text-decoration
vertical-align	vertical-align
text-transform	text-transform
line-height	line-height
float
letter-spacing	letter-spacing
word-spacing

- 设置之前和之后的样式

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

h2:after </span>{<span style="color: #ff0000;">
  content</span>:<span style="color: #0000ff;"> "after"</span>;<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> red</span>;
}

登录后复制

所有伪元素都必须放在出现该伪元素的选择器的最后面，如果写成p: first-line em就是不合法的，因为伪元素在选择器主体前面出现。