.不属于CSS选择符的是()。

html-css037

.不属于CSS选择符的是()。,第1张

应该选择 D 吧 , 不过觉得 A 超文本标记选择符 应该属于目前能支持的伪类选择器~ 不知道超文本标记选择符这样叫何不合适

目前浏览器支持的CSS选择器类型:

1.类(可用于任何标签) .class

2.标签(重新定义特定标签的外观) body

3.高级(id 和 伪类选择器等) #id , a:hoverd等

CSS 全部 选择符

选择符 | 版本 | 兼容性 | 语法 |

.........................................................

类型选择符 | CSS1 | IE4+ NS4+ | E1

ID选择符| CSS1 | IE4+ NS4+ | #ID

类选择符| CSS1 | IE4+ NS4+ | E1.className

选择符分组 | CSS1 | IE4+ NS4+ | E1,E2,E3

通配选择符 | CSS2 | NONE | *

包含选择符 | CSS2 | NONE | E1 E2

子对象选择符| CSS2 | NONE | E1 >E2

相邻选择符 | CSS2 | NONE | E1 + E2

属性选择符 | CSS2 | NONE | E1[attr] E1[attr=value] E1[attr~=value] E1[attr|=value]

最常用的四种选择器是:元素选择器、类选择器、ID选择器、派生选择器

1、元素选择器

最常见的css选择器当属元素选择器了,在HTML文档中该选择器通常是指某种HTML元素,例如:p,h2,span,a,div乃至html。

例如:

html {background-color: black}

p {font-size: 30pxbackgroud-color: gray}

h2 {background-color: red}

以上css代码会对整个文档添加黑色背景;将所有p元素字体大小设置为30像素同时添加灰色背景;对文档中所有h2元素添加红色背景。

通过上面的例子也可以看出css的基本规则结构:由选择器和声明块组成。每个声明块中包含一个或多个声明。每个声明的格式为:属性名 : 属性值。如下图所示:

每条声明以分号””结尾。如果在一个声明中使用了不正确的属性值,或者不正确的属性,则该条声明会被忽略掉。另外请注意不要忘记每条声明后面的分号。

我们也可以同时对多个html元素进行声明:

h1, h2, h3, h4, h5, h6, p {font-family: 黑体}

这样会将文档中所有的h1~h6以及p元素字体设置为”黑体”。如果我们希望一锅粥地选取所有的元素,可以使用通配符”*”: * { font-size: 20px}

这样所有的元素都将被选中,虽然font-size属性对于某些元素是无效的,那么它将被忽略。

2、类选择器

(1)单类选择器

单纯的元素选择器似乎还过于粗糙了,比如我们希望在文档中突出加粗显示某种重要的内容,例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中,或者它可能出现在多种不同的元素中。这个时候,我们可以考虑使用类选择器(class selector)。

要使用类选择器我们需要首先对文件元素添加一个class属性,比如截至日期可能会出现在以下元素中:

<p class="deadline">...</p>

<h2 class="deadline">...</h2>

这样我们就可以用以下方式使用类选择器了:

p.deadline { color: red}

h2.deadline { color: red}

点号”.”加上类名就组成了一个类选择器。以上2个选择器会选择所有包含”deadline”类的p元素和h2元素。而其余包含该属性的元素则不会被选中。

如果我们省略.deadline前面的元素名,那么所有包含该类的元素都将被选中:

.deadline { color: red}

通常情况下,我们会组合使用以上2者得到更加有趣的样式:

.deadline { color: red}

span.deadline { font-style: italic}

以上代码首先会对所有的包含deadline的元素字体设置为红色,同时会对span元素中的文本添加额外的斜体效果。这样,如果你希望某处文本拥有额外的斜体效果将它们放在<span></span>中就可以了。

(2)多类选择器

在实践的做法中,元素的calss属性可能不止包含一个单词,而是一串单词,各个单词之间用空格隔开。

比如某些元素包含一个”warning”类,某些元素包含一个”important”类,某些元素同时包含”warning important”类。属性名出现的顺序没有关系:

class = "warning important"

class = "important warning"

