10、css选择器

标签选择器

作用：根据指定的标签名称，在当前页面中找到所有该标签，并设置属性

格式：标签名称{属性：值；.....}

注意：无法选择某一个

无论藏得多深都能被选中

只要是html中的标签都能被当做标签选择器

<style>

a{

color:red;

}

</style>

<a href="#">a</a>

id选择器

作用：根据指定的id的值，找到对应的标签 设置其属性

格式：#id的值{属性：值；....}

注意：1.都可以给html的标签 设置id属性

2.界面中的id的值不能相同

3.写id选择器是一定要在前面加上 #

4.id的取值需要遵守一些规范

1.只能由数字字母或下划线组成

2.值不能以数字开头

3.不能使用html中的标签 作为id的值

4.在企业开发中 如果你仅仅是为了设置样式，我们不会使用id选择器

因为id选择器在前端开发中 是留给javascript来使用的

#1input{

color: red;

}

<p id="input">必成高富帅</p>

类选择器

作用：根据指定的class的值，找到对应的标签，然后设置其属性

格式：.class的值{属性：值；....}

注意：1.都可以给html的标签 设置class属性

2.页面中的class的值可以相同

3.写class选择器时，一定要在前面加上 【.】

4.class的值得规范与id相同

5.单单设置样式时，第一时间想到class 最好不要使用id选择器

6.class可以设置多个值 方便选择

格式：<p class="值1 值2"></P>

.值1{} .值2{} 都有效果

错误格式：<p class="值1" class="值2"></P>

优点：减少代码的重复

实现代码的重用

.gfs{

font-size: 40px;

}

<p class="gfs">必成高富帅</p>

后代选择器

作用：找到指定标签的所有后代标签 并设置属性

格式：标签1 标签2{属性：值；......}

注意：1.后代选择器之间空格隔开

2.后代不仅仅是儿子 也包括孙子....

3.后代选择器不仅仅可以使用标签 还可以使用其他选择器【id/class ......】

.clone ul li p{

color: red;

}

<div class="clone">

<p class="cl">这是p标签2</p>

<p class="cl">这是p标签3</p>

<ul>

<li>

<p class="cl">这是p标签4</p>

</li>

</ul>

</div>

子元素选择器

作用：找到指定标签中，所指定的直接子元素 ，并设置其属性

格式：标签1>标签2{属性：值；....}

注意：1.子元素选择器会查找儿子，不会查找其他的标签

2.子元素选择器直接需要用>连接

3.子元素选择器不仅仅可以使用标签名称，也可以使用其他选择器

4.子元素选择器可以通过>一直延续下去

div>ul>li>p{

color: red;

}

<div class="di">

<p>这是p标签2</p>

<p>这是p标签3</p>

<ul>

<li>

<p class="cl">这是p标签4</p>

</li>

</ul>

</div>

在企业开发中，如果想选中标签中所有的特定标签 使用后代选择器

如果想选中标签中特定的儿子标签 使用子元素选择器

交集选择器

作用：给所有选择器选中的 或被标签选择的 相交的那一部分标签 设置其属性

格式：选择器1选择器2{属性：值；.....}

注意：1.选择器与选择器之间没有任何链接

2.选择器可以使用标签名/id/class

3.企业在交集选择器基本不用 【既然你都设置了 id/class 我干啥还要用交集】

并集选择器

作用：给所有选择器中选中的标签 添加属性

格式：选择器1，选择器2，选择器3，....{属性：值；....}

注意：1选择器之间有，隔开

2选择器可以写多个

兄弟选择器

相邻兄弟选择器 css2

作用：给指定选择器后面紧跟的选择器 选择的标签 添加样式

格式：选择器1+选择器2{属性：值；....}

注意：1相邻的兄弟选择器必须用+链接

2相邻的选择器只能选择紧跟其后的标签，不能选择隔开的

通用兄弟选择器 css3

作用：给指定选择器后面的所有选择器 选择的标签 添加样式

格式：选择器1~选择器2{属性：值；....}

