css选择器

0.选择器优先级

CSS选择器的优先级顺序按照以下规则：

　　1. !important：最高优先级的标志，添加在声明后面，会覆盖其他所有的样式。

　　2. 行内样式：包含在HTML元素标签内的样式，会覆盖外部样式表和内部样式表中的样式。

　　3. ID选择器：通过ID选择器选中的元素，具有比其他选择器更高的优先级。

　　4. 类选择器、属性选择器和伪类选择器：这些选择器的优先级相同，如果同一元素同时出现这几种选择器，优先级按照后面的选择器计算。

　　5. 元素选择器、伪元素选择器：这些选择器的优先级最低，只有在其他选择器相同时，才会使用元素选择器和伪元素选择器。

一、id选择器

要对某个特定的元素进行修饰可以使用 id 来定位它

<div id="box">
    ......
</div>

#box {
    background-color: pink;
}

二、类（class）选择器

可以定位多个元素，当对多个元素进行样式修饰的时候可以使用class

<div class="box">
    类
</div>

.box {
    color: red;
}

三、标签选择器

修改页面上所有标签的样式

a { color: red; }

四、后代选择器

后代选择器（descendant selector）又称为包含选择器。

• 后代选取器(以空格分隔)

即两个元素之间的层次间隔可以是无限的。

<div>
    <ul>
        <li>
            <span></span>
        </li>
    </ul>
</div>

ul li {
    align-text: center;
}
ul span {
    font-size: 16px;
}   

五、相邻选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

<div>
    <h1>
    </h1>
    <p>
    </p>
    <p>
    </p>
    <p>
    </p>
</div>

h1 + p {
    color: #ffff;
    font-size: 18px;
}
p+p {
    color: red;
}

用一个结合符只能选择两个相邻兄弟中的第二个元素。上述css代码(h1 + p)只能修改第一个p元素的样式，
（p + p)只能修改第2，3个p元素的样式

普通相邻兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p
{
background-color:yellow;
}

六、子选择器

子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

h1 > strong {color:red;}
/* 这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响*/

七、通配符选择器

通配符选择器用 * 号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

* {
    padding: 0;
    margin: 0;
}
/* 清除所有 HTML 标记的默认边距 */

八、属性选择器

<p title="hello">
</p>
<p>
</p>

*[title] {
    color: red;
}
/* 把包含标题（title）的所有元素变为红色 */

attr可以是class ；元素自身的属性

[target=_blank] 选择带有 target="_blank" 属性的所有元素。
[class*="con"] 选择所有类名中带有con的元素
a[href^="https"]    选择其 src 属性值以 "https" 开头的每个 <a> 元素。
a[href$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。
a[href*="w3school"] 选择其 href 属性值中包含 "abc" 子串的每个 <a> 元素

[attr=val]：选择属性"attr"等于val的所有元素；

[attr~=val]：选择属性"attr"包含val的所有元素；

[attr|=val]：选择属性"attr"以val开头的所有元素；

[attr*=“val”]：选择所有类名中含有"val"的元素
[attr*=“val-”]：选择所有类名中含有"val-"的元素

[attr^=“val-”]：选择所有类名中以"val-"开头的元素

[attr$="-val"]：选择所有类名中以"-val"结尾的元素

/*注：前者的三个选择器中，val 必须是单独的一个个体存在.*/

九、伪类选择

1.第一种伪类

1.    :first-child{} // 用来选择父元素下的第一个子元素。
**注意：:first-child{}是根据父元素下所有子元素进行排序。**

2.    :last-child{}

3.    :nth-child(n){},(n为具体数字) // // 选中父元素下第n个子元素。

4.     :nth-child(n){} // 选中父元素下所有子元素，n为字母。

5.    :nth-child(2n){} 选中父元素下偶数行的子元素。

4.    :nth-child(even){} // 选中父元素下偶数行的子元素。

5.    :nth-child(2n+1){} // 选中父元素下奇数行的子元素。

6.    :nth-child(odd){} // 选中父元素下奇数行的子元素。
7.    :nth-child(a - n){} // 选中父元素下所有子元素的前a个元素，n为字母,a为数字
       :nth-child(n+b){} // 选中父元素下所有子元素的b个元素之后的所有元素，n为字母,b为数字

2.第二种

同类型

1.    first-of-type
/*
    :first-of-type{},用来选择父元素下的第一个子元素。
    注意：:first-of-type{}是根据父元素下所有同类型的子元素进行排序。
*/

2.    last-of-type{} 

3.    nth-of-type(n){}  // 选中父元素下同类型的所有子元素，n为字母

4.    :nth-of-type(n){},(n为具体数字) // 选中父元素下同类型的第n个子元素

5.    :nth-of-type(2n){} // 选中父元素下同类型的所有偶数子元素，n为字母

6.    :nth-of-type(even){}

7.    :nth-of-type(2n+1){} // 选中父元素下同类型的所有奇数子元素，n为字母

8.    :nth-od-type(odd){}

9.

10.

3.第三种

:not(选择器）

<input type="text" value="0" />
<input type="text" value="2" />
<input type="text" class="no-pink" value="3"/>

 input[type="text"]:not(.no-pink) {
    display: block;
    width: 100px;
    height: 10px;
    margin-bottom: 10px;
    padding-left: 10px;
    color: pink;
}
/*input[type=“text”]的样式不作用到第三个input上*/

4.其余的

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

/*
    注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
    注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
    注意：伪类的名称不区分大小写。
*/

十、伪元素选择器

伪元素种类

::before 选择符 在 指定的标签元素内部的 前面 插入内容 ;
::after 选择符 在指定的标签元素内部的 后面 插入内容 ;
 /*content 属性 : 上述两个选择器 必须设置 content 属性 ;
元素类型 : 上述两个选择器 添加 的元素 是 行内元素 ;
如果要为其配置宽高 , 需要 将显示模式 display 转为块级元素 block 或 行内块元素 inline-block ;
伪元素本质 : 在 dom 中看不到插入的元素 ;
权重 : 伪元素选择器 的权重 与 标签选择器 权重相同 , 权重为 1 ; */