css权威指南（2）:选择器

类选择器：
类选择器的用法很简单，个人最常用的写法如下：

.warning{
    color: red;
}

今天看了书，发现还有这种写法：

p.warning{
    color: red;
    //其class属性包含词warning的所有段落
}

选择器会匹配class属性包含warning的所有p元素，其他任何类型的元素都不会匹配，不管是否有此class属性，

div.warning{
    color: red;
}
.warning{
    color: blue
}

<div class="warning">
    hello 
</div>
<p class="warning">world</p>

其显示如下：

由此可见div元素虽然有.warning的样式，但并未生效

多类选择器：
一般写法如：

<div class="warning urgent">
    hello 
</div>

可以分别设置.warning和.urgent的样式

.warning{
    color: red;
}
.urgent{
    background: blue;
}

但如果把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）
如：

.warning.urgent{
    background: blue;
}

<div class="warning urgent">
    hello 
</div>
<p class="warning message">world</p>

显示如下：

p元素因类选择器不匹配，样式不生效

属性选择器
1.简单属性选择器
如果希望选择有某个属性的元素，而不论该属性的值是什么，可以使用简单的属性选择器

h1[class]{
    color:red;
}
//可以选择有class值的所有h1元素，使其文本为红色

还可以根据多个属性进行选择，只需将属性选择器连接在一起即可。

a[href][title] {
    font-weight: bold;
}
//可以将同时又href和title属性的HTML超链接的文本设置为粗体

2.根据具体属性值选择
选择有特定属性值的元素

a[href='https://www.baidu.com']{
    color: blue;
}

<a href="https://www.baidu.com"> hello </a> //文本为红色
<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor">world</a> //不受影响

值的注意的是，这种格式要求必须与属性值完全匹配，如果遇到的值本身包含一个用空格分隔的值列表，匹配就会出问题。

h1[class='warning urgent'] {
    color:yellow;
}

<h1 class="warning urgent">hello</h1>

这是个安全串匹配，该规则会选择class属性值为warning urgent的所有h1元素，同时要求属性值urgent在后，warning在前，中间有空格
3.根据部分属性值选择
前面介绍的是完全串匹配，有时候不需要匹配完全，这就需要根据部分值选择元素

[foo^="bar"]    选择foo属性值以"bar"开头的所有元素
[foo$="bar"]    选择foo属性值以"bar"结尾的所有元素
[foo*="bar"]    选择foo属性值中包含子串"bar"的所有元素

选择子元素(>)
在某些情况下，可能不想选择一个任意的后代元素，而是希望缩小范围，只选择一个元素的子元素．可以用大于号（＞）
　　

div > a {
    color: red;
}

<div>
    <h1>
        hello
        <a href="">world</a>
    </h1>
        <a href="">
            juzipchy
        </a>
</div>

这个规则会把div下面出现的第一个a元素变成红色，第二个a元素无变化

因为第一个a是div的直接子元素，第二个a为div的后代元素．子选择器限制为值匹配文档树结构中直接相连的元素

选择相邻兄弟元素（＋）
要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟结合符，这表示为一个加号（＋）

div + h1 {
    color: red;
}

<div>
    hello world
</div>
<h1>
    jin
</h1>
<h1>
    juzipchy
</h1>

第二个h1并不是div的相邻元素，样式无改变，
要记住：用一个结合符只能选择两个相邻兄弟中的第二个元素

伪类选择器
１．链接伪类：
：link
：visited
2.动态伪类：
：hover
：active
3.选择第一个元素
：first-child选择器用于选取属于其父元素的首个子元素的指定选择器。

p:first-child{ 
    background-color:yellow;
}

最常见的错误是认为p:first-child会选择p元素的第一个子元素，实际上是选择作为某元素的第一个子元素为p元素的元素．

h1 a:first-child{
    color:blue;
}

<h1>
    <a href="">jin</a>
</h1>
<h1>
    juzipchy
</h1>

伪元素选择器
１．:first-letter：设置一个块级元素首字母的样式，而且仅对该字首字母设置样式
２.：first-line：影响元素中第一个文本行
注意：所有的伪元素都必须放在出现该伪元素的选择器的最后面，因此如果写成p:first-line em就是不合法的，因为伪元素出现在选择器主体前面
３.：before 插入生成的内容，并设置其样式
４.：after 插入生成的内容，并设置其样式