原创力文档- 1、本文档共10页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 5、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 6、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
上一章讲到CSS，本章迪派为大家具体介绍通配符选择器和父子选择器以及选择器的使用细节，盒子的经典应用。
通配符选择器
? css 文件可以使用在各种文件(php,html,jsp,asp…)
*{
}
案例:
再比如，我们希望所有的超链接
(1)默认样式是 黑色 24px,没有下划线
(2)当鼠标移动到超链接时，自动出现下划线
(3)点击后,超链接变成 红色。这又该怎么实现呢? [test.html]
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:30px;
}
p.cls2{
color:red;
font-size:20px;
}
通配符选择器可以用到所有的html元素,但是其优先权最低
*{
属性名:属性值;
…
}
案例:
html文件
html
head
link rel=stylesheet type=text/css href=style/my.css/
/head
body
ni hao!
/body
/html
css文件
/*通配符选择器的使用*/
*{
/*margin-top: 0px;
margin-left: 0px;*/
/*margin: 0px;
padding: 0px;*/
/*margin值1个参数顺序：用于四个边*/
/*margin值2个参数顺序：第一个用于上下，第二个用于左右*/
/*margin值3个参数顺序：第一个用于上，第二个用于左右，第三个用于下*/
/*margin值4个参数顺序：上右下左*/
margin:10px 30px 40px 1px;
}
? 四个选择器优先权
id选择器 class选择器 html选择器 通配符选则器
父子选择器使用:(路径式写法)
案例:
html文件
html
head
link rel=stylesheet type=text/css href=style/my.css/
/head
body
span class=fatherni spanhaofont!/font/span/span
/body
/html
css文件
/*父子选择器*/
.father{
color: red;
}
.father span{
color: green;
}
.father span font{
color: orange;
}
并列式写法
.father, span, font{
color: orange;
}
通过上面总结:
① 父子选择器可以有多级(但是在实际开发中不要超过三层)
② 父子选择器有严格的层级关系
③ 父子选择器不局限于什么类型选择器通过上面总结:
① 父子选择器可以有多级(但是在实际开发中不要过三层)
父子选择器有严格的层级关系
父子选择器不局限于什么类型选择器
比如
#id span span
.s1 #id span1、一个元素可以同时有id选择器和class选择器案例:
span class=s1 id=news_specail新闻一/span2、一个元素最多有一个id选择器，但是可以有多个类选择器
使用方法如下:
元素 class=类选择器1 类选择器2/
tml部分
span class=cls1 s1/span
css部分:
/*给新闻三再配置一个class选择器*/
.cls1{
font-style:italic;
text-decoration:underline;
color:blue;
background-color:silver;
}
.s1{
background-color:pink;
font-weight:bold;
font-size:16px;
color:black;
}
特别注意: 当两个类选择器发生冲突，则以写在css文件中后面的那个类选择器为准！3、我们可以把某个css文件中的选择器共有的部分，独立出来写一份比如:
/*招生广告*/.ad_stu {
width: 136px;
height: 196px;
background-color: #FC7E8C;
margin: 5px 0 0 6px;
float: left;
}
/*装潢广告2*/
.ad_2 {
background: #7CF574;
height: 196px;
width: 457px;
float: left;
margin: 5p
文档评论（0）