注意：1通用的兄弟选择器必须用~链接

2通用的选择器是 指定选择器后面某个选择器选择的所有标签

无论有没有被隔开都可以被选中

/*h1+p{*/

/*color: red;*/

/*}*/

h1~p{

color: red;

}

<h1>第一个h1</h1>

<a href=""></a>

<p>第一个P</p>

<p>第二个P</p>

<a href="#"></a>

<div>

<a href="#">第一个a</a>

</div>

<div>

<a href="#">第二个a</a>

<a href="#">第三个a</a>

</div>

<h1>第二个h1</h1>

<p>第三个P</p>

<p>第四个P</p>

序选择器[css3中最具代表的选择器]

1.同级别的第几个

格式：：first-child 选取在同一级指定的第一个元素

: last-child 选取在同一级指定的最后一个元素

: nth-child(n) 选取在同一级指定的第N一个元素

: nth-last-child(n) 选取在同一级指定的倒数第N一个元素

：only-child 选择父元素中唯有该选择器的元素

: nth-child(odd) 选取在同一级中奇数行的元素

: nth-child(even) 选取在同一级中偶数行的元素

: nth-child(xn+y) x和y是用户自定义的 n是一个记数器 从0开始递增+1

如去同一级别是三倍数行 ：nth-chilid(3n+0)

注意：不区分类型

2.同类型的第几个

格式：：first-of-type 选取在同一级同类型指定的第一个元素

: last-of-type 选取在同一级同类型指定的最后一个元素

: nth-of-type(n) 选取在同一级同类型指定的第N一个元素

: nth-last-of-type(n) 选取在同一级同类型指定的倒数第N一个元素

：only-of-type 选择父元素中唯有该选择器类型的元素

: nth-of-type(odd) 选取在同一级同类型中奇数行的元素

: nth-of-type(even) 选取在同一级同类型中偶数行的元素

: nth-of-type(xn+y) x和y是用户自定义的 n是一个记数器 从0开始递增

如去同一级别是三倍数行 ：nth-chilid(3n+0)

注意:区分类型

/*h1:first-child{*/

/*color:red;*/

/*}*/

/*p:last-child{*/

/*color:red;*/

/*}*/

/*p:nth-child(3){*/

/*color:red;*/

/*}*/

/*p:nth-last-child(2){*/

/*color:red;*/

/*}*/

/*a:only-child{*/

/*color: red;*/

/*}*/

/*p:nth-child(odd){*/

/*color:red;*/

/*}*/

/*p:nth-child(even){*/

/*color:red;*/

/*}*/

/*p:nth-child(3n+0){*/

/*color:red;*/

/*}*/

/*p:first-of-type{*/

/*color:red;*/

/*}*/

/*p:last-of-type{*/

/*color:red;*/

/*}*/

/*p:nth-of-type(2){*/

/*color:red;*/

/*}*/

a:only-of-type{

color:red;

}

<h1>第一个h1</h1>

<p>第一个P</p>

<p>第二个P</p>

<a href="#">aaaaaa</a>

<div>

<a href="#">第一个a</a>

</div>

<div>

<a href="#">第二个a</a>

<a href="#">第三个a</a>

</div>

<h1>第二个h1</h1>

<p>第三个P</p>

<p>第四个P</p>

属性选择器

格式 [属性] 根据指定的属性名找到对应的标签

[属性=值] 根据属性和值 找到对应的标签

[属性^=值] 选取属性的取值以什么开头的标签

[属性$=值] 选取属性的取值以什么结尾的标签

[属性*=值] 选取属性的取值包含指定的值的标签

[type*=sswo]{

width: 200px;

}

<input type="text" name="" id="name"><br>

<input type="password" id="pwd" >

通配符选择器

作用：给当前页面上所有的标签设置属性

格式：*{属性：值；。。。。}

注意：企业中一般不使用，因为页面标签过多时，通赔符 会遍历页面的所有标签然后设置值 其性能变差、

伪元素选择器

:after

属性 content 作用给标签添加文本/图片/多媒体