课程主题认识CSS选择器网页设计客户端技术课程.pptx

;任务二;任务二认识CSS的选择器

;id选择器;HTML文档中，可以将多个元素定义相同的类属性（即class属性），因此，可以使用同一个样式表一次将样式应用到所有定义了相同类属性的元素中，该样式表中使用的是类选择器。类选择器以“.”号开始加上类名称。例如，以下代码中定义了两个元素具有相同的类属性class=color：

h1class=color这里是标题1/h1

pclass=color这里是段落/p

以下代码则是使用类选择器设置上面两个元素的文字颜色都为红色，效果如图所示：

.color{color:red;}

经验：在设计网页时，使用类选择器时通常需要预先做一些构想和设计;派生选择器;对多个元素应用相同的样式，除了前文所述的类选择器以外，还可以使用选择器分组。例如：

h1,h2,h3,h4,h5,p{color:blue;}

表示对元素h1,h2,h3,h4,h5,p应用相同的样式：文字颜色为蓝色。通过分组，可以得到更简洁的样式表。除以上描述的常用的CSS选择器以外，还有属性选择器，可以对带有指定属性的HTML元素设置样式，例如：

[title]{color:red;}

表示为带有title属性的所有元素设置文字颜色为红色。

属性和值选择器，例如：

[title=worlduc]{border:5pxsolidblue;}

表示为title=worlduc的所有元素设置边框为5像素实线蓝色。

;子元素选择器，只选择某个元素的子元素，例如：

h1strong{color:red;}

表示选择只在h1元素中的strong元素。

相邻兄弟选择器，选择紧接在另一个元素后的元素，而且二者有相同的父元素，例如：

h1+p{margin-top:50px;}

表示选择紧接在h1元素后出现的段落，h1和p元素拥有共同的父元素。;通配选择器、important和伪类;通配选择器、important和伪类;同时对页面的一个段落加上三种样式，最后段落依照被!important申明的红色字体颜色显示。如果去掉!important，则依照优先级最高的id选择器中的申明，字体颜色为绿色。

伪类不属于选择器，用于向选择器添加特殊的效果。之所以称之为伪类，是因为它指定的对象在文档中并不存在，它们指定的是元素的某种状态。

;应用最为广泛的伪类是链接的4个状态：未被访问状态（a:link）、已被访问状态（a:visited）、鼠标指针悬停在链??上的状态（a:hover）以及正在被点击的状态（a:active）。要注意在CSS定义中，a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后，定义才能生效。例如，以下代码设置了超链接的4个状态：

a:link{color:#FF0000}

a:visited{color:#00FF00}

a:hover{color:#FF00FF}

a:active{color:#0000FF};小实例;小实例;例2-2小结

HTML元素选择器应用；

选择器分组的应用。;;