03-CSS选择器
2018-10-28 本文已影响0人
喝酸奶要舔盖__
标签选择器
- 什么是标签选择器?
- 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
-
注意点:
- 1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
- 2.标签选择器无论标签藏得多深都能选中
- 3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)
<style>
p{
color: red;
}
</style>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
id选择器
- 什么是id选择器?
- 作用: 根据指定的id名称找到对应的标签, 然后设置属性
-
注意点:
- 1.每个HTML标签都有一个属性叫做id, 也就是说每个标签都可以设置id
- 2.在同一个界面中id的名称是不可以重复的
- 3.在编写id选择器时一定要在id名称前面加上#
- 4.id的名称是有一定的规范的
- 4.1id的名称只能由字母/数字/下划线
a-z 0-9 _ - 4.2id名称不能以数字开头
- 4.3id名称不能是HTML标签的名称不能是a h1 img input ...
- 4.1id的名称只能由字母/数字/下划线
- 5.在企业开发中一般情况下如果仅仅是为了设置样式, 我们不会使用id ,因为在前端开发中id是留给js使用的
<style>
#identity1{
color: red;
}
#identity2{
color: green;
}
#identity3{
color: yellow;
}
#identity4{
color: blue;
}
</style>
<p id="identity1">迟到毁一生</p>
<p id="identity2">早退穷三代</p>
<p id="identity3">按时上下班</p>
<p id="identity4">必成高富帅</p>
类选择器
- 什么是类选择器?
- 根据指定的类名称找到对应的标签, 然后设置属性
-
注意点:- 1.每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名
- 2.在同一个界面中class的名称是可以重复的
- 3.在编写class选择器时一定要在class名称前面加上.
- 4.类名的命名规范和id名称的命名规范一样
- 5.类名就是专门用来给CSS设置样式的
- 6.在HTML中每个标签可以同时绑定多个类名<标签名称 class="类名1 类名2 ...">
<style>
.c1{
font-size: 50px;
}
.c2{
color: blue;
}
</style>
<p class="c1">我是段落1</p>
<p class="c2 c1">我是段落2</p>
id选择器和类选择器区别
- 一个HTML标签只能绑定一个id名称
一个HTML标签可以绑定多个class名称 - id选择器是以#开头
class选择器是以.开头 - id一般情况下是给js使用的, 所以除非特殊情况, 否则不要使用id去设置样式
- 一般情况下在企业开发中要注重冗余代码的抽取, 可以将一些公共的代码抽取到一个类选择器中, 然后让标签和这个类选择器绑定即可
后代选择器
- 什么是后代选择器?
- 找到指定标签的所有特定的后代标签, 设置属性
-
注意点:
- 1.后代选择器必须用空格隔开
- 2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代
- 3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
- 4.后代选择器可以通过空格一直延续下去
<style>
#identity p{
color: red;
}
</style>
<p>我是段落</p>
<div id="identity" class="para">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>
<!--<p id="iii" class="ccc">我是段落</p>-->
<p>我是段落</p>
</li>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
子元素选择器
- 什么是子元素选择器?
- 找到指定标签中所有特定的直接子元素, 然后设置属性
-
注意点:
- 1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
- 2.子元素选择器之间需要用>符号连接, 并且不能有空格
- 3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
- 4.子元素选择器可以通过>符号一直延续下去
<style>
div>ul>li>p{
color: red;
}
</style>
<div id="identity">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li><p>我是段落</p></li>
</ul>
</div>
后代选择器和子元素选择器区别
-
1.后代选择器和子元素选择器之间的区别?
- 后代选择器使用空格作为连接符号
- 子元素选择器使用>作为连接符号
- 后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿
子/孙子..., 只要是被放到指定标签中的特定标签都会被选中 - 子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只
会选中特定的儿子标签
-
2.后代选择器和子元素选择器之间的共同点
- 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
- 后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
选择器1>选择器2>选择器3>选择器4{}
-
3.在企业开发中如何选择
- 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器
- 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器
交集选择器
- 什么是交集选择器?
- 作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
-
注意点:
- 1.选择器和选择器之间没有任何的连接符号
- 2.选择器可以使用标签名称/id名称/class名称
- 3.交集选择器仅仅作为了解, 企业开发中用的并不多
<style>
p.para1{
font-size: 50px;
}
</style>
<p>我是段落</p>
<p>我是段落</p>
<p class="para1" id="identity">我是段落</p>
<p class="para1">我是段落</p>
<p>我是段落</p>
并集选择器
- 什么是并集选择器?
- 给所有选择器选中的标签设置属性
-
注意点:
- 1.并集选择器必须使用,来连接
- 2.选择器可以使用标签名称/id名称/class名称
<style>
.ht,.para{
color: blue;
}
</style>
<h1 class="ht">我是标题</h1>
<p class="para">我是段落</p>
兄弟选择器
相邻兄弟选择器
- 相邻兄弟选择器 CSS2
- 给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:
选择器1+选择器2{
属性:值;
}
- 注意点:
- 1.相邻兄弟选择器必须通过+连接
- 2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
通用兄弟选择器
- 通用兄弟选择器 CSS3
- 给指定选择器后面的所有选择器选中的所有标签设置属性
格式:
选择器1~选择器2{
属性:值;
}
- 注意点:
- 1.通用兄弟选择器必须用~连接
- 2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
<style>
/*相邻兄弟选择器*/
h1+p{
color: yellow;
}
/*通用兄弟选择器*/
h1~p{
color: green;
}
</style>
<h1>我是标题</h1>
<a href="#">我是超链接</a>
<a href="#">我是超链接</a>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
序选择器
- 同级别的第几个
-
:first-child选中同级别中的第一个标签 -
:last-child选中同级别中的最后一个标签 -
:nth-child(n)选中同级别中的第n个标签 -
:nth-last-child(n)选中同级别中的倒数第n个标签 -
:only-child选中父元素中唯一的标签 注意点: 不区分类型
-
<style>
p:first-child{
color: red;
}
p:last-child{
color: blue;
}
p:nth-child(2){
color: yellow;
}
p:nth-last-child(3){
color: green;
}
</style>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
- 同级别同类型的第几个
-
:first-of-type选中同级别中同类型的第一个标签 -
:last-of-type选中同级别中同类型的最后一个标签 -
:nth-of-type(n)选中同级别中同类型的第n个标签 -
:nth-last-of-type(n)选中同级别中同类型的倒数第n个标签 -
:only-of-type选中父元素中唯一类型的某个标签
-
<style>
p:first-of-type{
color: red;
}
p:last-of-type{
color: green;
}
p:nth-of-type(2){
color: red;
}
</style>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<a href="#">我是超链接</a>
<div>
<h1>我是标题</h1>
<p class="para">我是段落3</p>
<p class="para">我是段落4</p>
</div>
- 序选择器奇偶选择
-
:nth-child(odd)选中同级别中的所有奇数 -
:nth-child(even)选中同级别中的所有偶数 -
:nth-child(xn+y)x和y是用户自定义的, 而n是一个计数器, 从0开始递增
-
<style>
p:nth-child(odd){
color: red;
}
p:nth-child(even){
color: green;
}
p:nth-child(2n+0){
color: red;
}
</style>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
属性选择器
- 什么是属性选择器?
- 根据指定的属性名称找到对应的标签, 然后设置属性
格式:
[attribute]
作用:根据指定的属性名称找到对应的标签, 然后设置属性
[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
<style>
/*p[class]{
color: red;
}*/
p[class=para]{
font-size: 50px;
}
</style>
<p id="identity1">我是段落1</p>
<p id="identity2" class="cc">我是段落2</p>
<p class="cc">我是段落3</p>
<p id="identity3" class="para">我是段落4</p>
<p>我是段落5</p>
通配符选择器
- 什么是通配符选择器?
作用: 给当前界面上所有的标签设置属性 - 注意点:
- 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
<style>
*{
color: red;
}
</style>
<h1>我是标题</h1>
<a href="javascript:">我是超链接</a>
<p>我是段落</p>
