如何编写CSS“选择器”重新介绍（CSS 3版）
在CSS 3中，如何编写CSS“selector”（规范）也得到了扩展
描述CSS的基础知识是：
选择器{property：value;}
是（*）。编写“选择器”以指定样式的目标。它是一个“选择器”，是CSS基础知识的基础，但是这个规范也已经用CSS 3进行了扩展，现在可以编写新的和有用的写作风格。此外，可能有一些写作方式忘记了它们的存在，因为它们放弃使用它们来解决兼容浏览器的问题（即使它们存在于过去的规范中）。在本文中，我将向您展示如何从ichi中编写“选择器”。你为什么不回顾这个时候写选择器的方法？到目前为止，有时您可能认为通过将类名详细附加到HTML来实现的“有限应用程序”方法“实际上您可以像这样舒适地描述”。*在描述多组“属性和值”时，分号“;”符号用作分隔符。因此，如果您只编写一组“属性和值”，则不必使用分号。但是，我们建议您从头开始编写分号，以便以后在添加样式时不要忘记编写分号。在本文的示例中，附加了所有分号。
编写选择器的基础知识
以下四种类型是可以简单描述的最基本的选择器。■通用选择器:(适用于所有元素）
*{Property：value;}
在典型的浏览器中，边距（边距）从头开始附加到h1元素，p元素等并显示。为了一次性消除它们，通用选择器可以如下使用。
*{margin：0px;}
如上所述，每个元素的边距为零。■类型选择器:(仅适用于指定的元素）
元素名称{property：value;}
如果写如下，则文本颜色仅对h1元素变为绿色。
h1{color：green;}
■类选择器:(仅适用于指定的类）
。班级名称{property：value;}
如果编写如下，则文本颜色仅对添加了apple类的元素变为红色。
.apple{color：red;}
■ID选择器:(仅适用于指定的ID）
#ID name{property：value;}
如下所示，文本颜色仅为ID为“葡萄”的元素的紫色。
＃grape{color：purple;}
*类选择器和ID选择器可以与类型选择器一起描述如下。例如，如果编写如下，则它仅适用于类名为“melon”的强元素。
strong.melon{property：value;}
那么，CSS的“选择器”并不是编写上述四种类型的唯一方法。有更多的编写方式，可以更容易地缩小可以应用样式的样式。
编写选择器以通过后代关系或邻接关系缩小应用程序的范围
例如，如果您只想应用“p元素中包含的元素”，请通过将它们与一个字节的空格连接来描述元素名称，如下所示。这种写作方式将经常使用。
pa{property：value;}
在这种情况下，“p元素内的所有元素”都适用。但是，由于条款有限，
仅定位一个元素，该元素是 p元素的直接子元素仅定位与 p元素相邻的元素仅定位出现在 p元素之后的元素有描述方法，如。我将在第2页详细介绍它。
编写选择器以按属性和属性值内容缩小应用程序的范围
属性和属性值可以附加到HTML的每个元素。例如，在创建链接的元素中，您可以编写href属性（指定链接目标URL），目标属性（指定显示目标窗口）等，如下所示。
HREF= “Http://Allabout.Co.Jp/” 目标 所有关于
即使您没有逐个为每个这样的链接（一个元素）分配类名或ID名，这取决于您如何编写选择器，
仅为具有目标属性的元素装饰仅针对目标属性值为“_blank”的元素进行装饰仅为href属性值以“http：//”开头的元素的装饰仅对其href属性值以“.pdf”结尾的元素进行装饰仅装饰包含“allabout.co.jp”的元素作为href属性的值您可以通过使用“属性的存在/不存在”和“属性值的内容”作为条件来缩小适用的样式。特别是，上面的最后三个是CSS 3中添加的新规范。根据链接目的地的类型，想要更改装饰时很方便。编写这种选择器的方式称为“属性选择器”。当然，它可以用于任何元素，不限于元素。有关详细信息，我们将在第3页和以下页面中介绍它。
即使不使用class属性·id属性，CSS端也可以缩小应用程序目标的范围
通过这种方式，CSS选择器具有可以缩小各种条件的规范。通过使用这些写入方式，您可以仅在CSS源端灵活指定装饰目标，而无需使用HTML源端的class属性或id属性指定名称。让我们从下一页开始仔细研究
一个选择器，通过从元素之间的位置关系缩小条件来指定要应用的对象
CSS选择器具有以下语法，用于根据两个元素之间的位置关系限制适用的主题。
“后代选择器”：仅针对元素α内包含的元素β“子选择器”：仅作为元素α的直接子元素的元素β被瞄准“相邻兄弟选择器”：仅靶向与元素α相邻的元素β“一般兄弟选择器”：仅出现在元素α之后出现的元素β
后代选择器（CSS 1）
如果要仅将样式应用于“元素α”中包含的“元素β”，请通过将它们与空格连接来描述元素名称，如下所示。我们称之为“后代选择器”。
元素α元素β{property：value;}
例如，考虑HTML描述如下的情况。这里有三个强大的元素。一个在h3元素中，另外两个在p元素中。
< strong>在
标题
中突出显示
< strong>强调 段落在链接中突出显示
此时，在描述CSS时如下，
强烈的{颜色：红色;
后代选择器
只能应用“p元素内的两个强元素”（字母颜色变为红色）。其他强大元素不符合条件。示例显示如右图所示。这个“后代选择器”在CSS 1中定义，它是非常频繁使用的基本缩小方法。
子选择器（CSS 2）
如果要仅将样式应用于“元素β”，它是“元素α”的直接子元素，请按“>”符号描述元素名称，如下所示。这被称为“子选择器”。
元素α >元素β{property：value;}
例如，考虑HTML描述如下的情况。这里，p元素中有两个强元素，一个位于p元素下，另一个位于a元素下面。
直接强调在 链接中 突出显示
此时，在描述CSS时如下，
p >强{颜色：红色;
儿童选择器
只能应用“直接在p元素下的强元素”（字母颜色为红色）。即使在p元素内部，也不包括“元素正下方的强元素”（中间有一个元素）。示例显示如右图所示。
相邻的兄弟选择器（CSS 2）
如果要仅将样式应用于“元素α”旁边的“元素β”（=不相邻的后代但相邻），请使用“+”符号添加元素名称，如下所述我会的。我们称之为“相邻兄弟选择器”。
元素α +元素β{property：value;}
例如，考虑HTML描述如下的情况。这里，h1元素后面有两个p元素。
大标题
第一段第二段
此时，在描述CSS时如下，
h1 +p {color：red;}
相邻的兄弟选择器
“ 只能应用与h1 元素相邻的p元素（= 仅首先出现的第一个段落）”（字符颜色为红色）。第二段和后续段落不是针对性的，因为它们不与h1元素相邻。*如果h1元素和p元素之间还有其他元素，例如div元素，则什么都不适用。在那种情况下，“没有”p元素“与h1元素相邻”。
另外，例如，考虑HTML描述如下的情况。在这里，我们制作一个3行×3行的表。
<表> 第一栏 第二栏 第三栏 第一栏 第二栏 第三栏 第一栏 第二栏 第三栏
这时，在描述CSS时如下，
td +td + td {color：red;
使用相邻的同级选择器逐列装饰表
您只能在表格的第三行进行装饰。这是因为匹配条件“td元素旁边的td元素旁边的条件”的唯一条件是每行上的“第三个td元素”。示例显示如右图所示。
般兄弟选择器（CSS 3）
如果要仅将样式应用于“元素α”的描述位置之后的“元素β”，请通过将其与“”符号连接来描述元素名称，如下所示。这是CSS 3中添加的规范，称为“通用兄弟选择器”。
元素α ~元素β{property：value;}
例如，考虑HTML描述如下的情况。这里我们有一个h3元素和三个p元素。三个p元素中的两个出现在h3元素之后。
不合格的段落
小标题
目标段落目标段落
这时，在描述CSS时如下，
h3 ~p {color：red;}
一般兄弟选择器
只能应用“h3元素出现后描述的p元素”（字母颜色变为红色）。h3元素的描述位置之前的p元素不合格。示例显示如右图所示。
一个选择器，根据属性的存在与否或属性值的内容缩小适用的目标
的CSS选择，已经描述的属性的类型和，限制应用对象的风格按照属性值的内容，写一个“属性选择”是可用的。例如，考虑如下描述在HTML中创建链接的元素的情况。通过使用“属性选择器”，可以轻松完成单个装饰，而无需为每个元素分配类名或ID名称。
外部链接A（没有目标属性）外部链接Y（同一窗口）外部链接T（另一个窗口）内部链接S（没有目标属性）内部链接Y（同一窗口）内部链接G（另一个窗口）链接到PDF
链接显示示例（不带CSS）
这些元素包含两个属性，“href属性”和“目标属性”。不应用CSS的显示示例如右图所示。在下文中，使用各种写属性的选择，在条件“的属性值的内容”，“属性”存在或不存在的，并且我们将告诉你如何缩小应用目标。
仅应用具有特定属性的元素（CSS 2）
如果描述如下，则它仅可以应用于具有“β属性”的“α元素”。
α[β]
例如，
a[ 目标 ] {颜色：红色;
仅装饰具有target属性的链接
当如上所述描述CSS时，只有“具有目标属性的元素”变为红色，如右图所示。
仅应用具有特定属性值的元素（CSS 2）
如果描述如下，则它仅可以应用于具有指定值“γ”的“β属性”的“α元素”。
α[β=“γ”]
例如，
a[ target = “ _ blank ”] {color：red;
仅装饰另一个窗口中显示的链接
当如上所述描述CSS时，只有“目标属性的值为”_blank“的元素变为红色，如右图所示。您只能将其用于尝试在新窗口中打开链接目标的链接，例如，当您想要进行特殊装饰并使其易于理解行为时。打开新窗口要仅向链接添加图标，请参阅文章“将图标添加到在单独窗口中打开的链接 ”。
仅应用特定属性值以指定值开头的元素（CSS 3）
如果描述如下，则它仅可以应用于具有“β属性”指定的“α元素”的“ 以字符串”γ“ 开始的值。这是CSS 3中添加的规范。
α[β^ =“γ”]
例如，
a[ href ^ = “ http：// ”] {color：red;
仅装饰指向外部网站的链接
当如上所述描述CSS时，只有“href属性值以”http：//“开头的元素变为红色，如右图所示。当您只想装饰指向外部站点的链接时，可以使用它。
仅应用特定属性值以指定值结尾的元素（CSS 3）
如果描述如下，则它仅可以应用于具有“β属性”的“α元素”，该“α元素”指定“ 以”γ“ 结尾的值。这是CSS 3中添加的规范。
α[β$ =“γ”]
例如，
a[ href $ = “。pdf ”] {color：red;
仅装饰指向PDF的链接
当如上所述描述CSS时，只有“以”.pdf“href属性值结尾的元素”变为红色，如右图所示。您可以根据链接目标的类型使用它来装饰装饰，例如，当您只想装饰指向PDF文件的链接时。
仅应用特定属性值包含指定值的元素（CSS 3）
当描述如下时，它仅可以应用于具有“β属性”的“α元素”，该“α元素”被指定为“ 包括字符串”γ“的值。这是CSS 3中添加的规范。
α[β* =“γ”]
例如，
a[ href * = “ yahoo.co.jp ”] {color：red;
只装饰Yahoo!的链接
当如上所述描述CSS时，只有“包含字符串”yahoo.co.jp“的元素在href属性的值中变为红色，如右图所示。在这种情况下，装饰可以划分为yahoo.co.jp的链接。您可以使用它进行装饰，例如按站点添加图标。
仅应用那些特定属性值具有“指定字符串”或“带有连字符的字符串添加到指定字符串”的元素（CSS 2）
当您编写如下所示的选择器时，
字符串“γ”形式为“γ”+连字符+“字符串”的字符串
它只能应用于具有“β属性”的“α元素”，其中“α属性”的值被指定为值。
α[β| =“γ”]
如何描述各种语言
在HTML，CSS和其他简单的表示“英语”的语言符号，“恩”，展现了“英语在美国”和“EN-US”，展现了“英国英语”，“EN-GB”，“有一种表示方法，例如“en-au”表示“澳大利亚的英语”。它是一种使用连字符连接语言名称和国家/地区名称的描述方法
在日语的情况下，除了简单地表示日语的“ja”之外，还存在表示“日本日语”的描述方法“ja-jp”。
编写这样的选择器的方法被准备为专用于这些语言表达的“限制样式的应用范围的方法”
例如，考虑如下情况：由具有表示“链接站点的语言”的“hreflang属性”的元素创建的链表如下所述。
ja-jp">日本页面 en-us ">美国网页 zh-gb ">英国网页 en-hk ">香港（英文）页面 zh-hk ">香港（中文）页面
此时，在描述CSS时如下，
a[ hreflang | = “ en ”] {color：red;
仅装饰指向英文页面的链接
如右图所示，只有“hreflang属性中具有以”en“或”en-“开头的值的元素为红色。
仅应用包含一个特定属性值的元素（CSS 2）
当如下描述时，当可以描述由空白界定的多个值的“β属性”甚至包含一个“γ”值时，可以仅应用于“α元素”。你可以。
α[β~=“γ”]
对于HTML的“a”元素，您可以添加“rel属性”以指示“从当前页面查看的登录页面的关系”。例如，
rel="glossary">词汇表
，您可以指示链接的yug.html页面是提供与当前页面相关的“词汇表”的页面。多个值可以写为此rel属性的值，由空格字符分隔，例如索引，版权，章节，附录和帮助。例如，以下描述属性值中的版权（版权）和帮助（帮助）。
rel="copyright help">版权·帮助页面
这时，
a[ rel~ = “ help ”] {color：red;
当如上所述描述CSS时，只有当rel的值包含在“rel”属性的值中时，才可以用红色装饰它。
CSS选择器描述方法（上半部分）
这一次，关于CSS选择器，以及如何定位的后裔关系和相邻关系的元素，我们向您展示如何通过属性来缩小目标和属性值。CSS选择器还具有称为“伪类”或“伪元素”的写入样式，可以指定更详细的条件。我们将在下一篇文章中详细介绍它们。