您的位置：首页 > 其它

012通配符选择器 父子选择器

2014-08-19 10:35 471 查看
第十二讲 通配符选择器 父子选择器

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;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航