标签选择
使用 * 可为所有元素设置样式。
* {
text-decoration: none;
color: #6c757d;
}
根据标签为元素设置样式
h1 {
color: red;
}
同时设置多个元素组合
h1,h2 {
color: red;
}
类选择器
类选择器是为一类状态声明样式规则，下面是把文本居中定义为类样式。
<style>
.text-center {
text-align: center;
}
</style>
<h1 class="text-center">test.com</h1>
<h2 class="text-center">test.com</h2>
将类选择器指定为具体标签。这样样式的权重就提高了
注意span.help-block不能写成 span .help-block。标签选择器和类选择器中间加了空格的话，就变成了 span下面所有class是help-block的选择器了
<style>
span.help-block {
font-size: 12px;
color: #aaa;
background: none;
}
</style>
<span class="help-block">感谢访问测试平台</span>
ID选择器
<style>
#container {
background: red;
}
</style>
<h1 id="container">test.com</h1>
结构选择器
| 选择器 | 示例 | 描述 | 名称 |
|---|---|---|---|
| element element | div p | 选择div元素内部的所有p元素 | 后代选择器 |
| element>element | div>p | 选择父元素为div元素的所有p元素 | 子元素选择 |
| element+element | div+p | 选择紧接在div元素之后的p元素 | 紧邻兄弟元素 |
| element~element2 | p~ul | 选择p元素同级并在p元素后面的所有ul元素 | 后面兄弟元素 |
后代选择器 div p
HTML中元素是以父子级、兄弟关系存在的。后代选择器指元素内的元素（不只是子元素，是后代元素，子集，孙子级，所有的。。。）。
<style>
main article h2,main h1 {
color: green;
}
</style>
<main>
<article>
<h2 name="test">test.com</h2>
<aside>
<h2>test.com</h2>
</aside>
</article>
<h2 name="test.com">test.com</h2>
<h1>测试</h1>
</main>
子元素选择 div>p
子元素选择器中选择子元素，不包括孙级及以下元素。
<style>
main article>h2 {
color: green;
}
</style>
<main>
<article>
<h2 name="test">test.com</h2>
<aside>
<h2>test.com</h2>
</aside>
</article>
<h2 name="test.com">test.com</h2>
<h1>测试</h1>
</main>
紧邻兄弟元素 div+p
用于选择紧挨着的同级兄弟元素。
<style>
main article+h2 {
color: green;
}
</style>
<main>
<article>
<h2 name="test">test.com</h2>
<aside>
<h2>test.com</h2>
</aside>
</article>
<h2 name="test.com">test.com</h2>
<h1>测试</h1>
</main>
后面兄弟元素 p~ul
用于选择后面的所有指定的兄弟元素或者所有元素。
<style>
main article~* {
color: green;
}
main article~p {
color: red;
}
</style>
<main>
<article>
<h2 name="test">test.com</h2>
<aside>
<h2>test.com</h2>
</aside>
</article>
<h2 name="test.com">test.com</h2>
<h1>测试</h1>
</main>
<main>
<article>
<h2 name="test">test.com</h2>
<aside>
<h2>test.com</h2>
</aside>
</article>
<p name="test.com">test.com</p>
<p>测试</p>
<div>测试</div>
</main>
属性选择器
| 选择器 | 示例 | 描述 |
|---|---|---|
| [attribute] | [target] | 带有 target 属性所有元素 |
| [attribute=value] | [target=_blank] | targe 属性 等于"_blank" 的所有元素 |
| [attribute~=value] | [title~=test] | title 属性包含单词 "test" 的所有元素 |
| [attribute|=value] | [title|=hd] |
title 属性值为 "hd"的单词，或hd-cms 以-连接的的独立单词 |
| [attribute*=value] | a[src*="hdcms"] | src 属性中包含 "hdcms" 字符的每个 元素 |
| [attribute^=value] | a[src^="https"] | src 属性值以 "https" 开头的每个 元素 |
| [attribute$=value] | a[src$=".jpeg"] | src 属性以 ".jpeg" 结尾的所有 元素 |
为具有 class 属性的h1标签设置样式
<style>
h1[class] {
color: red;
}
</style>
<h1 class="container">test.com</h1>
约束多个属性
<style>
h1[class][id] {
color: red;
}
</style>
<h1 class="container" id="test" >test.com</h1>
具体属性值设置样式
<style>
a[href="https://www.test.com"] {
color: green;
}
</style>
<a href="https://www.test.com">测试</a>
<a href="">TEST</a>
^ 以指定值开头的元素
<style>
h2[name^="test"] {
color: red;
}
</style>
<h2 name="test">test.com</h2>
<h2 name="test.com">测试网址</h2>
$ 以指定值结尾的元素
<h2 name="test">test.com</h2>
<h2 name="day.com">day.com</h2>
<style>
h2[name$="com"] {
color: red;
}
</style>
属性内部任何位置出现值的元素，包含关系
<style>
h2[name*="test"] {
color: red;
}
</style>
<h2 name="test">test.com</h2>
<h2 name="www.test.com">test.com</h2>
~ 属性值中包含指定词汇的元素
h2[name~="test"] {
color: red;
}
...
<h2 name="test">test.com</h2>
<h2 name="test web">test.com</h2>
| 以指定值开头或以属性连接破折号的元素
<style>
h2[name|="test"] {
color: red;
}
</style>
<h2 name="test">test.com</h2>
<h2 name="test-web">test.com</h2>
网友评论