Sticker的博客

The Secret of Success: Suck Less

程序员之旅之Codeigniter驿站

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

CSS选择符:TypeClassID SelectorPosition and Group  SelectorAttribute SelectorPseudo-element SelectorPseudo-class SelectorSubclass Selector;

继承:InheritanceVisual Inheritance

 

Type(类型)、Class (类)、ID Selector(ID选择符):

Type指元素名字;

Class 元素赋予的类;

ID 元素所赋予的ID;

Position and Group Selector(定位和群组选择符)

Group Selector:把多个选择符用逗号连起来,可为不同的选择符赋予同一组规则。
Descendent Selector(后代选择符):把多个选择符用空白连起来,可选择后代元素。空白就是后代选择符。
child Selector:把多个选择符用大于号连起来,可选择子元素。
first-child Selector(首子选择符):把first-child加在任何选择符后,可选择第一个元素。便是首子选择符。
sibling Selector(兄弟选择符):把多个选择符用加号连起来,可选择兄弟元素。
<html>
<head>
<style type="text/css">
 <!--
/*群组选择符*/
p,ol,li{border:1px solid black;padding-left:10px;font-family:monospace;margin:10px;margin-let:0px;}
ol{margin-left:0px;padding-left:40px;margin-top:20px}
/*定位选择符*/
div *.my-class{font-size:1.2em;font-weight:bold;}/* 子孙选择符 */
#my-id p{background-color:gold;} /*子孙选择符*/
#my-id > *{border:3px solid black;}/*子选择符*/

li:first-child{font-weight:bold;color:red;}/*首子选择符*/
li+li{font-style:italic;color:blue;}/*兄弟选择符*/
-->
</style>
</head>
<body>
<h1>定位和组选择符</h1>
<p class="my-class">p.my-class</p>
<div id="my-id">
<ol>
   <li>div ol li </li>
   <li> div ol li </li>
   <li>
      <p class="my-class">div ol li p.my-class</p>
   </li>
</ol>
</div>
</body>
</html>
属性选择符:需要依据元素是否包含某个属性、属性中是否包含某个词、属性中是否设定为某个值来对元素进行选择。
css提供了3中属性选择符,但是没有诸葛为它们命名。 一般被称为:Attribute Existence Selector(属性存在选择符)、Attribute Word Selector(属性词汇选择符)和Attribute Value Selector(属性值选择符),我们可以把这些属性选择符加到任何选择符的后面。
属性存在选择符帮你选择含有某个属性的元素。属性存在选择符是用中括号包围的属性的名字。
属性词汇选择符会帮你选择属性中包含了某个具体词汇的元素。属性词汇选择符是由中括号包含的属性名字、波浪线、等号和位于双引号中的词汇组成的。
属性值选择符来选择属性中包含了某个具体值的元素。属性值选择符是由位于中括号里的属性名字、等号和含在双引号中的值所组成的。浏览器的匹配是区分大小的。
IE6不支持属性选择符。IE7和其它主流浏览器对她们都有很好的支持。
<html>
<head>
<style type="text/css">
code{ white-space:pre;}
p[title]{padding:5px 10px; border:1px solid gray;}
p[title="paragraph"] {background-color:gold;}
p[title="#4   paragraph"]{font-weight:bold;}
</style>
</head>
<body> <h1>Attribute Selectors</h1>

 <p>This is a paragraph without the <code>title</code> attribute.</p>

 <p title="Second">
  <code>p[title]</code> selects all paragraphs containing a title attribute.</p>

 <p title="Third paragraph">
  <code>p[title~="paragraph"]</code> selects all paragraphs with a
  title attribute containing the word, <code>paragraph</code>.</p>

 <p title="#4   paragraph">
  <code>p[title="#4   paragraph"]</code> selects all paragraphs with a
  title attribute containing the exact text, <code>#4   paragraph</code>. Matches
  are case sensitive and must match letter-for-letter including whitespace.</p>

</body>
</html>
伪类元素选择符:first-letter和first-line。被称为伪类元素选择符是因为他们选择了元素中的某不服内容而不是元素中的所有内容。伪类选择符与类、ID以及其它类型组合。只与终端块状元素相搭配,对内联元素或者结构化块状元素不起作用。
IE6不支持伪类元素选择符,除非在选择符链中,它是最后一个选择符,IE7修正了这个问题。
伪类选择符:A:link visited hover focus active
子类选择符:
posted on 2010-04-25 17:08  Sonimy  阅读(333)  评论(0编辑  收藏  举报
高调做事,低调做人!