【閲覧注意】CSS決定版ガイド1：Selector_html/css_WEB-ITnose

ワイルドカード セレクター

ワイルドカードと同様に、任意の要素と一致できます

/*每一个元素的字体都设置为红色*/* {    color: red;}

要素セレクター

ドキュメント要素のセレクターを示します。 ... セレクター

ドキュメント要素に依存しない スタイルを指定する方法

クラス セレクター

/*为body的字体设置为红色*/body {    color: red；}

ID セレクター

h1, h2, h3 {    color: red;}

ID セレクターとクラス セレクターの違い:

HTML内ドキュメント、ID セレクターは 1 回だけ使用されます。したがって、id 値が lead-para の要素がある場合、ドキュメント内の他のすべての要素は id 値が lead-para を持つことはできません。 (注: 通常、ブラウザは HTML 内の ID の一意性をチェックしません。つまり、HTML ドキュメント内で同じ ID 属性値を持つ複数の要素を設定すると、これらの要素に同じスタイルを適用できる可能性があります。) ID 属性ではスペースで区切られた単語のリストが許可されないため、セレクターを一緒に使用することはできません。

クラス セレクターと ID セレクターは、ドキュメントの言語によっては大文字と小文字が区別される場合があります。 HTML と XHTML では、クラスと ID の値の大文字と小文字が区別されるように定義されているため、クラスと ID の値の大文字と小文字はドキュメント内の対応する値と一致する必要があります。

属性セレクター

単純な属性セレクター

属性の値に関係なく、特定の属性を持つ要素を選択したい場合は、単純な属性セレクターを使用できます。

h1 {    font: 18px Helvetica;    color: purple;    background: aqua;}

特定の属性値に基づいて選択します

2. h1, h2, h3 {    font: 18px Helvetica;    color: purple;    background: aqua;}

この形式は属性値と正確に一致する必要があります

属性値の一部に基づいて選択します

属性が単語リスト (スペース) を受け入れることができる場合単語間）分割）のいずれかに基づいて選択できます。

.warning {    font-weight: bold}/*包含warning元素的p标签会apply下面的style*/p.warning {    font-weight: bold}/*同时包含urgent和warning类名的元素会apply下面的style，类名顺序不限*/.urgent.warning {    font-weight: bold}/*同时包含urgent和warning类名的元素P会apply下面的style*/p.urgent.warning {    font-weight: bold}

p.warning と p[class~="warning"] は、HTML ドキュメントに適用すると同等です

Type

Description

[foo^="bar"]

すべての要素を選択foo 属性値が "bar" で始まる要素

[foo$="bar"]

foo 属性値が "bar" で終わる要素をすべて選択します

[foo~="bar"]Select foo 属性値に「bar」が含まれるすべての要素 (属性値はスペースで区切られ、どの単語でも bar と正確に一致できます)[foo*="bar"] を含む foo 属性値を選択します"bar" "" のすべての要素 (含まれていればどこでもよく、完全な単語である必要はありません)

特定属性选择类型

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

<h1 lang="en">Hello!</h1><p lang="en-us">Greetings!</p><div lang="en-au">G’day!</div><p lang="fr">Bonjour!</p><h4 lang="cy-en">Jrooana!</h4>/*上述标签前三个会变成红色，后两个还是黑色*/*[lang|="en"] { color: red;}

后代选择器

h1 em {    color: gray;}/*blockquote中包含的所有b（粗体）元素的文本颜色为灰色，另外正常段落中的所有粗体文本也为灰色*/blockquote b, p b {    color: gray;}

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

子元素选择器

h1>strong {    color: red;}

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

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

/*选择作为一个td元素子元素的所有p元素，这个td元素本身从table元素继承，该table元素有一个包含summary的class属性*/table.suitimary td > p {    color: red;}

相邻兄弟选择器

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

/*去除紧接在一个h1元素后出现的段落的上边距*/h1+p {    margin-top: 0;}

需要注意的是：

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

两个元素之间的文本内容不会影响相邻兄弟结合符起作用。

<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>/*尽管两个列表间多了一行文本，不过还是可以用选择器ol+ul来匹配第二个列表。*/ol+ul {    color: red;}

伪类和伪元素选择器

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

伪类选择器

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

a {    color: red;}a:link {    color: red;}/*两者是不同的，a:link指示的是一个有href属性的，并且未访问过的所有a节点a会应用到所有a标签*/

a:link {    color: blue;}a:visited {    color: red;}a.external:link, a.external:visited {    color: maroon;}

伪类的顺序很重要，通常建议为link-visited-focus-hover-active。

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

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

input:focus {  background-color: silver;  font-weight: bold;}

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

/*作为某元素(可以是任意元素)的第一个子元素的所有P元素设置为粗体。最常见的错误是认为p:first-child之类的选择器会选择p元素的第一个子元素。*/p:first-child {    font-weight: bold;}

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

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

*:lang(fr) {   font-style: italic;}

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

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

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

结合伪类：

/*鼠标指针停留在未访问链接上时，可以让这些链接变成红色，而鼠标指针停留在已访问链接上时，链接变成紫红色。*/a:link:hover {    color: red;}a:visited:hover {    color: maroon;}

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

伪元素选择器

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

设置首字母样式

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

/*让每个h2中第一个字母的大小是标题中其余字母大小的2倍*/h2:first-letter {    font-size: 200%;}

这个规则会导致用户代理(浏览器)对一个假想的元素作出响应，这个假想元素包含每个h2中的第一个字母。可能如下所示：
c1a436a314ed609750bd7c7d319db4dade2100ee8032423ad0fb84ea26076508T1699331aea0ee00cabf0eb7a83ace3a7his is an h2 element2e9b454fa8428549ca2e64dfac4625cd
:first-letter样式只应用到上例所示假想元素的内容。这个cf35a5647f5140b43c7fd9895c0f1c35元素并不出现在文档源代码中。相反，它是由用户代理动态构造的，用于向相应文本块应用：first-letter样式。换句话说，de2100ee8032423ad0fb84ea26076508是一个伪元素。

设置第一行样式

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

/*应用于每一段所显示的第一行文本。*/p:first-line {    color: red;}

: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

设置之前和之后的样式

h2:before {  content: "before";  color: red;}h2:after {  content: "after";  color: red;}

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