多元素组合选择器边框链接颜色.pptx

课程提要多元素组合选择器选择器说明选择器1,选择器2多元素选择器，多个用英文逗号分隔，同时匹配所标识的所有选择器选择器1选择器2后代选择器，多个用空格分隔，匹配所有属于选择器1标签内部的选择器2标签divid=div1class=myDivdivid=div2class=myDivahref=class=myLink百度/abrahref=class=myLink谷歌/a/divbid=myBold共两个链接/b/div原因:让我们的CSS代码更加的精简,质量更高作用:让多个选择器同时公用同一组CSS样式

多元素选择器多元素组合选择器注意:1.后代选择器实例=====================================divfonta.my_link{color:green;background:pink;}含义:代表选中div标签里面的font标签里面的a标签,这里a.my_link,证明这里很多个a标签,其中一些a标签具备aclass=my_link这样的一个特征2.如果想跟CSS中的class属性挂接很多个样式的话 aclass=my_link/a正常的 aclass=my_linkclass=red/a错误的aclass=redmy_link文字/a这样多写是正确的权重关系?这里的class中的red和my_link中同时包含一个color属性,但是值不一样,到底谁的权重大? 1.权重关系跟我们class属性里面值的顺序没有关系! 2.权重关系跟我们css样式中加载顺序是有关的加载顺序:从上到下,从左到右

属性过滤选择器（第2课）CSS基本选择器作用：常对表单进行选择(IE6不支持)css2选择器格式：[属性名=属性值]styleInput[type=text]{border:1pxsolidred}选择多个：input[type=text],input[type=password]div[name=zzp]{border:1pxsolidred;}/style姓名：inputtype=text/br/密码：inputtype=password/br/性别：inputtype=radioname=sex/男nbsp;inputtype=radioname=sex/女br/inputtype=buttonvalue=提交/divname=hxz洪学枝/divdivname=zzp周智鹏/div

+选择器（第2课）CSS基本选择器作用：选中紧接在兄长后面的兄弟IE6不支持格式：兄长+兄弟styleDiv+p{ color:red;}/styledivclass=myDiv 我是div标签 ahref=#a标签/a div p我是myDiv的孙子/p /div p我是myDiv的儿子/p/div

子元素选择器（第2课）CSS基本选择器作用：仅仅选中子标签，孙子和重子都不会被选中IE6不支持格式：父标签子标签style.myDivp{ color:red;}/styledivclass=myDiv 我是div标签 ahref=#a标签/a div p我是myDiv的孙子/p /div p我是myDiv的儿子/p/div

多个选择器精确过滤（第2课）CSS基本选择器例子：直选中第一个div：divclass=my1my2my3my1my2my3/divdivclass=my1my3my1my3/divdivclass=my1my2my1my2/divdivclass=my2my3my2my3/div.my1.my2.my3{ color:red;}

课堂练习1多元素组合选择器有以下HTML代码，请分别使用通用选择器、标签选择器、ID选择器、CLASS选择器设置超链接A标签的字体颜色为红色（red）参考：字体颜色的CSS属性：color注意：id的优先级要高于class注意： 自带样式的标签，必须选中这个标签，才能改变他自带的样式。ahref=id=home_linkclass=myLink本地首页/a

课堂练习2作业有以下HTML代码，请分别使用多元素选择器、后代元素选择器设置所有字体颜色为红色（red）d