2、css 选择器

标签选择

使用 * 可为所有元素设置样式。

* {
    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>