前端之选择器

选择器

用来指定网页上我们想要样式化的HTML元素。
选择器所选择的元素，叫做“选择器的对象”。

---

选择器参考表

---

类型选择器

又名“标签名选择器”或者是”元素选择器“，因为它在文档中选择的对象是一个HTML标签/元素。

<style>
span {
    background-color: yellow;
}

strong {
    color: blue;
}

em {
    color: green;
}
</style>

        <h1>类型（元素）选择器</h1>
        <p>又名“<strong>标签名选择器</strong>”</p>
        <p>或者是“<span>元素选择器</span>”，</p>
        <p>因为它在文档中选择的对象是一个<em>HTML标签/元素</em>。</p>

---

全局选择器

*（代指全局选择器）选中了文档中的所有内容（或父元素中的所有内容）。

<style>
*{
    border:3px solid black;
}
</style>

---

* 让选择器更易读

选中所有article元素的第一个子元素，设置为热粉色。
统一的文章标题就设置好了。

<style>
article *:first-child{
    color: hotpink;
}
</style>

        <article>
            <h2>我是第一篇文章的标题</h2>
            <p>我是第一篇文章的段落内容。</p>
        </article>
        <article>
            <h2>我是第二篇文章的标题</h2>
            <p>我是第二篇文章的段落内容。</p>
        </article>

---

类选择器

先定义类，才有选择类。

元素内添加上

class="类名"

属性，就可以添加上该类的样式。

语法：

.类选择器名{
	声明;
}

类选择器：

<style>
.italic{
    /* 斜体 */
    font-style: italic;
}
.italic.red{
    /* 斜体 */
    font-style: italic;
    color: red;
}
</style>

类选择器的使用

<h2 class="italic">我是类选择器实例</h2>
<h2 class="italic red">我是类选择器实例</h2>

---

指向特定元素的类

限定了元素的种类。

<style>
h3.highlight{
    background-color: hotpink;
}

p.highlight{
    background-color: pink;
}
</style>

注意：中间没有空格。

<h3 class="highlight">指向特定元素的类</h3>
<p class="highlight">指向特定元素的类</p>

---

id选择器

元素内添加上

id="id名"

和类选择器是用法相同。
用法一：

<style>
/* 用法一： */
#one{
    background-color: green;
}

/* 用法二： */
p#two{
    background-color: red;
}
</style>

<h2 id="one">我是id选择器实例一</h2>
<p id="two">我是id选择器实例二</p>

网页实例

---

属性选择器

属性选择器用来选中带有特定属性的元素。
属性选择器是基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素。

元素[元素属性（值）]{
	声明；
}

• li[class] 能匹配任何有class属性li元素。

<style>
ul li[class]{
    font-size: 2em;
}
</style>

    <ul>
        <li>Item one</li>
        <li class="a">Item two</li>
        <li class="a b">Item three</li>
        <li class="ab">Item four</li>
    </ul>

• li[class=“a” ]匹配只带有一个a类的li元素。

<style>
ul li[class="a"]{
    color: red;
}
</style>

• li[class~=“a”] 匹配带有一个a类的所有的li元素。（只需要含有）至少有一个独立且相同的。
• 与 * 不同， *是含有就好，哪怕是某一个的一部分。

<style>
ul li[class~="a"]{
    font-weight: bolder;
}
</style>

网页实例

---

子字符串匹配选择器

1. (^) 开头
   选定class属性值以指定字符串开头的所有元素。

<style>
ol li[class^="a"]{
    font-size: 2em;
}
</style>

<ol>
    <li>Item one</li>
    <li class="a">Item two</li>
    <li class="a b">Item three</li>
    <li class="ab">Item four</li>
</ol>

3. ($) 结尾
   选定class属性值以指定字符串结尾的所有元素。

<style>
ol li[class$="a"]{
    background-color: yellow;
}
</style>

4. (*) 含有

<style>
ol li[class*="a"]{
    font-weight: bold;
}
</style>

---

大小写敏感

子字符串匹配对大小写敏感的，如果在[ ]内的末尾加上字母 i ，就会忽略大小写进行匹配。

<style>
dl dd[class^="a"]{
    background-color: hotpink;
}
</style>

<dl>
    <dd>Item one</dd>
    <dd class="a">Item two</dd>
    <dd class="A b">Item three</dd>
    <dd class="Ab">Item four</dd>
</dl>

<style>
dl dd[class^="a" i]{
    background-color: hotpink;
}
</style>

网页实例
下一节：前端之伪类、伪元素

nth-of-type与nth-child的区别