2.1 id选择器
用法 : 给html标签添加id属性和属性值,然后用css选取,并进行一系列操作
example:
html:<div id="我是id选择器"></div>
css选取: 用 #+id里面的内容,此时是 #我是id选择器
进行操作:
#我是id选择器{
width:100px;
height:100px;
}
id选择器的操作内容是给这个div容器增加100px的宽高,
给html标签快速添加id选择器的方法,这里是div#我是id选择器(#后面的内容是你自己输入的,根据你的工作需求来命名)
2.2class选择器
用法 : 给html标签添加class属性和属性值,然后用css选取,并进行一系列操作
example:
html:<div class="我是class选择器"></div>
css选取: 用 .+id里面的内容,此时是 .我是class选择器
进行操作:
.我是class选择器{
width:100px;
height:100px;
}
class选择器操作的内容是给div增加100px的宽高,
给html标签快速添加class选择器的方法,这里是div#我是class选择器(#后面的内容是你自己输入的,根据你的工作需求来命名)
2.3标签选择器
用法:直接选择HTML标签就可以了
example:
html:<div> 我是一个div容器哦~~ </div>
css选取: div
进行操作:
div{
width:100px;
height:100px;
}
标签选择器的内容是给div容器增加100px的宽高,
2.4通配符
* 在css中代表通配符,代表选取html所有的标签,作用是初始化html标签的属性,因为body有margin:8px(外边距有8px的属性值),还有很多html标签具有这样的属性,原因是在有的html标签出身的时候会带有一定的盒子属性(html每个)
通配符功能:初始化标签,
html标签自带属性总结:
2.4.1 body
自带margin=8px
2.4.2 p
p标签有margin-top/margin-bottom为12px
2.4.3 ul li ol
ul 和 li标签 有margin-top/margin-bottom为12px,还有padding-left为40px,ol也是
下面插入的链接是盒子模型:
https://blog.csdn.net/qq_40860137/article/details/84061310
2.5并列选择器
为了准确选择标签名一样,但是clss,id不一样的标签
例:
html代码:
<div>123</div>
<div class="class"></div>
这两个div除了是否有class外没什么区别,要选择第二个标签的话,只能用并列选择器
css:代码:
div.class{
width:100px;
height:100px;
}
div(标签选择器)+class选择器,注意中间不加空格
2.6父子选择器
为了选择标签名一致,但是一个是子元素标签,一个不是
html代码:
<div>
<span class="class"">123</span>
</div>
<span>456</span>为了选择第一个span标签(注:如果直接写span标签选择器的话,会选择两个span)
css代码:
div span{} 或者是 div .class 注意的两点:1 中间加空格 2子元素选择器不一定要和父选择器一致,只要能判断是父子关系就行
2.7直接子元素选择器
为了选择同是子孙元素,标签名一样
html代码:
<div>
<span>123</span>
<p>
<span>456</span>
</p>
</div>
css代码:选择第一个span
div>span就行啦
注意:父子中间加>
2.8 分组选择器
是为了提高代码效率,降低代码的耦合度
比如要求为:
为html代码中的p标签,span标签,div标签加字体为12px,字体颜色为红色
如果每次都选择对应标签,再写同样的css代码,会让css代码臃肿
那么css可以这样写:
span,
div,
p{
font-size:12px;
color:rgb:(255,0,0);
}
注意:每个选择器之后用逗号隔开]
补充(很重要): 浏览器底层遍历标签的规则是自里向外,这样快
2.9 伪类选择器
基本格式: 标签:hover {}
用途是当鼠标移到该标签身上时该标签会发生怎样的变化
例如:
html代码:
<div style="width:10px;height10px;background-color:rgba(255,0,0);">
css代码:
div{
width:100px;
height:100px;
background-color:red;
}
div:hover{
width:200px;
height:200px;
background-color:blue;
}
执行结果:
这是鼠标没有移动到这个div上的图
当鼠标移动到该div上时,div发生变化
宽和高都变成了200px,背景颜色也变成了蓝色
3.0 属性选择器
使用来选择或者是准确选择一个html标签
html代码:
<div id="id" >123</div>
<div id="demo">456</div>
属性选择器基本格式[id/class或者id="id的值"/class="class值"]
在这里,[id]是上面两个div都被选择了,如果要选择第一个div的话,那该这样写[id="id"]
注:你以为这样就介绍完选择器啦,不可能,选择器还有优先级,假如一个div上不仅有class属性,还有id属性,还有div属性,同时还可以加行间样式style,同样通配符也可以选择这个div,那么这么多选择器同时作用一个标签(这里是div),div的样式会发生生么样的改变呢,
选择器是同时作用让这个div变得"绚丽多姿",还是仅能一个选择器作用,下面的链接我们介绍选择器的优先级
https://blog.csdn.net/qq_40860137/article/details/84103690