以上2者是等价的。我们希望包含warning类的元素有一个醒目的红色字体,包含important属性的元素有一个加粗的字体显示,而同时包含以上2中属性的元素另外拥有一个蓝色背景(不管还能不能看清文字了),我们可以使用以下的css代码:

.warning { color: red}

.important { font-weight: bold}

.warning.important { background: blue}

当然,第三条你也可以写成: .important.warning { background: blue} 和词序没有关系。说明一下,.warning会匹配所有包含warning属性的元素,不管该元素还包含多少其他的属性。.important同理。而.important.warning会匹配所有同时包含以上2种属性的元素,不管该元素还包含多少其他的类,也不管他们在类列表中出现的顺序,只要其中含有这2个属性,则会被选择进来!

同样地,多于多类选择器,在前面加上元素名,则会匹配包含指定类名的指定元素,例如:p.warning.important {}

将会匹配同时包含warning和important属性的p元素,其他同样包含以上2类的元素则不会被选中。

3、ID选择器

ID选择器和类选择器有些类似,但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类,一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次,也就是一个ID只能唯一标识一个元素(不是一类元素,而是一个元素)。类似类属性,在使用ID选择器前首先要在元素中添加ID属性,例如:

<p id="top-para">...</p>

<p id="foot-para">...</p>

使用ID选择器的方法为井号”#”后面跟id值。现在我们使用id选择器选择以上2个p元素如:

#top-para {} #foot-para {};

这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性,也使其用法变得相对简单。

4、属性选择器

属性选择器在css2中引入,使我们可以根据元素的属性及属性值来选择元素。下面分别来说明:

(1)简单属性选择器

简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。使用方法为: 元素名[属性名] 或 *[属性名]。比如我们希望选择带有alt属性的所有img元素: img[alt] { ...}

选择带有title属性的所有元素:*[title] { ...}。同类选择器类似,我们也可以根据多个属性信息进行选择,例如同时拥有href和title的a元素:

a[href][title] { ...}

组合使用类选择器使我们的选择更加富于灵活性。

(2)具体属性值选择器

如果我们希望更加精确地根据属性值来选择元素,我们可以在简单的属性选择器中指定属性的值。最简单的我们希望找到href属性值为http://www.baidu.com的锚元素:

a[href="http://www.baidu.com"] { font-weight: bold}

要特别注意的是,这里的具体值匹配实质上是一个字符串匹配,所以在这里对于class属性而言,词条的顺序是有关系的。

p[class="warning important"] { ...}

将不会匹配到<p class="important warning"></p>,也不会匹配到<p class="warning important mini-type">,这里就是一个生硬的字符串匹配。

另外,想要同时匹配多个属性的值也是可以的:

p[class="warning"][title="para"] { ...}

将匹配到类为warning(仅有warning),title属性为para的p元素。

(3)部分属性值选择器

根据属性值来匹配元素无疑比简单的属性匹配更加精细化了,但是似乎有些精细化过头了,字符串的完全匹配显得过于生硬。比如我们希望选择在一串属性值中出现了某个关键字的元素,不妨再次以class属性为例,我们希望选择所有包含了warning类的p元素,属性值匹配将无法做到,好在还是有办法的,我们可以使用以下的部分值匹配选择器:

p[class~="warning"] { ...}

该选择器在等号”=”前面添加了一个波浪号~,含义为包含后面的字串的匹配。以上代码将会选择所有class属性中包含”warning”的p元素。为了更加清楚地说明问题,它和以下的选择器是等价的:

p.warning { ...}

当然~=不仅仅只是用在class属性上,这只是一个示例。

再比如说,我们的文档中包含一系列人物介绍的div元素:

<div title="intro 1">...</div>

<div title="intro 2">...</div>

<div title="intro 3">...</div>

我们可以使用以下的方式选择所有人物简介div:div[title~="intro"] { ...}

不过遗憾的是<div title="animal intro">也将会被选择进来,这是需要我们特别注意的地方。

关于部分值选择器也有其局限性,它匹配的是由空格分隔的单词,如果我们将上面的div写成下面的样子就会匹配失败:

<div title="intro-1">...</div>

<div title="intro-2">...</div>

