网页设计与制作案例教程（HTML5+CSS3+JavaScript）（微课版）（第2版） 课件 案例6知识点01：CSS常用选择器.pptx

我们毕业啦其实是答辩的标题地方CSS常用选择器

书写CSS样式代码时要用到选择器。选择器用于指定CSS样式作用的HTML

对象。下面介绍CSS的常用选择器。CSS常用选择器

标记选择器CSS常用选择器标记选择器是指用HTML标记名称作为选择器，用于为页面中使用该标记定义的内容指定统一的CSS样式。语法格式：标记名称{属性:属性值;?属性:属性值;...}说明：所有的HTML标记名称都可以作为标记选择器，如body、h1~h6、p、ul、li、em、strong等。标记选择器定义的样式能自动应用到网页中的相应元素上。

标记选择器CSS常用选择器例如，使用p选择器定义HTML页面中所有段落的样式，代码如下。p{?????font-size:12px;???????????????/*?设置文字大小?*/?????color:#666;??????????????????? /*?设置文字颜色?*/?????font-family:"微软雅黑";??????/*?设置字体?*/}或写为：p{font-size:12px;color:#666;font-family:"微软雅黑";}标记选择器的优点之一是能快速统一页面中同类型标记的样式，同时这也是它的缺点，不能设计差异化样式。注意

类选择器CSS常用选择器类选择器指定的样式可以被网页上的多个标记元素选用。类选择器以“.”开始，其后跟类名称。其语法格式如下。.类名称{属性:属性值;?属性:属性值;...}说明（1）使用类选择器定义的CSS样式，需要设置元素的class属性值为其指定样式。（2）类选择器的优势之一是可以为元素定义相同或单独的样式。

类选择器CSS常用选择器例如，定义.gray类选择器，代码如下。.gray?{?????????????????? /*?设置网址部分的样式?*/??????color:?#808080;?? /*?设置文字为浅灰色?*/??????font-size:?12px;??????cursor:?pointer;???/*?设置鼠标指针为小手形状?*/?}在网页文档中，对网址所在的段落使用class属性来应用样式，代码如下。<p?class="gray">www.runo**.com/css/css-int...  百度快照</p>若网页中的其他元素也使用该样式，则同样设置class属性为该样式即可。

ID选择器CSS常用选择器ID选择器用于为某个元素定义单独的样式。ID选择器以“#”开始。其语法格式如下。#ID名称{属性:属性值;?属性:属性值;...}说明（1）ID名称即HTML元素的ID属性值，ID名称在一个文档中是唯一的，只对应于页面中的某一个具体元素。（2）ID选择器定义的样式能自动应用到网页中的某一个元素上。（3）ID选择器常用于在DIV布局时给页面上的块定义样式。

ID选择器CSS常用选择器例?6-1example01.html

交集选择器CSS常用选择器交集选择器由两个选择器构成，第一个是标记选择器，第二个是类选择器。两个选择器之间不能有空格。其语法格式如下。标记名称.类名称{属性:属性值;?属性:属性值;...}

交集选择器CSS常用选择器例?6-2example02.html

并集选择器由各个选择器通过逗号连接而成，任何形式的选择器（标记选择器、类选择器、ID选择器等）都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。并集选择器CSS常用选择器

并集选择器CSS常用选择器例?6-3example03.html使用并集选择器定义样式与使用各个选择器分别定义样式的效果相同，但并集选择器的样式代码更简洁。

后代选择器也叫包含选择器，用于控制容器对象中的子对象，使其他容器对象中的同名子对象不受影响。后代选择器CSS常用选择器书写后代选择器时将容器对象写在前面，子对象写在后面，中间用空格分隔。若容器对象有多层，则分层依次书写。例如：h2??em?{????????????? /*?后代选择器，中间用空格分隔?*/?????color:?#2525D3;??? /*?设置文字为蓝色?*/?????font-style:?normal;?? /*?设置文本不是斜体?*/?}?p??em?{?????????????????? /*?后代选择器，中间用空格分隔?*/?????