网页设计第三期12css选择符基础选择器.pdfVIP

通配（通用/全局）选择符 通配选择符格式 为一个星号 * ,通配选择符一般用来对页面的所有元素应用样式,如： *{margin:0;padding:0;}/*讲页面中所以元素的内外补丁设为0*/ 在特殊情况下，可以对特定的元素的所有子元素应用样式。如： style type=text/css *{ color:#000;}/*将页面中所有颜色设置为黑色*/ /style /head p绿色文字 /p div黑色文字 /div p绿色文字 span我是红色 /spanem我也是红色 /emstrongi好巧 /i我也是 /strong好神奇 /p 习题：如何利用通配选择符将strong 中的文字颜色改变? 类选择符 通配选择符涉及的范围太广泛，如果希望同一个 在不同位置显示不同的样式，我们可以用到类选 择符(class) 在css中以（.）作为前缀,紧跟一个具有语义性的自定义类名。 子选择符 子选择符也称子对象选择符，定义子元素对象的样式，无法定义子元素以外的对象。选择符与选择符 之间必须存在“ ”符号才是子选择符，如： style type=text/css body strong{ color:#03F; font-size:18px;} /style p子选择符 strong也称 span子对象选择符 /span，定义子元素对象的样式/strong/p strong无法定义子元素以外的对象 /strong 后代选择符 • 后代选择器（descendant selector ）又称为包含选择器。 • 后代选择器可以选择作为某元素后代的元素。 • 后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能。 包含选择符 包含选择符也称派生选择符或者后代选择符，该选择符类型作用于某个元素中的子元素。如： p strong{ color:#FF0; font-size:36px;}/*定义p 内所含strong 内的文字为黄色*/ 包含选择符不只限用两层 元素。如： p strong span{………….} 相邻选择符 相邻选择符与子选择符很相似，只是将中间的“ ”换成了”+”,但是功能相差甚远。主要作用是匹 配同一个父级下某个元 后的元素。如： style type=text/css p + strong{ color:#03F; font-size:18px;} /style p子选择符 strong也称 span子对象选择符 /span，定义子元素对象的样式/strong/p strong无法定义子元素以外的对象 /strong strong第二个 /strong 属性选择符 属性选择符的格式是 元素后紧跟一对中括号，中括号里的内容是该 元素的属性或者表达式。 有以下4种模式： E[attr] E[attr=“value”] E[attr~=“value”] E[attr|=“value”] E代表任何一个HTML ，attr代表 中任意一个属性，value代表该属性中存在的属性值。 如： *[class]{color:#fff;} input[type=“text”] ID选择符 ID选择符的形式跟类选择符及其相近，类选择符以（.）为前缀，ID选择符是以(#)为前缀。ID选择符 的用法跟类选择符也比较相似，但一个页面中使用ID选择符建议不要出现同名 ID，ID在JS等 语 言中运用比较多，同名ID会导致JS 语言判断错误。 的组合关系 选择符的组合关系 选择符的使用最大的优势不是单枪匹马奋斗，而应该是针对不同的页面结构组合成各种方阵。主要的 方阵有：类选择符或者ID选择符、选择符群组、选择符组合 类选择符或者ID选择符：一个页面中在多处不同的 中定义同名的类,可以根据需要针对性地使用类选 择符 选择符群组: 每个选择符之间使用英文的逗号作为间隔，选择符之间的关系为并列关系. 选择符组合: 根据HTML的结构关系，层层递进的罗列选择符，目标选择符为最后一