<div title="intro-3">...</div>

对于这种情况,我们可以使用子串匹配属性选择器。规则如下:

l div[title^="intro"] {...} //title以intro开头的div元素

l div[title$="intro"] {...} //title以intro结尾的div元素

l div[title*="intro"] {...} //title中包含"intro"子串的div元素

举例来说:

a[href*="google."] {...}

将包含所有链接中包含”google.”的a元素。

div[title$="y"] {...}

将包含以下所有div元素:

<div title="cloudy">...</div>

<div title="snowy">...</div>

<div title="rainy">...</div>

可以看出部分值属性选择器的功能是十分强大的。

5、派生选择器

派生选择器,乍一看名字不知所云,它又名上下文选择器,它是使用文档DOM结构来进行css选择的。DOM结构在此不再赘述了,但为了更加清楚地说明问题,我们这里给出一个DOM树作为参考:

(1)后代选择器(descendant selector)

如上图,如果想要选择body元素的所有li子元素,方法如下:

body li { ...}

这里会选择所有的li后代,也就是图中的body下的所有li,不论他们之间相隔的代数有多少。同理,如果想要选择h1元素下的span,可以使用以下代码:

h1 span { ...}

如果我们要选择拥有warning类的元素的li后代,可以使用下面的方法:.warning li { ...}

当然,如果希望只选择拥有warning类的div元素的li后代,可以写作:div.warning li { ...}

由上面的例子不难看出,后代选择器的规则就是用空格连接2个或多个选择器。空格的含义为:…的后代。多个选择器的情况如下: ul li li { ...}

这样,就会选择所有ul下包含在li元素下的所有li元素了,听起来十分拗口,参考我们的DOM树,会选择到文档树种最后一排li元素。

(2)子元素选择器(child selector)

子元素选择器和后代选择器不同,它只能选择某元素的直接后代,不能跨代选取,用法如下:ul >li { ...}

两个子元素中间用一个大于号>连接。上面的代码会选择到所有ul元素的直接li子元素。对应到DOM树中,所有的li元素都会被选中,原因是图中所有的li元素都是ul的子元素。

但是,以下代码将不会选中任何元素:h1 >span { ...}

由于span是h1的”孙子元素”,h1没有直接的span子元素,因而上面的代码将不会选到任何结果。其他方面和后代元素类似,需要特别注意的就是子元素选择器不能隔代选取。

(3)相邻兄弟选择器(Adjacent sibling selector)

相邻兄弟选择器,故名思意将会选取某个元素的相邻兄弟元素,注意它选取的是相邻的兄弟元素而不是所有的兄弟元素,实际上选取的是紧跟在后面的兄弟元素。

相邻兄弟选择器在实践中有比较不错的应用,例如,你想在一个h2标题后面的段落应用某种独到的样式或者希望在某类p段落后的table上添加一个额外的边距等等。它的用法如下:

li + li { ...}

以上代码会选择所有作为li相邻元素的li元素,听起来又有点拗口,参考DOM树,它会选择除了排在第一个li元素的其余4个li元素,因为2个排在第1的li元素没有更靠前的兄弟元素来选择它。

再比如:h1 + p { ...} 会选择所有紧跟h1后面的p兄弟元素。h1.warning + p { ...} 会选择所有有用warning类的h1元素后面紧跟的p兄弟元素。

(4)几种派生选择器的结合使用

实际上,以上介绍的几种派生选择器可以结合使用,看下面的例子:

html >body li.warning + li { ...}

上面的选择器含义为:html元素的body子元素中,所有拥有warning类的li元素的相邻兄弟元素。

