CSS选择器
基本选择器
1.标签选择器:标签名{}
2.id选择器:#id值{}
3.类选择器:.class值{}
4.元素选择器:*{}
优先级:
!important(设置当前属性为最高优先级)>id选择器>类选择器>标签选择器
组合选择器
1.多元素选择器:标签名1,标签名2,…{}
2.后代选择器:标签名 标签内部的标签{}(父标签内部不考虑层级结构)
3.子元素选择器:div下一级元素就是第一层元素
格式:div>span
4.毗邻选择器:并行标签 紧邻后面的元素
格式:#div1+div2{}
属性选择器
1.含有摸个属性:div[class]:意为属性含有class的所有div标签
2.属性等于属性值:div[class=‘d1’]:意为class属性值等于d1的所有div标签
3.属性含有某一个属性值:
格式:div[class~=‘d5’]:意为所有class值中含有d5的div
<html>
<head>
<style type="text/css">
div[class~='d5']{
color: #FFD700;
}
</style>
</head>
<body>
<div class="d4 d5"></div>
</body>
</html>
4.属性值以什么开头的
格式:div[id|=‘a’] :意为所有id值以a开头的所有div标签
<html>
<head>
<style type="text/css">
div[id|='a']{
font-size: 100px;
}
</style>
</head>
<body>
<div class="d4 d5" id="a-abc"></div>
</body>
</html>
伪类选择器
1.标签名:hover{}:设置当鼠标悬停在元素上时
2.标签名:active{}:鼠标在元素上方按下时(不释放)
3.标签名:visited{}:设置被点击后的样式
4.标签名:link{}:设置未被点时的样式
5.标签名:focus{}:获得焦点时触发(比如设置当焦点在文本框时文本边框变色)