H5：选择器 Selectors
2022-03-17 本文已影响0人
春暖花已开
选择器 Selectors
1、相邻兄弟选择器 Adjacent sibling combinator
+ 将两个选择器分隔开，只有 当第二个元素紧跟在第一个元素之后，并且 两个元素都是同一父元素的子元素 时，才匹配第二个元素。
语法：
former_element + target_element { style properties }
示例：
CSS
li:first-of-type + li {
color: red;
}
HTML
<ul>
<li>One</li>
<li>Two!</li>
<li>Three</li>
</ul>
相邻兄弟选择器
2、属性选择器 Attribute selectors
根据元素的属性及属性值来选择元素。
语法：
- [attr]： 用于选取带有指定属性的元素。
- [attr=value]：用于选取带有指定属性和值的元素。
- [attr~=value]：用于选取属性值中包含指定词汇的元素。（属性名为attr的元素，其值是一个以空格分隔的单词列表，其中一个就是value。）
- [attr|=value]：表示属性名为attr的元素，其值可以完全是value，也可以直接以value开头，后跟连字符- (U+002D)。它经常用于语言子代码匹配。
- [attr^=value]：匹配属性值以指定值开头的每个元素。
- [attr$=value]：匹配属性值以指定值结尾的每个元素。
- [attr*=value]： 匹配属性值中包含指定值的每个元素。表示属性名为attr的元素，其值在字符串中至少出现一次。
- [attr operator value i]：在右括号前添加i(或i)将导致对值进行不区分大小写的比较(对于ASCII范围内的字符)。
示例一：用在链接上
CSS
a {
color: blue;
/* Internal links, beginning with "#" */
a[href^='#'] {
color: yellow;
/* Links with "example" anywhere in the URL */
a[href*='example'] {
background-color: black;
/* Links with "insensitive" anywhere in the URL,
reguardless of capitalization */
a[href*='insensitive' i] {
color: lime;
/* Links that end in ".org" */
a[href$='.org'] {
color: red;
/* Links that start with "https" and end in ".org" */
a[href^='https'][href$='.org'] {
color: green;
HTML
<ul>
<li><a href="#internal">Internal link</a></li>
<li><a href="http://example.com">Example link</a></li>
<li><a href="#InSensitive">Insensitive internal link</a></li>
<li><a href="http://example.org">Example org link</a></li>
<li><a href="https://example.org">Example https org link</a></li>
</ul>
示例二：用在语言上
CSS
/* All divs with a `lang` attribute are bold. */
div[lang] {
font-weight: bold;
}
/* All divs without a `lang` attribute are italicized. */
div:not([lang]) {
font-style: italic;
}
/* All divs in US English are blue. */
div[lang~="en-us"] {
color: blue;
}
/* All divs in Portuguese are green. */
div[lang="pt"] {
color: green;
}
/* All divs in Chinese are red, whether
simplified (zh-CN) or traditional (zh-TW). */
div[lang|="zh"] {
color: red;
}
/* All divs with a Traditional Chinese
`data-lang` are purple. */
/* Note: You could also use hyphenated attributes
without double quotes */
div[data-lang="zh-TW"] {
color: purple;
}
HTML
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
3、子元素选择器 Child selector
> 被放置在两个CSS选择器之间。它只匹配由第二个选择器匹配的元素，也就是由第一个选择器匹配的元素的直接子元素。
第二个选择器匹配的元素必须是第一个选择器匹配的元素的直接子元素。这比后代选择器更严格，后代选择器匹配所有由第二个选择器匹配的元素，而不考虑DOM上的“跳跃”次数。
语法：
selector1 > selector2 { style properties }
示例：
CSS
span {
background-color: aqua;
}
div > span {
background-color: yellow;
}
HTML
<div>
<span>Span #1, in the div.
<span>Span #2, in the span that's in the div.</span>
</span>
</div>
<span>Span #3, not in the div at all.</span>
4、类选择器 Class selectors
根据元素的class属性的内容匹配元素。
语法：
.class_name { style properties }
示例：
CSS
.red {
color: #f33;
}
.yellow-bg {
background: #ffa;
}
.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
HTML
<p class="red">This paragraph has red text.</p>
<p class="red yellow-bg">This paragraph has red text and a yellow background.</p>
<p class="red fancy">This paragraph has red text and "fancy" styling.</p>
<p>This is just a regular paragraph.</p>
5、后代选择器 Descendant combinator
通常由一个空格(" ")字符表示——组合了两个选择器，这样，如果第二个选择器匹配的元素有一个父元素(或父元素的父元素等)匹配第一个选择器，则第二个选择器匹配的元素被选中。
语法：
selector1 selector2 {
/* property declarations */
}
示例：
CSS
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
HTML
<ul>
<li>
<div>Item 1</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
<li>
<div>Item 2</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
</ul>
6、普通兄弟选择器 General sibling combinator
~ 将两个选择符分隔开，并匹配第二个元素的所有迭代，它们位于 第一个元素之后 (虽然不一定是立即)，并且 是同一父元素的子元素。
语法：
former_element ~ target_element { style properties }
示例：
CSS
p ~ span {
color: red;
}
HTML
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<span>And this is a red span!</span>
<code>More code...</code>
<div> How are you? </div>
<p> Whatever it may be, keep smiling. </p>
<h1> Dream big </h1>
<span>And yet again this is a red span!</span>
7、ID选择器 ID selectors
根据元素ID属性的值来匹配元素。为了让元素被选中，它的id属性必须与选择器中给出的值完全匹配。
语法：
#id_value { style properties }
示例：
CSS
#identified {
background-color: skyblue;
}
HTML
<div id="identified">This div has a special ID on it!</div>
<div>This is just a regular div.</div>
8、选择器列表 Selector list
选择所有匹配的节点。
语法：
element, element, element { style properties }
示例一：使用逗号分隔的列表将选择器写在一行
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
示例二：使用逗号分隔的列表将选择器分组到多行
#main,
.content,
article {
font-size: 1.1em;
}
示例三：选择器列表失效
h1 { font-family: sans-serif }
h2:maybe-unsupported { font-family: sans-serif }
h3 { font-family: sans-serif }
不等同于下面的，因为选择器列表中一个不受支持的选择器会使整个规则失效。
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }
一种补救方法是使用 :is() 或 :where() 选择器，它们接受一个宽容的选择器列表。这将忽略列表中无效的选择器，但接受那些有效的选择器。如：
:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }
9、类型选择器 Type selectors
类型选择器根据节点名匹配元素。
语法：
element { style properties }
示例：
CSS
span {
background-color: skyblue;
}
HTML
<span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>
10、通用选择器 Universal Selectors
通用选择器(*)匹配任何类型的元素。
语法：
* { style properties }
示例：
CSS
* [lang^=en] {
color: green;
}
*.warning {
color: red;
}
*#maincontent {
border: 1px solid blue;
}
.floating {
float: left
}
/* automatically clear the next sibling after a floating element */
.floating + * {
clear: left;
}
HTML
<p class="warning">
<span lang="en-us">A green span</span> in a red paragraph.
</p>
<p id="maincontent" lang="en-gb">
<span class="warning">A red span</span> in a green paragraph.
</p>
