css选择符

一.选择符模式模式/含义/内容描述
*匹配任意元素。(通用选择器)e匹配任意元素 e (例如一个类型为 e 的元素)。(类型选择器)e f匹配元素 e 的任意后代元素 f 。(后代选择器)e > f匹配元素 e 的任意子元素 f 。(子选择器)e:first-child当元素 e 是它的父元素中的第一个子元素时，匹配元素 e 。(:first-child 伪类)e:link e:visited如果 e 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 e 。(link 伪类)e:active e:hover e:focus在确定的用户动作中匹配 e 。(动态伪类)e:lang(c)如果类型为 e 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的)，则匹配该元素。(:lang() 伪类)e + f如果一个元素 e 直接在元素 f 之前，则匹配元素 f 。(临近选择器)e[foo]匹配具有”foo”属性集(不考虑它的值)的任意元素 e 。(属性选择器)e[foo=warning]匹配其“foo”属性值严格等于“warning”的任意元素 e 。(属性选择器)e[foo~=warning]匹配其“foo”属性值为空格分隔的值列表，并且其中一个严格等于“warning”的任意元素 e 。(属性选择器)e[lang|=en]匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 e 。(属性选择器)div.warning仅 html。用法同 div[class~=warning]。(类选择器)e#myid匹配 id 等于“myid”的任意元素 e 。(id 选择器)引用:--------------------------------------------------------------------------------from：http://www.w3.org/tr/css2/selector.html--------------------------------------------------------------------------------
我们用下面的例子来解释“[s]父元素[/s]”、“[s]子元素[/s]”、“[s]父/子[/s]”及“[s]相邻[/s]”这几个概念。
<div title=这是一个div><h1>这是是h1的内容</h1><p>这是一个段落p的内容！<strong>这里是strong的内容</strong>这是一个段落p的内容！</p></div>
从以上代码中，我们可以找出这样的关系：[list][*] h1 和 p 同为 div 的“儿子”，两者分别同 div 形成“父/子”关系。[*] h1,p,strong 都是 div 的“子元素”。（三者都包含在 div 之内）[*] div 是 h1 和 p 的“父元素”。[*] strong 和 p 形成“父/子”关系，strong 的“父元素”是 p 。[*] 但 strong 和 div 并非“父/子”关系，而是“祖孙”关系，但 strong 依然是 div 的“子（孙）元素”。[*] div 是 h1 p strong 三者的“祖先”，三者是 div 的“子（孙）元素”。[*] h1 和 p 两者是相邻的。[/list]
继承上面的实例来具体演示一下e f的关系：假如，我们需要将 strong 内的内容二字变为绿色，我们可以有哪些方法呢？
div strong {color:green;} /* － 正确。strong 是 div 的“子元素”*/p > strong {color:green;} /* － 正确。strong 和 p 是“父/子”关系*/div > strong {color:green;} /* － 错误！strong 虽然是 div 的“子（孙）元素”，但两者乃是“祖孙”关系，而非“父/子”关系，因此不能用 > 符号连接*/
临近选择器和通用选择器：通用选择器以星号“*”表示，可以用于替代任何 tag 。
实例：
h2 + * { color:green }/*所有紧随 h2 的元素内的文字都将呈现红色*/
二.选择符分类介绍
1.通配选择符
语法：* { srules }
说明：通配选择符。选定文档目录树(dom)中的所有类型的单一对象。假如通配选择符不是单一选择符中的唯一组成，“*”可以省略。
示例：*[lang=fr] { font-size:14px; width:120px; }*.div { text-decoration:none; }
2.类型选择符
语法：e { srules }
说明：类型选择符。以文档语言对象(element)类型作为选择符。
示例：td { font-size:14px; width:120px; }a { text-decoration:none; }
3.属性选择符
语法：e [ attr ] { srules }e [ attr = value ] { srules }e [ attr ~= value ] { srules }e [ attr |= value ] { srules }
说明：属性选择符。选择具有 attr 属性的 e选择具有 attr 属性且属性值等于 value 的 e选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value 的 e 。这里的 value 不能包含空格选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 e
示例：h[title] { color: blue; }/* 所有具有title属性的h对象 */
span[class=demo] { color: red; }
div[speed=fast][dorun=no] { color: red; }
a[rel~=copyright] { color:black; }
4.包含选择符
语法：e1 e2 { srules }
说明：包含选择符。选择所有被 e1 包含的 e2 。即 e1.contains(e2)==true 。
示例：table td { font-size:14px; }div.sub a { font-size:14px; }
5.子对象选择符
语法：e1 > e2 { srules }
说明：子对象选择符。选择所有作为 e1 子对象的 e2 。
示例：body > p { font-size:14px; }/* 所有作为body的子对象的p对象字体尺寸为14px */
div ul>li p { font-size:14px; }
6.id选择符
语法：#id { srules }
说明：id选择符。以文档目录树(dom)中作为对象的唯一标识符的 id 作为选择符。
示例：#note { font-size:14px; width:120px;}
7.类选择符
语法：e.classname { srules }
说明：类选择符。在html中可以使用此种选择符。其效果等同于e [ class ~= classname ] 。请参阅属性选择符( attribute selectors )。在ie5+，可以为对象的 class 属性(特性)指定多于一个值( classname )，其方法是指定用空格隔开的一组样式表的类名。例如：<div class=class1 class2>。
示例：div.note { font-size:14px; }/* 所有class属性值等于（包含）note的div对象字体尺寸为14px */
.dream { font-size:14px; }/* 所有class属性值等于（包含）note的对象字体尺寸为14px */
8.选择符分组
语法：e1 , e2 , e3 { srules }
说明：选择符分组。将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式并为组。
示例：.td1,div a,body { font-size:14px; }td,div,a { font-size:14px; }
9.伪类及伪对象选择符
语法：e : pseudo-classes { srules }e : pseudo-elements { srules }
说明：伪类及伪对象选择符。伪类选择符。请参阅伪类( pseudo-classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]。伪对象选择符。请参阅伪对象( pseudo-elements )[:first-letter :first-line :before :after]。
示例：div:first-letter { font-size:14px; }a.fly :hover { font-size:14px; color:red; }


香港高防ip和高防cdn的防御是一样的吗
做网站的时候你要考虑的
建设网站的必要性
企业网站定制初期要注意哪些问题？
营销型网站建设技术指标
从百度权重高低，预估关键排名质量
影响网站用户体验的几个主要因素
「营销推广计划」企业营销推广计划该如何制定？