CSS
1:关于选择器的区别:
交集选择器:
类选择器class="se",而且这个类选择器是在p标签里面的 p.se的意思是呢,代码中凡是<p></p>里面class="se"的所有标签的样式 比如: <div> <p> <span>一</span> <span class="se">二</span> </p> <span class="se">三</span> <a class="se">四</a> </div> 你的样式p.se的作用范围是第二个span,对第三个span和a标签没有影响 .se就不一样了,同样的代码 <div> <p> <span>一</span> <span class="se">二</span> </p> <span class="se">三</span> <a class="se">四</a> </div> .se的作用对二,三,四都有影响,所以我们称class为类选择器 p.se和.se也就是作用范围不一样罢了,如果class="se"类才定义一个而已,那和id选择器是没有分别的,也就是说,id选择器只对一个标签有效,class可以对多个标签起作用 并集选择器css并集选择器与交集选择器相对应,它可以看作是“集体声明”,即对多个选择器应用同一种css样式。它的语法结构是将所有选择器罗列出来,通过英文逗号分隔,选择器可以是基本选择器也可以是复合选择器,形如:
1 p, h1, div.post, #wrap{css样式}下面通过实例来介绍并集选择器的具体应用:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <html> <head> <title>css并集选择器的应用</title> <style type="text/css"> h1, p, div.second, #third{ color:red; } </style> </head> <body> <h1>标题</h1> <p>第一行文本</p> <div class="second">第二行文本</div> <div id="third">第三行文本</div> </body> </html>预览:
使用并集选择器可以将具有相同样式的html元素合并在一起,大大简化了代码。
后代选择器:
后代选择器(descendant selector)又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
根据上下文选择元素
我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。
举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:
h1 em {color:red;}上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中:
<h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p>当然,您也可以在 h1 中找到的每个 em 元素上放一个 class 属性,但是显然,后代选择器的效率更高。
语法解释
在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左读选择器。
因此,h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器,可以换成以下说法:“包含 em 的所有 h1 会把以下样式应用到该 em”。
具体应用
后代选择器的功能极其强大。有了它,可以使 HTML 中不可能实现的任务成为可能。
假设有一个文档,其中有一个边栏,还有一个主区。边栏的背景为蓝色,主区的背景为白色,这两个区都包含链接列表。不能把所有链接都设置为蓝色,因为这样一来边栏中的蓝色链接都无法看到。
解决方法是使用后代选择器。在这种情况下,可以为包含边栏的 div 指定值为 sidebar 的 class 属性,并把主区的 class 属性值设置为 maincontent。然后编写以下样式:
div.sidebar {background:blue;} div.maincontent {background:white;} div.sidebar a:link {color:white;} div.maincontent a:link {color:blue;}有关后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。
例如,如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。
因此,ul em 将会选择以下标记中的所有 em 元素:
<ul> <li>List item 1 <ol> <li>List item 1-1</li> <li>List item 1-2</li> <li>List item 1-3 <ol> <li>List item 1-3-1</li> <li>List item <em>1-3-2</em></li> <li>List item 1-3-3</li> </ol> </li> <li>List item 1-4</li> </ol> </li> <li>List item 2</li> <li>List item 3</li> </ul>
链接的四种状态:
<a href=“地址”></a>
a:link 链接
a:visited 访问后
a:hover 鼠标经过
a:active 鼠标点击时
一定要按顺序书写,否则不起作用!
做企业站关于链接文字的状态常用以下几种:
1.链接文字默认没有下划线,鼠标经过有下划线,访问后没有下划线(普通企业站)
2.链接文字都没有下划线,可能默认链接时一种颜色,鼠标经过变一种颜色(普通企业站)
3.链接文字默认有下划线,鼠标经过有下划线并且可以变颜色(新闻站用的多)
一般情况下:链接和访问后的状态是相同的;
a:link,a:visited{text-decoration:none(链接文字不带下划线);}
a:hover{text-decoration:underline(链接文字带下划线);}