<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14-选择器</title>
</head>
<body>
一、元素选择符/类型选择符(element选择器)
语法:元素名称{属性:属性值}
范围广,方便统一操作
二、class选择器/类型选择器
语法:.class名{属性:属性值};
说明:1)当我们使用class选择符时,应先为每个元素定义一个class名称。
2)class选择符的语法格式是:
如:<div class="top"></div>
.top{width:200px;height:100px;background:green;}
用法:class选择符更适合定义一类样式。
三、id选择器
语法:#id名{属性:属性值;}
说明:1)当我们使用id选择器时,应该为每个元素定义一个id属性。如:<div id="box"></div>
2)id选择器的语法格式是"#"加上自定义的id名。如:#box{width:100px;height:300px;}
3)起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)如:head标记。
4)一个id名称只能对应文档中一个具体的元素对象。(唯一性)
四、*通配符/通配选择器
语法:*{属性:属性值;}
说明:通配选择符的写法是"*",其含义就是所有元素。
*{margin:0;padding:0;}代表清除所有元素的默认边距值和填充值。
五、群组选择器
语法:选择符1,选择符2,选择符3...{属性:属性值;} 例:#top1,#nav1,h1{width:960px;}
说明:当有多个选择符应用相同的声明时,可以将选择符用","分隔的方式,合并为一组。
margin:0 auto;实现盒子的水平居中。
六、包含选择器/后代选择器
语法:选择符1 选择符2{属性:属性值;}
说明:含义就是选择符1中包含的所有选择符2;
用法:当我的元素存在父级元素的时候,我要改变自己本身的样式,可以不另加选择符,直接用包含选择器的方式解决。
如:结构:<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
样式:.list li{background:red;}
七、伪类选择器
语法:
1)a:link{属性:属性值;}超链接的初始状态;
2)a:visited{属性:属性值;}超链接被访问后的状态。
3)a:hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态。
4)a:active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态。
link-visited-hover-active
说明:
1)当这4个超链接伪类选择符联合使用时,应注意它们的顺序,正常顺序为:
a:link;a:visitsd;a:hover;a:active,错误的顺序有时会使超链接的样式失效。
2)为了简化代码,可以把伪类选择符中相同的声明提出来放在a选择符中;
例如:a{color:red;}a:hover{color:green;}表示超链接的初始和访问过的状态一样,鼠标划过的状态和点击时的状态一样。
八、选择器的权重
当多个选择器,选中的是同一个元素,且都为他们定义了样式,如果属性发生冲突了,会选择权重高的来执行。
个数 选择器 权重
1 类型(元素)选择器 0001
2 class选择器(类选择器) 0010
3 id选择器 0100
4 包含选择符 为包含选择符的权重之和
5 内联样式 1000
6 !important 10000
css选择器解析规则1: 当不同选择符的样式设置有冲突的时候,高权重选择符的样式会覆盖低权重选择符的样式。
css选择器解析规则2:相同权重的选择符,样式遵循就近原则:哪个选择符最后定义,就采用哪个选择符样式。
</body>
</html>
0011-选择器
最新推荐文章于 2024-07-18 20:18:47 发布