网页设计与制作教程Web前端开发（第7版）课件：CSS3基础-CSS的选择器.pptx

本节介绍CSS的选择器。选择器（selector）也被称为选择符，CSS选择器用于指明样式对哪些元素生效。CSS3基础CSS的选择器

目录CSS3基础4.1CSS设计与编写原则4.2在HTML中使用CSS的方法4.3CSS的两个主要特性4.4CSS的基本语法4.5CSS的选择器4.6属性值的写法和单位4.7HTML文档结构与元素类型4.8实训——制作内容详情页习题4

4.5CSS的选择器4.5.1元素选择器元素选择器的格式如下：E{property1:value1;property2:value2;...}例如，下面定义为网页设置默认字体。body,p,div,blockquote,td,th,dl,ul,ol{font-family:Verdana,Arial,Helvetica;font-size:1em;color:black;}

4.5CSS的选择器4.5.2通配符选择器在编写代码时，用“*”表示通配符选择符。其格式为：*{property1:value1;property2:value2;...}例如，代码如下：*{margin:0px;/*外边距设置为0*/padding:0px;/*内边距设置为0*/}

4.5CSS的选择器【例4-7】通配符选择器示例。本例文件4-7.html在浏览器中显示的效果如图4-10所示。

4.5CSS的选择器!DOCTYPEhtmlhtmlheadmetacharset=utf-8title通配符选择器/titlestyletype=text/css*{color:#000;}/*所有文字的颜色为黑色*/p{color:#00f;}/*段落文字的颜色为蓝色*/p*{color:#f00;}/*段落子元素文字的颜色为红色*//style/headbodydivh3通配符选择器/h3div默认的文字颜色为黑色/divp段落文字颜色为蓝色/pp段落span段落子元素的文字颜色为红色/span段落/p/div/body/html

4.5CSS的选择器4.5.3属性选择器属性选择器的格式如下：E[attribute]{property1:value1;property2:value2;...}

4.5CSS的选择器

4.5CSS的选择器【例4-8】属性选择器示例，本例文件4-8.html在浏览器中显示的效果如图4-11所示。

4.5CSS的选择器!DOCTYPEhtmlhtmlheadmetacharset=utf-8title属性选择器示例/titlestyletype=text/cssimg[alt]{border:3pxsolid#00F;}/*作用任何带alt属性的img元素*/a[href][title]{font-weight:bold;}/*作用同时带href和title属性的a元素*/a[href=][title=淘宝]{font-size:18px;}/*作用地址指向并且title为淘宝的a元素*/a[title~=baidu]{color:red;}*[lang\|=en]{color:blue;}p[title^=my]{color:yellow;}p[title$=Test]{color:green;}p[title\*=est]{background-color:aqua;}