一. 标签选择器
标签选择器
作用:根据指定的标签的名称,在当前界面中该名称的标签
然后设置值
标签选择器选中的是当前界面中的所有的标签
而不能单独选择其中的某一个标签
2.标签选择器无论藏得有多深都可以被选中
3.只要是html中的标签就可以作为标签选择器
二：id选择器
<style>
p{
color: red;
}
#identity1{
color: green;
}
</style>
id选择器:
单独设置需要使用id选择器:
作用:根据指定的id名称,找到对应的标签,然后设置属性
格式:
#id名称{
属性:值;
}
2.在同一个界面中id的值是不可以重复的
3.在编写id选择器时一定要在id的名称前面加上#
4.id的名称是有一定的规范的
4.1 id的名称只能有字母,数字以及下划线组成的
a- z 0- 9 _三类组成
4.2 id的名称不能以数字开头
4.3 id的名称不能使html的标签的名称
4.4 在企业开发中,一般情况下,如果仅仅是为了设置样式,我们不会使用id
因为在前端开发中id是留给js使用的
<p id="identity1">搭建了房间爱的数量</p>
<p id="identity2">搭建了房间爱的数量</p>
<p id="identity3">搭建了房间爱的数量</p>
三：类选择器
<style>
.pp{
color: red;;
}
.para2{
font-size:30px;
}
</style>
<!--类选择器
1.作用:根据指定的名称找到对应的标签,然后设置属性
注意点:每一个html标签都一个属性叫做class
也就是说每个标签都可以设置类名
2.同一个界面中class的名称是可以重复的
3.在编写class选择器时前面加上点(.)
4.类名和id命名规范一样
5.类名是给特定的标签设置样式的
6.在html中每一个标签同事绑定多个类名
格式: <标签名称 class="类名1 类名2...">
-->
<p class="pp">我是附近奥法安抚发</p>
<p class="pp para2">我是附近奥法安抚发</p>
<p class="pp para3">我是附近奥法安抚发</p>
<p class="pp para4" >我是附近奥法安抚发</p>
四：后代选择器
<style>
div p {
color: red;
}
</style>
<!--
后代选择器:
作用:找到指定标签的所有后代标签,设置属性
格式:
标签名称1 标签名称2 {
属性:值;
}
先找到名称叫标签名称1的标签,
然后在这个标签下面查找所有名称为
标签名称2的标签,然后设置属性
注意点:
1.后代选择器必须用空格隔开
2.后代选择器不仅仅是儿子,也包括孙子和重孙子
只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称,还可以使用其他选择器
-->
<p>发阿发答案</p>
<div>
<p>jfajf;f </p>
<p>jfajf;f </p>
</div>
<p>发发的发GV阿道夫</p>
五: 子元素选择器
<style type="text/css">
div>p{
color: red;
}
</style>
<!--
什么是子元素选择器?
作用:找到指定标签中所有特定的直接子元素,
然后设置属性
格式:
标签名称1 > 标签名称2 {
属性:值;
}
先找到名称叫做"标签名称1"的标签,然后在这个标签中
查找所有直接子元素名称叫做"标签名臣2"的元素
注意点:
1.子元素选择器只会查找儿子,不会查找其他被嵌套的
标签
2.子元素选择器之间需要用>符号链接,并且不能有空格
3.子元素选择器不仅仅可以使用标签名称,还可以使用
其他选择器
4.子元素选择器可以通过 > 符号一直延续下去
div>ul>li>p 一层一层向下找
-->
<p>我是段落</p>
<div>
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li><p>我是段落</p></li>
</ul>
</div>
六：子元素选择器和后代选择器的区别
<!--
1.后代选择器和子元素选择器的区别
1.1
后代选择器使用空格作为连接符号
子元素选择器使用 > 作为连接符号
1.2
后代选择器会选中指定标签中,所有特定后代标签
也就是会选中儿子、孙子。。。只要是被放到指定
标签中的特定标签都会被选中
子元素选择器只会选中指定标签中,所有的特定的
直接标签
也就是直选选中特定的儿子标签
2.后代选择器和子元素选择器之间的共同点:
2.1
后代选择器和子元素选择器都可以使用标签名称、id名称
、class名称来作为选择器
2.2
后代选择器和子元素选择器都可以通过各自的链接
符号一直延续下去
3.开发中的选择
如果想选中的指定标签中的所有特定标签,那么久使用后代
选择器
如果想要选中指定标签中的所有特定儿子标签
那就使用子元素选择器
-->
七： 交集选择器
<style>
p.para1{
color: red;
}
.para1#identity{
color: blue;
}
</style>
<!--交集选择器
定义:和数学中的交集的含义是一样的
给所有选择器选中的标签中,相交的那部分标签设置属性
格式:
选择器1选择器2 {
属性:值;
}
注意点:
1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/id名称/class名称
3,
-->
<body>
<p>我是段落</p>
<p class="para1" id="identity">我是段落</p>
<p class="para1">我是段落</p>
<p>我是段落</p>
</body>
八：并集选择器
<style>
.ht,.para {
color: red;
}
</style>
<!--
并集选择器:
和数学中的并集的定义一样的含义
给所有选择器选中的标签设置属性
格式:
选择器1,选择器2 {
属性:值;
}
注意点:
1.并集选择器必须使用,来链接
-->
<body>
<h1 class="ht">我是标题</h1>
<h1 class="para">我是内容</h1>
<p>w我是段落</p>
<p>w我是段落</p>
</body>
九：兄弟选择器
<style>
/*h1+p{
color: red;
}*/
h1~p{
color: green;
}
</style>
<!--
兄弟选择器:只能选择同级关系的标签
相邻兄弟选择器:CSS2
格式:
选择期1+选择器2{
属性:值;
}
作用:
给指定选择器后面紧跟的那个选择器选中的标签设置属性
2.通用兄弟选择器
格式:
选择器1~选择器2{
属性:值;
}
给指定的选择器后面的所有的选择器选中的所有标签设置属性
注意点:
1,相邻兄弟选择器必须通过+链接
2,相邻兄弟选择器只能选中紧跟其后的那个标签,不能选中隔开的标签
1,通用选择器必须用~连接
2,通用兄弟选择器选中的是指定选择器后某个选择器选中的所有标签
无论有没有被隔开都可以选中
-->
<body>
<h1>wo是标题</h1>
<a href="#">我是超链接</a>
<p>我是段落</p>
<p>记录发件方垃圾分类</p>
<h1>wo是标题</h1>
<p>防范大风分类</p>
<p>发生的发的是</p>
</body>
十：序选择器
<style>
/* p:first-child{
color: red;
}
p:first-of-type{
color: blue;
}
p:last-child{
color: red;
}*/
/*
p:last-of-type {
color: red;
}
*/
/*p:nth-child(3){
color: red;
}*/
/*p:nth-of-type(2){
color: red;
}*/
/*
p:nth-last-child(2){
color: purple;
}
*/
/*p:nth-last-of-type(2){
color: red;
}*/
/*p:only-child{
color: green;
}*/
p:only-of-type{
color: red;
}
</style>
<!--
CSS3中新增的选择器最具代表性的就是序选择器
1.同级别的第几个
p:first-child 选中同级别的第一个标签
p:last-child 选中同级别的最后一个标签
p:nth-child(3) 同级别的第三个标签
p:nth-last-child(2) 同级别倒数第n个标签
注意点:不区分类型
2.同类型的第几个
p:first-of-type 选中同级别中同类型的第一个标签
p:last-of-type 选中同级别同类型的最后一个标签
p:nth-of-type(2) 同级别同类型的第n个标签
p:nth-last-of-type(2) 同级别同类型的倒数第n个标签
注意点:区分类型的
p:only-child 选中父元素中唯一的一个元素(只有一个标签的)
p:only-of-type 选中父元素中唯一类型的标签
-->
<body>
<h1>我是标题</h1>
<P>我是段落1</P>
<P>我是段落2</P>
<div>
<P>我是段落3</P>
<P>我是段落4</P>
<P>我是段落5</P>
<P>我是段落6</P>
<P>我是段落7</P>
</div>
<div>
<P>我是段落8</P>
<s>我是段落9</s>
</div>
</body>
十一:序选择器下篇
<title>序选择器下</title>
<style>
/*p:nth-child(odd){
color: red;
}
p:nth-child(even){
color: green;
}*/
p:nth-of-type(odd){
color: red;
}
</style>
<!--
p:nth-child(odd) 选中同级别奇数
p:nth-child(even) 选中同级别的偶数
p:nth-of-type(odd) 选中同类型的奇数
:nth-child(xn+y)
x和y是用户自定的,而n是一个计数器,从0开始递增
-->
<body>
<h1>woshi标题</h1>
<p>我是文本</p>
<p>我是文本</p>
<p>我是文本</p>
<p>我是文本</p>
<h1>woshi标题</h1>
<p>我是文本</p>
<p>我是文本</p>
<p>我是文本</p>
</body>
十二：属性选择器
<style>
/*p[id]{
color: red;
}*/
p[class=cc]{
color: blue;
}
</style>
<!--
[attribute]
属性选择器:根据指定的属性名称找到
对应的标签,然后设置属性
[attribute=value]
找到指定属性,并且属性的值等于value的标签,然后设置属性
最常见的应用场景,就是用于区分input属性
-->
<body>
<p id="identity1">我是度阿奴1</p>
<p id="identity2" class="cc">我是度阿奴2</p>
<p class="cc">我是度阿奴</p>
<p id="identity3" class="para">我是度阿奴3</p>
<p id="identity4">我是度阿奴4</p>
<p>我是度阿奴</p>
<p id="identity5">我是度阿奴5</p>
<p id="identity6">我是度阿奴6</p>
</body>
十三：属性选择器下
<style>
/* img[alt^=abc]{
color: red;
}
img[alt$=abc]{
color: green;
}*/
/*img[alt*=abc]{
color: red;
}
*/
img[alt~=abc]{
color: red;
}
</style>
<!--
1.属性的取值是以什么开头的?
[attribute|=value] CSS2 只能找到指定某个值,并且用-隔开的
[attribute^=value] CSS3 找到包含value开头的内容就行
2.属性的取值是以什么结尾的?
[attribute$=value] CSS3
3,属性的取值是否包含某个特定的值?
[attribute~=value] CSS2 只能找到value被空格隔开(单独单词的)
[attribute*=value] CSS3 只要包含value就可以找到了
-->
<body>
<!-- <img src="" alt="abcdef">
<img src="" alt="abc-ppp">
<img src="" alt="def abc">
<img src="" alt="dabc">
<img src="" alt="www def">
<img src="" alt="f">
<img src="" alt="mm">
<img src="" alt="qq">
-->
<img src="" alt="wwwabcmmm">
<img src="" alt="www-abc-mmm">
<img src="" alt="www abc mmm">
<img src="" alt="aa">
</body>
十三：通配符选择器
<!--通配符选择器
给当前界面上所有的标签设置属性
格式
*{
属性:值;
}
注意点:
由于通配符选择器时设置界面上所有的标签的属性
所以在设置之前会遍历所有的标签,如果当前界面
上标签比较多,那么性能就会比较差,所以在企业开发中
一般不会使用通配符选择器
-->
网友评论