css基本选择器:
基本选择器
包含选择器
属性选择器
css3提供的新式选择器
逗号选择器
伪类选择器
伪元素选择器
一、基本选择器:
ID选择器:不可重复
<div id="xxx"></div>
<style>
#xxx{
}
</style>
类选择器:类名可重复
<div class="mag"></div>
<div class="mag"></div>
<style>
.mag{
}
</style>
标签选择器:
相同标签可以设置相同格式:
<style>
img{
}
</style>
通配符选择器:
对所有的标签进行设置:慎用
<style>
*{
border:1px solid red;//对多有边框进行设置
margin:0;
padding:0;
}
</style>
逗号选择器:(复合选择器)多个标签一起进行修饰
<style>
ui,ol,#box{
}
</style>
二、包含选择器
子代选择器:
父标签>子标签 只选择当前子代
后代选择器:
所有属于包含的
使用复合选择器,将选择的范围尽可能的准确化
三、属性选择器
通过属性反向选择标签
选择具有某属性的标签
<div class="box" title="这是个div"></div>
<style>
div[title] // []中为要设置的属性
div[title="box"] //仅选中为box的
div[title^="bo"] //以bo开始的
div[title$="ox"] //以什么结尾的
div[title*="box"] //包含box的
{
}
</style>
四、css3提供的新式选择器
紧跟着的兄弟节点;即下一个节点(平行关系的标签)
div[title]+p
该标签后的所有标签(平行关系的标签)
div[title]~p
五、逗号选择器
多个标签通过逗号隔开 ,共同设置属性
六、伪类选择器
link,visited,hover,active
a{
color:#333
font-size:25px;
text-decoration:none;//删除下划线
}
a:hover{//鼠标放上去的属性
color:#800000;
text-decoration:underline//恢复下划线
}
<a herf='#'>百度</a>
:last-child 子类的第一个元素
:last-child 子类的最后一个元素
:nth-child(n)子类第n个元素
:root{//css的根标签;(body)
}
::selestion{
background-color:#8A2BE2;
color:white
作用为选中标签时标签的背景颜色以及字体颜色
}
七、伪元素选择器:
::before{
content:‘ ’
}在某标签前加入‘ ’
::after{
content:‘ ’
} 在某标签后加入‘ ’
input::placeholder{//修改输入框中的颜色
color:“ hotpink”
}