CSS选择器疑问
<ulid="menu"><lionMouseOver="per1=1"onMouseOut="per1=0"><ahref="#">菜单I</a><ulclass="s...
<ul id="menu">
<li onMouseOver="per1=1" onMouseOut="per1=0"><a href="#">菜单I</a>
<ul class="submenu" id="submenu1">
<li><a href="#">选项I</a></li>
<li><a href="#">选项II</a></li>
<li><a href="#">选项III</a></li>
<li><a href="#">选项IV</a></li>
</ul>
</li>
<li onMouseOver="per2=1" onMouseOut="per2=0"><a href="#">菜单II</a>
<ul class="submenu" id="submenu2">
<li><a href="#">a选项I</a></li>
<li><a href="#">b选项II</a></li>
<li><a href="#">c选项III</a></li>
<li><a href="#">d选项IV</a></li>
</ul>
</li>
</ul>
为什么
#menu .submenu li a{...}
与
.submenu li a{...}
不一样，后者不正常(整个文档中只有id 为menu的ul中有class = "submenu")
你可能没懂我的意思，我的意思是如果按选择器的定义，此两者在整个文档只在一个id=menu下有submenu类的情况下实现的功能是相同的，也就是说只有当文档中还存在另一个id=menu2下也有submenu类的时候才需要用#menu 加在.submenu li a前作为区分请高手帮忙解释一下 展开
<li onMouseOver="per1=1" onMouseOut="per1=0"><a href="#">菜单I</a>
<ul class="submenu" id="submenu1">
<li><a href="#">选项I</a></li>
<li><a href="#">选项II</a></li>
<li><a href="#">选项III</a></li>
<li><a href="#">选项IV</a></li>
</ul>
</li>
<li onMouseOver="per2=1" onMouseOut="per2=0"><a href="#">菜单II</a>
<ul class="submenu" id="submenu2">
<li><a href="#">a选项I</a></li>
<li><a href="#">b选项II</a></li>
<li><a href="#">c选项III</a></li>
<li><a href="#">d选项IV</a></li>
</ul>
</li>
</ul>
为什么
#menu .submenu li a{...}
与
.submenu li a{...}
不一样，后者不正常(整个文档中只有id 为menu的ul中有class = "submenu")
你可能没懂我的意思，我的意思是如果按选择器的定义，此两者在整个文档只在一个id=menu下有submenu类的情况下实现的功能是相同的，也就是说只有当文档中还存在另一个id=menu2下也有submenu类的时候才需要用#menu 加在.submenu li a前作为区分请高手帮忙解释一下 展开
展开全部
#menu .submenu li a{...}表示只有id为menu并且引用了自定义类.submenu 的列表项的超链接才可按要求显示；
.submenu li a{...}表示引用了自定义类.submenu 的列表项的超链接。
如果还不明白好好看看下面就搞懂了：
样式规则CSS的语法很简单，它使用一组英语词来表示不同的样式和特征。一个式样表由一组规则组成。每个规则由一个“选择器”（selector）和一个定义部分组成。每个定义部分包含一组由半角分号（;）分离的定义。这组定义放在一对大括号（{ }）之间。每个定义由一个特性，一个半角冒号（:）和一个值组成。选择器（Selector） 通常为文件中的元素（element），如html中的<body>，<p>，<strong>等标签，多个选择器可以半角逗号（,）隔开。 属性（property） CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。 值（value） 指属性接受的设定值，可由各种关键字（keyword）组成，多个关键字时大都以空格隔开。 要针对没有标签定义范围进行样式设定时，可利用<div>与<span>标签
定义CSS规则CSS样式表由一些规则组成，每个规则由选择符和属性声明两部分组成，其中，选择符用于标识格式元素（如p、h3标记、类名或id），属性声明则用于定义元素的样式。定义CSS规则的语法如下：选择符{属性:值;属性:值;...}属性声明用花括号括起来，其内容由一些属性-值对组成，属性名称与属性值用冒号（:）分割，不同属性-值对用分号（;）分割。当在HTML网页中定义CSS规则时，应把规则定义放在<style>与</style>标记之间；如果是在单独的CSS文件中定义规则，则不必使用<style>标记。三、选择符的类型定义CSS样式时，可以使用各种类型的选择符。选择符主要有以下几种类型。1、类型选择符类型选择符用于选择以特定HTML标记定义的页面元素。语法是：tagName{属性:值;属性:值;...}其中，tagName表示某个HTML标记的名称。使用特定的HTML标记作为选择符，可以对这个HTML标记的外观样式进行重新定义，由此定义的CSS样式将自动应用于页面中所有通过该标记定义的元素。例如：input{font-family:"宋体";font-size:9pt;}2、类选择符类选择符用于选择具有特定class属性的页面元素。语法是：*.className{属性:值;属性:值;...}tagName.className{属性:值;属性:值;...}其中，className指定类选择符的名称，tagName表示某个HTML标记名称。使用“*”作为类选择符的前缀时，若要应用所定义的类样式，把元素的class属性设置为此选择符的名称即可。此类样式可以应用于所有页面元素。此处的型号可以省略。若使用某个HTML标记作为类选择符的前缀时，对于要应用所定义的类样式，把元素的class属性设置为选择符的名称即可；这时，此类样式只能应用于页面上的特定HTML元素（由tagName指定，同时满足两个条件）。例如：.style1{color:#FF0000;}div.style2{color:#0000FF;}3、id选择符id选择符用于选择具有特定id属性的元素。语法是：#idName{属性:值;属性:值;...}tagname#idName属性:值;属性:值;...}
其中，idName指定id选择符的名称，tagName表示某个HTML标记名称。其组合规则含义与类选择符相同，可对于某一id属性或同时满足特定标记的页面元素定义CSS规则。例如：#style1{font-size:12px;}p#style2{font-family:"华文行楷";}4、包含选择符包含选择符由E1和E2两个选择符组成，用于选择所有被E1包含的E2，也就是“与”的关系。语法是：E1 E2{属性:值;属性:值;...}其中，E1和E2可以是HTML标记名称、类选择符或id选择符。该CSS规则只适用于，同时满足E1和E2选择的页面元素上。例如：h1 em{color:blue;}#style1 span{background:blue;}div.side h1{font-size:large;}5、选择符分组若希望把同一个CSS规则应用于多个选择符，此时，应以逗号分隔的方式把那些选择符合并为主，它们之间是“或”的关系。语法是：E1,E2,E3{属性:值;属性:值;...}例如：body,td,th,input,textarea,select{font-family:"宋体";font-size:9pt;}6、伪类选择符CSS中的伪类概念延伸了CSS样式的表现形式，可作用与某些动作行为：a:link{属性:值;属性:值;...} /* 设置a元素在未被访问前的CSS属性 */a:hover{属性:值;属性:值;...} /* 设置a元素在其鼠标指针悬停时的CSS属性 */a:active{属性:值;属性:值;...} /* 设置a元素在鼠标点击但未释放时的CSS属性 */a:visited{属性:值;属性:值;...} /* 设置a元素在其链接地址被访问过时的CSS属性 */例如：a:link{text-decoration:none;}a:hover{text-decoration:underline;color:blue;}a:active{color:red};a:visited{text-decoration:none;color:#666666;}
.submenu li a{...}表示引用了自定义类.submenu 的列表项的超链接。
如果还不明白好好看看下面就搞懂了：
样式规则CSS的语法很简单，它使用一组英语词来表示不同的样式和特征。一个式样表由一组规则组成。每个规则由一个“选择器”（selector）和一个定义部分组成。每个定义部分包含一组由半角分号（;）分离的定义。这组定义放在一对大括号（{ }）之间。每个定义由一个特性，一个半角冒号（:）和一个值组成。选择器（Selector） 通常为文件中的元素（element），如html中的<body>，<p>，<strong>等标签，多个选择器可以半角逗号（,）隔开。 属性（property） CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。 值（value） 指属性接受的设定值，可由各种关键字（keyword）组成，多个关键字时大都以空格隔开。 要针对没有标签定义范围进行样式设定时，可利用<div>与<span>标签
定义CSS规则CSS样式表由一些规则组成，每个规则由选择符和属性声明两部分组成，其中，选择符用于标识格式元素（如p、h3标记、类名或id），属性声明则用于定义元素的样式。定义CSS规则的语法如下：选择符{属性:值;属性:值;...}属性声明用花括号括起来，其内容由一些属性-值对组成，属性名称与属性值用冒号（:）分割，不同属性-值对用分号（;）分割。当在HTML网页中定义CSS规则时，应把规则定义放在<style>与</style>标记之间；如果是在单独的CSS文件中定义规则，则不必使用<style>标记。三、选择符的类型定义CSS样式时，可以使用各种类型的选择符。选择符主要有以下几种类型。1、类型选择符类型选择符用于选择以特定HTML标记定义的页面元素。语法是：tagName{属性:值;属性:值;...}其中，tagName表示某个HTML标记的名称。使用特定的HTML标记作为选择符，可以对这个HTML标记的外观样式进行重新定义，由此定义的CSS样式将自动应用于页面中所有通过该标记定义的元素。例如：input{font-family:"宋体";font-size:9pt;}2、类选择符类选择符用于选择具有特定class属性的页面元素。语法是：*.className{属性:值;属性:值;...}tagName.className{属性:值;属性:值;...}其中，className指定类选择符的名称，tagName表示某个HTML标记名称。使用“*”作为类选择符的前缀时，若要应用所定义的类样式，把元素的class属性设置为此选择符的名称即可。此类样式可以应用于所有页面元素。此处的型号可以省略。若使用某个HTML标记作为类选择符的前缀时，对于要应用所定义的类样式，把元素的class属性设置为选择符的名称即可；这时，此类样式只能应用于页面上的特定HTML元素（由tagName指定，同时满足两个条件）。例如：.style1{color:#FF0000;}div.style2{color:#0000FF;}3、id选择符id选择符用于选择具有特定id属性的元素。语法是：#idName{属性:值;属性:值;...}tagname#idName属性:值;属性:值;...}
其中，idName指定id选择符的名称，tagName表示某个HTML标记名称。其组合规则含义与类选择符相同，可对于某一id属性或同时满足特定标记的页面元素定义CSS规则。例如：#style1{font-size:12px;}p#style2{font-family:"华文行楷";}4、包含选择符包含选择符由E1和E2两个选择符组成，用于选择所有被E1包含的E2，也就是“与”的关系。语法是：E1 E2{属性:值;属性:值;...}其中，E1和E2可以是HTML标记名称、类选择符或id选择符。该CSS规则只适用于，同时满足E1和E2选择的页面元素上。例如：h1 em{color:blue;}#style1 span{background:blue;}div.side h1{font-size:large;}5、选择符分组若希望把同一个CSS规则应用于多个选择符，此时，应以逗号分隔的方式把那些选择符合并为主，它们之间是“或”的关系。语法是：E1,E2,E3{属性:值;属性:值;...}例如：body,td,th,input,textarea,select{font-family:"宋体";font-size:9pt;}6、伪类选择符CSS中的伪类概念延伸了CSS样式的表现形式，可作用与某些动作行为：a:link{属性:值;属性:值;...} /* 设置a元素在未被访问前的CSS属性 */a:hover{属性:值;属性:值;...} /* 设置a元素在其鼠标指针悬停时的CSS属性 */a:active{属性:值;属性:值;...} /* 设置a元素在鼠标点击但未释放时的CSS属性 */a:visited{属性:值;属性:值;...} /* 设置a元素在其链接地址被访问过时的CSS属性 */例如：a:link{text-decoration:none;}a:hover{text-decoration:underline;color:blue;}a:active{color:red};a:visited{text-decoration:none;color:#666666;}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
