CSS选择器

概念

使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

id选择器

id选择器可以为标有特定id的HTML指定特定的样式。一般来说，一个页面中标签的id名称，必须唯一且不能重复。

示例：为id为pt的段落添加红色字体

<p id="pt">这是一个id为pt的段落</p>

添加样式：

		#pt{
            color: red;
        }

class选择器

class选择器可以为标有特定class的HTML元素指定特定的样式。一般来说，一个页面中带有标签的class标签的名称，可以不唯一且可以重复。

示例：为class为pi的段落添加绿色字体样式，为class为pu的段落添加加粗样式

<p class="pi">这是一个class为pi的段落</p>
<p class="pu">这是一个class为pu的段落</p>

.pi{
        color: chartreuse;
   }
.pu{
        font-weight: bolder;
   }

标签选择器

标签选择器可以根据标签为元素添加样式，例如a标签，b标签，div标签，p标签等等

示例：为所有段落标签添加紫色字体样式，为所有超链接添加红色字体样式

	<p>这是p标签段落</p>
    <a href="#">这是超链接标签</a>
    <p>这是p标签段落</p>
    <p>这是p标签段落</p>
    <a href="#">这是超链接标签</a>
    <p>这是p标签段落</p>

a{
    color: red;
 }
p{
    color: rgb(127, 7, 151);
 }

子代选择器

子代选择器可以选择当前元素的所有儿子元素。定义的时候用>隔开

示例：为div标签下所有h1儿子节点设置为红色文本样式

    <div>
        <h1>这是h1标签</h1>
        <p>这是p标签段落</p>
        <a href="#">这是超链接标签</a>
        <p>这是p标签段落</p>
    </div>

div>h1{
            color: red;
        }

后代选择器

用于嵌套元素标签的一种选择器，定义时用空格隔开

示例：为所有段落标签中的超链接标签添加红色文本

<p class="part">
        <a href="#">这是p标签中的一个a标签</a>
    </p>

        .part a{
            color: red;
        }

相邻兄弟选择器

可选择紧接在另一元素后的元素，且二者有相同的父元素，可以使用相邻兄弟选择器，定义时用+隔开

示例：为div之后第一个p标签元素设置黄色文本样式

		<div>
            <p>div内部段落</p>
        </div>
        <p>div之后的第一个元素</p>
        <p>div之后的第二个元素</p>

        div+p{
            color: yellow;
        }

后续兄弟选择器

选取所有指定元素之后的相邻兄弟元素。定义的时候用~隔开。

示例：为div之后的所有p标签元素设置为红色文本样式

		<div>
            <p>div内部段落</p>
        </div>
        <p>div之后的第一个p元素</p>
        <p>div之后的第二个p元素</p>

        div~p{
            color: red;
        }

交集选择器

选择的元素必须同时满足多个条件才可以被选择，定义时用标签名.ID名/类名。

示例：为所有p标签且class为part的段落添加绿色文本样式

<p class="part">这是p标签且class为part的段落</p>
<h3>这是一个h3标题</h3>
<p>这是一个p标签</p>

p.part{
            color: chartreuse;
        }

并集选择器

当多种元素共享某种属性时使用，定义时用","隔开

示例：为p标签，h1标签，class=‘link’,id='cilick’的这几种元素添加红色文本样式

        <h1>这是一个h3标题</h1>
        <p>这是一个p标签</p>
        <a href="#" class="link">这是一个class为link的a标签</a><br>
        <b id="link">这是一个id为link的b标签</b>

        p,h1,.link,#link{
            color: red;
        }

通配符选择器（通用选择器）

可以配任何标签，常用于页面统一样式

示例：将页面所有元素的字体设置成红色文本样式

        <h1>这是一个h3标题</h1>
        <p>这是一个p标签</p>
        <a href="#" class="link">这是一个class为link的a标签</a><br>
        <b id="link">这是一个id为link的b标签</b>

        *{
            color: red;
        }

伪类选择器

anchor伪类（状态伪类）

给l链接设置不同状态，为选择器添加一些特殊效果

a:link {color:#FF0000;} 	/* 未访问时的链接状态 */
a:visited {color:#00FF00;}  /* 已访问的链接状态 */
a:hover {color:#FF00FF;} 	/* 鼠标覆盖链接状态 */
a:active {color:#0000FF;} 	/* 已选中的链接状态（点击时跳转前的样式） */

推荐使用顺序：

link>visited>hover>active

input伪类（含表单伪类）

选择器	示例说明
:focus	选择元素后具有焦点
:checked	选择所有选中的表单元素
:disabled	选择所有禁用的表单元素
:enabled	选择启用的表单元素
:in-range	选择元素指定范围内的值
:out-of-range	选择元素指定范围外的值
:invalid	选择所有无效值的元素
:valid	选择所有有效值的元素
:required	选择含有"required"属性元素
:optional	选择没有"required"属性元素
:read-only	选择只读属性元素
:read-write	选择可写属性元素

other伪类（结构化伪类）

选择器	示例说明
:not(selector)	选择所有p元素以外的元素
:empty	选择所有没有子元素的p元素
:first-child	选择所有p元素的第一个子元素
:first-of-type	选择的每个p元素是其父元素的第一个p元素
:last-child	选择所有p元素的最后一个子元素
:last-of-type	选择每个p元素是其父元素的最后一个p元素
:nth-child(n)	选择所有p元素的父元素的正数第二个为p的子元素
:nth-of-type(n)	选择所有p元素正数的第二个p的子元素
:nth-last-child(n)	选择所有p元素的父元素的倒数第二个子元素
:only-child	选择所有仅有一个子元素的p元素
:only-of-type	选择所有仅有一个子元素为p的元素
:first-letter	选择每个p元素的第一个字母
:first-line	选择每个p元素的第一行
:before	在每个p元素之前插入内容
:after	在每个p元素之后插入内容

属性选择器

可以根据元素的属性及属性值来选择元素

示例1：为类型为text和button的input标签设置一下样式

        <input type="text" value="文本框">
        <input type="button" value="按钮">

        input[type="text"]{
            width: 150px;
            height: 100px;
            display: block;
            margin-bottom: 10px;
            background-color: rgb(203, 92, 198);
        }
        input[type="button"]{
            width: 120px;
            margin-left: 40px;
            display: block;
        }

示例2：如果title中包含多个单词并且以空格分隔，只要其中有hello，则为当前标签设置为蓝色字体样式

		<h1>将适用于</h1>
        <h1 title="hello world">Hello world</h1>
        <p title="student hello">Hello css students</p>
        <h2>将不适用</h2>
        <p title="student">Hi css students</p>

子串匹配属性选择器

类型	描述
[abc^=“def”]	选择abc属性值以"def"开头的所有元素
[abc$=“def”]	选择abc属性以"def"结尾的所有元素
[abc*=“def”]	选择abc属性值中包含子串"def"的所有元素

示例：若希望对指向baidu的所有链接应用样式，不必为所有这些链接指定class，再根据这个类编写样式，而只需要编写以下规则：

        <a href="#">链接1</a>
        <a href="baidu.com">百度</a>
        <a href="#">链接2</a>
        <a href="baidu.com">百度</a>

        a[href*="baidu.com"]{
            color: red;
        }