第十二讲 通配符选择器 父子选择器
1、案例
超链接：
（1）默认样式是：黑色，24px，没有下划线
（2）当鼠标移动到超链接时，自动出现下划线
（3）点击后，超链接变成红色
2、通配符选取器
该选择器可以用到所有的 html 元素，但是其优先权最低
*{
属性名：属性值;
....
}
四个选择器优先级如下：
id 选择器 > class 选择器 > html 选择器 > 通配符选择器
3、选择器的细节问题：
（1）父子选择器的使用：
/*父子选择器*/
#id1 span{
color: red;
font-style: italic;
}
#id1 span span{
color: green;
}
#id1 span span a{
color: blue;
}
通过上面总结：
①父子选择器可以有很多级（但是实际开发中不要超过3级）
②父子选择器有严格的层级关系
所有代码如下：
html文件：
<html>
<head>
<link rel="stylesheet" type="text/css" href="select.css">
</head>
<body>
北京你好！
<span class="s1">新闻一</span>
<span class="s1">新闻二</span>
<span class="s1">新闻三</span>
<span class="s1">新闻四</span>
<span class="s1">新闻五</span><br/><br/>
<span id="id1">这是一则<span>非常<span>重<a href="#">连接到百度</a></span>要</span>的新闻</span><br/>
<!--控制超链接样式-->
<a href="http://sohu.com">连接到搜狐</a><br/>
<p class="cls1">dasdasf</p>
<p class="cls2">hello, world!</p>
</body>
</html>css文件：
.s1{
background-color: pink;
font-weight: bold;
font-size: 16px;
color: black;
}
/*id选择器的使用*/
#id1{
background-color: silver;
font-size: 20px;
color: black;
}
/*html选择器*/
body{
color: orange;
}
a:link{
color: black;
text-decoration: none;
font-size: 24px;
}
a:hover{
text-decoration: underline;
font-size: 40px;
color: green;
}
a:visited{
color: red;
}
/*对同一种html元素分类*/
p.cls1{
color: blue;
font-size:20px;
}
p.cls2{
color:red;
font-size: 20px;
}
/*通配符选择器*/
*{
/*margin-top: 0px;
margin-left: 0px;*/
margin: 10px 30px 40px 1px;
/*margin 可以写一个值 （上右下左（顺时针）） 如果是两个值（上下， 左右） 如果是三个值（上， 左右， 下）*/
/*不同浏览器的默认像素是不一样的*/
margin: 0px;
padding: 0px;
color: red;
}
/*父子选择器*/
#id1 span{
color: red;
font-style: italic;
}
#id1 span span{
color: green;
}
#id1 span span a{
color: blue;
}
1093
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
