废话不多说,咱们直接进入正题吧😘;
咳咳css的选择器有很多我在这里给大家列出八个常用的基本选择器;
首先大家最常见的就是标签选择器
div{
属性:属性值
}
像这种直接用标签来写属性的就是标签选择器
接下来是类名选择器,先看一下在html里面的样子
在标签后面跟一个class然后写上你给它命名的名字
<div class="div"></div>
然后是css的样子,其实在css里面的样子很简单就是在它命名以后在前面加一个.
.div {
属性:属性值
}
id选择器
还是先来看它在html的样子
其实就是把class改为id;id选择器具有唯一性只能给一个标签用
<div id="div"></div>
css:
把.换为#号
#id{
属性:属性名
}
包含选择器
emmm这个解释起来也不难就是父子盒子我用一句话概况
在一个标签里面再放一个标签就像这样👇
<div class="fun">
<div class="son"></div>
</div>
好啦,接着说包含元素
.fun .son {
属性:属性值
}
就是父元素空格子元素一定要打空格
然后是子选择器
子选择器呀和包含差不多不过个人感觉比包含选择器更加精准
html的内容参照包含选择器就ok啦
css里面是
.fun>.son {
属性:属性值
}
这个可以从父元素里面准确的找到子孙元素
然后是通配符
*{
属性:属性值
}
通配符里面写的是全局的属性就是所有东西的默认值都会改为通配符里面的属性不管你们怼不怼我,我个人真的觉得挺好用的
群组选择器
假如你有两个属性都要设置相同的宽度那你就可以用群组选择器了
.fun , .son {
宽度:宽度对应的值
}
兄弟选择器
这个选择器我不怎么用emmm这么说吧
html:
<div class="fun">
<div class="son1"></div>
<div class="son2"></div>
</div>
css:
.son1~.son2 {
属性:属性值
}
这样就可以给他的第二个儿子赋值啦
emmm,基本选择器我大概好像应该列举出来了
如果没有 欢迎补充
请点赞😜
请评论🐽