第一章一.填空题1.HTML是(Hyper Text Markup Language)的英文缩写,全称是(超文本标记语言)2.现在网络上使用的绝大多数图片和图像是(gif)格式、(jpeg)格式和(png)文件格式。3.现在超链接可以从一个网页转到另一个网页,也可以从一个网站传到另一个网站。超链接的载体包括(文本)、(图像)、和(热区)三种。4.网页的基本功能有(媒体的作用)(互动的作用)、(传输的作用)5.png格式结合了(jpeg)和(gif)的优点,也支持(透明和交错)是无损压缩的第二章一.填空题1.在HTML语言中(<HTML>…</HTML>)标签是必须的。2.在HTML语言中<p>标记的作用是(段落)3.在插入图像或者使用超链接时,路径有(相对)和(绝对)两种4.HTML的英文全称是(Hyper Text Markup Language)5.HTML列表常用的包括有序列表和无序列表,有序列表的标记是(<ol>),无序列表的标记是(<ul>)第三章一.填空题1.在“文档”窗口中有(代码视图)、(设计视图)、(代码和设计)视图三种方式显示和查看文档2.站点中文件及文件夹的命名要规范,使用(英文)和(数字),使用(小写英文),避免包括(中文)、(空格)、及(特殊符号)。3.网站主页的文件名称默认为(index.htm)或(default.htm)4.站点目录中的“Image”,目录通常是用于存放网站所用的(图像)文件的5.保存文件的快捷键为(ctrl)+(s)第四章一.填空题1.网页中最基本的元素是(文本)2.使用Dreamweaver 8中的(编辑)菜单中的(选择性粘贴)命令可以进行多种形式的粘贴3.在Dreamweaver 8 中段落的对齐方式一般有:(左对齐)、(右对齐)、(居中对齐)和(两端对齐)四种方式4.在Dreamweaver 8中所提供的列表包括(项目列表)和(标号列表)两种5.在Dreamweaver 8中,如果让网页中的背景图像和背景颜色同时有效,则必须使用(透明的图像)作为背景图像,同时在设置(背景颜色)6.文档的链接路径主要有(绝对路径)、(相对路径)和(根目录相对路径)三种形式第五章一.填空题1.在表格中横向为(行),纵向为(列),其交叉部分为(单元格)2.表格的宽度有两个单位选项,分别是(像素)和(百分比)3.合并单元格按钮可以将所选的(矩形)范围的(单元格)、(行)或(高)合并为一个单元格。拆分单元格按钮可以将(一个)单元格分为(两个)或(更多单元格)4.在Dreamweaver 8中提供了(3)中布局模式,分别为(标准)、(扩展)、和(布局)5.框架实际上由两部分组成,即(框架)和(框架集)第六章一.填空题1.在层面板中字母(C)表示层的叠加顺序2.在Dreamweaver 8中选中多个层时,其中(最后被选中)的层将作为多个层对齐的依据3.在Dreamweaver 8中的层面板上勾选(防止重叠)将不能将一个层移到另一个层的上面4.在Dreamweaver 8中利用时间轴制作的动画要在时间轴面板中选定(自动播放)选项,载入当前网页时即开始自动播放时间轴动画5.在时间轴面板中选中(循环)选项,网页中的时间轴动画将无限地反复播放第七章一.填空题1.(表单)主要用来收集用户的信息,并将其提交到服务器,从而实现网站管理者与客户之间的交互2.表单一半由两个部分组成,一是(在网页中收集信息的表单对象)包括表单、文本字段、复选框、单选钮、列表菜单项等;二是对表单内容(进行处理的应用程序)3.在Dreamweaver 8表单中,文本域有(单行文本域)、(多行文本域)、(密码域)3种类型4.在表单中,(复选框)是在一组选项中可以多选的,(单选按钮)是在一组选项中只能选择一项第八章一.填空题1.页面内容被加载的触发事件是(OnLoad)2.页面关闭的触发事件是(OnUnLoad)3.当鼠标经过对象时的触发事件是(OnMouseOver)4.当鼠标离开对象时的触发事件是(OnMouseOut)5.当页面被关闭时的触发事件是(OnUnLoad)第九章一、填空题1.CSS样式表又称为(层叠式样式表),英文全称是(Cascading style sheets)2.在Dreamweaver 8 中可以定义的样式有(自定义CSS规则HEML标签规则和CSS选择器样式)3.在Dreanweaver 8 中使用附加样式表,添加形式有(链接)和(导入)两种。4.在Dreanweaver 8 中CSS面板中(全部)和(正在)两种模式。第十章一、填空题1.链接到以您文件实际是(一宗超链接),只是它的目标是(一个音频文件)。2.嵌入音频是将声音直接(插入到与缅中),页面带有(播放器),浏览者可以(控制音频文件的播放)。3.为背景音乐插件设置参数,各参数分别为:“hidden”的值为(TRUE)、“autostart”的值为(TRUE)、“loop”值为(infinite).4.在Dreamweaver 8 中可以插入的Flash、文件的扩展名为:(.SWF)第十一章一、 填空题1. 模版文件的扩展名是(.dwt)。2. 库文件的扩展名是(.lbi)。3. 站点中用于存放模版文件的文件夹名称是(Templates)4. 站点中用于存放库项目文件的文件夹名称是(Library)。第十二章一、 填空题1. 测试站点主要 两方面;一是(浏览器兼容性)测试,一是(超链接完好性)测试。2. Intenet上的网络空间有(付费)和(免费)的两种。3. Dreamweaver 8 为方便使用者发布网站,内嵌了(FTP上传和下载功能),支持(断点续传)功能,可以(批量上传)、(下载文件和目录),并且具有(闲置过久而中断)的特点。第一章二.选择题1.网页中最基本的元素是(D)A.声音 B.动画 C.超链接 D.文字2.浏览网页时,当鼠标指针指向超链接时,通常鼠标指针的形状会变成(A)A.手形 B.箭头 C.圆形 D.沙漏3.下列(D)不是用于制作网页的软件A.HTML编辑器 B.FrontPage C.Dreamwaver D.ORC4.以下图像格式具有动画效果的是(B)A.jpg B.gifC.bmp D.tif5.网页制作完成后,一般是以(C)为扩展名存盘的A..eml B..ppt C..htmlD..jpeg第二章二.选择题1.为同段落中的文本换行时,HTML标记为(B)A.<P> B.<br> C.<bg> D<pre>2.HTML代码<img src=url>表示(A)A.添加一个图像B.排列对齐一个图像C.设置围绕一个图像的边框的大小D.加入一条水平线3.在HTML文档中创建最大的标题的文本标签是(B)A. <pre></pre> B.<h1></h1> C.<h6></h6> D.<b></b>4.在HTML文档中网页的主体内容将写在(A)标记内A.<body> B.<head> C.<html> D.<p>5.在HTML语言中“<noframes></noframes>”标记的作用是(A)A.无框架时显示的内容B.相关性C.基本视图名称D.文件形态第三章二.选择题1.在对网站文件管理的过程中,我们可以对文件进行(D)操作A.增加 B.删除 C.重命名 D.以上都可以2.建立站点的过程中,在本地机器上编辑的站点被成为(A)A.本地站点 B.远程站点 C.Web站点 D.测试站点3.网站的栏目实际上是(B)A.站点的主题 B.站点的大纲索引 C.站点的内容 D站点的结构第四章二.选择题1.在Dreamweaver 8中实现文本的换行不分段,要执行(A)操作A. shift +Enter B.Alt+Enter C.Enter D.Shift2.在Dreamweaver 8中实现文本的换行同时分段,要执行(C)操作A.Shift+Enter B.Alt+Enter C.Enter D.Shift3.在Dreamweaver 8中,下面关于水平标尺说法错误的是(C)A.它作用为分隔上下面内容,以示区别B.可以灵活地设置它的高度和宽度C.它要增加很长下载时间D.可以为水平标尺设置阴影效果4.在Dreamweaver 8中输入空格的方法为(B)A.直接按空格键 B.在全角状态下按空格键 C.Alt+空格键 D.Ctrl+空格键5.在Dreamweaver 8中,下面对象中可以添加热区的是(C)A.表格 B.文字 C.图像 D.任何对象第五章二.选择1.下面(B)为单元格的标签A. <table>B.<td>C.<div>D.<body>2.表格属性中,设置(A)表示单元格内的内容与单元格边界之间的距离。A.边框B.间距C.填充 D.距离3.框架的作用就是把(A)窗口划分为多个区域,每个区域都可以显示不同的网页文档,并且每个区域都可以有自己的滚动条A.浏览器 B.控制面板 C.状态栏D.滚动条4.框架最主要的功能就是(A)的作用,让使用框架结构的网页更加吸引人A.网页布局 B.格式化布局 C.美化页面 D.渲染网页5.在Dreamweaver 8中,按(B)键同时绘制布局表格,可以连续绘制多个布局表格A.Shift B.Ctrl C.AltD.Shift+Alt第六章二.选择题1.在Dreamweaver 8中设置层的可见性为可见的选项是(D)A.inherit B.visible C.hidden D.default2.在Dreamweaver 8中设置层的可见性为隐藏的选项是(C)A.inherit B.visible C.hidden D.default3.在时间轴动画条中增加一个关键帧的操作为(B)A.Alt+单击鼠标 B.Ctrl+单击鼠标 C.单击鼠标 D.双击鼠标4.在Dreamweaver 8中,能产生动画效果的元素是(A)A.层 B.表格 C.单元格 D.框架第七章二.选择题1.下面(A)为表单的标签A.<form>B.<frame>C.<html>D.<body>2.下面不可以作为文本域类型的是(C)A.单行 B.多行 C.多列 D.密码3.在表单对象中,(A)也是一种链接方式A.跳转菜单 B.下拉菜单C.文本域 D.图像域4.在Dreamweaver 8中提供的(B)可以对文本域内容数据输入是否正确进行检查A.表单 B.验证表单 C.论证表单 D.以上都不对第八章二.选这题1.单击行为面板的(B)图标可以删除所选择的行为事件。A.加号 B.减号 C.删除 D.箭头2.为整个页面添加行为,需要单击(D)标签后附加行为。A <table> B.<td> C.<div> D.<body>3.(C)可以触发动作。A 动作 B 事件 C.行为 D.表单4当在对象上双击时触发的事件是(D)。A onMouseOutB. onMousDown C. onClick D. onDbClick5.当在对象上单击时触发的事件是(C)。A onMouseOut B.onMouseDown C. onClick D. onDbClick第九章二.选择题1.下列(A)为样式表的扩展名。A..css B.jsp C. .asp D..htm2.单击菜单中(D)菜单中的“CSS样式”可以打开CSS样式面板。A.查看 B视图 C.命令 D. 窗口3.更改样式后,页面中应用该样式的对象()。A自动革新为更改后的样式B.为更改前的样式C.需手工更新D.会弹出是否更新对话框4.以下新建样式命名正确的为(BC)A. .CSS三 B. .CSS3 C. .CSS3D..3CSS第十章二、选择题1.下面的文件类型(A)是音频格式文件.A. .WAV B..AVI C. .SWF D . .BMP2.下面的文件类型(C)是视频格式文件。A. .re B. .mp3 C. .wav D. .bmp3.当在网页中插入 Flash文本和按钮时,系统会自动生成一个Flash文件,默认文件的存放位置为(C)A.Images目录 B. 站点根目录C.与网页在同一目录下 D.生成一个新的目录第十一章一、 选择题1. 在Dreamweaver中,下面关于用模版的说法正确的是(D)A. 使用模版更新文件的方法可以大大节省用户的时间B. 不能更新网站应用了模版的网页C. 由模版创建的网页可以直接编辑D. 可以更新不是本模版的网页2. 如果许多页面使用了同样的布局,则可以使用(BD)来创建网页。A.库项目 B.模版 C.层 D.模版3.创建空白库项目并打开,可以像 一样编辑,下列在库中不能进行的编辑操作是(C)。A.输入文本 B.绘制层 C.设置页面属性 D. 插入表单第十二章二.选择题1.在建立站点的过程总,在本地机器上编辑的站点被称为(A)。A.本地站点 B.远程站点C. Web站点D。测试站点2.在使用Dreamweaver的过程中,可以通过(A)选项来开始站点的定义。A.管理站点 B.站点检测 C.站点维护 D.以上都不是3.下面哪种方法可以用于网站推广(A)A.FTP B.发送E-mail C. 新闻组 D. 以上都不是4.在设置远程信息时,必须输入正确的(D),才可以连到远程服务器。A.FTP主机地址 B.用户名 C.密码 D.以上都是