CSS3学习笔记之（三）选择器

元素选择器，又称类型选择器，匹配文档语言元素类型的名称。

语法：h1{ font-family: sans-serif ; }

类选择器允许以一种独立于文档元素的方式来指定样式，可单独使用，可结合其他元素使用。

语法：需要对具体的文档标记声明   <h1 class=“important”>

            CSS类名前加点号         .important{ color:red;}

结合使用：p.important { color:red;}    即class为important的所有段落(<p>)。

多类选择器：  元素标记中 <p class="important waring"> 包含一个词列表，用空格间隔，即可同时标记为多个类。

类选择器链接使用  .import.waring{background:silver; }     可以选择同时包含多个类名的元素。

ID选择器，只能在文档中使用一次，不能使用ID词列表。

语法：<p id="intro"></p>

           CSS中使用井号，#intro{font-weight:bold;}

注意：ID选择器和类选择器都对大小写敏感。

属性选择器，即根据元素的属性和属性值来选择元素。

语法：   a[href]{color:red;}  对有href属性的a元素应用样式。

               多属性可链接使用，a[href] [title] {  }

属性与属性值必须完全匹配，p[class="important warning"] {    }

根据部分属性值选择，需要使用波浪号（~），

img[title~="Figure"] {border: 1px solid gray;}

字符串匹配属性选择器，用到部分正则表达式的语法，暂不详看。

后代选择器，又称包含选择器，根据文档结构定义选择器。

语法： h1 em {color:red;}   h1元素后代中的em元素定义样式。

后代选择器中两个元素之间的层次间隔可以是无限的。

子元素选择器，与后代选择器相比，只能选择作为某元素子元素的元素，缩小范围。

子选择器使用子结合符（>）

语法：h1>strong { }   选择只作为h1子元素的strong元素。

结合使用：

table.company td > p

相邻兄弟选择器，可选择紧邻在另一元素后的元素，且二者具有相同的父元素。

语法：h1 + p {  }   选择紧接在h1元素后出现的段落

结合使用：

html > body table + ul {margin-top:20px;}

伪类，用于向某些选择器添加特殊的效果。

语法结构：selector : pseudo-class {  property :  value }

             选择器：伪类{ 属性：值}

主要的伪类有锚伪类，处理链接的不同状态，活动状态a:active{}，已被访问状态visited，未被访问状态link，和鼠标悬停状态hover.

注意：hover必须置于a:link和a:visited之后才有效。

        a:active必须被置于a:hover之后才有效。

         伪类名称对大小写不敏感。

first-child伪类，用来选择元素的第一个子元素。

p：first-child{}  某元素第一个子元素的所有P元素

p > i:first-child{}  <p>元素中的第一个<i>元素

p:first-chid  i  {}    匹配所有作为第一个子元素的<p>中的所有<i>元素。

 

:lang伪类，为不同的语言定义特殊的规则。

伪元素，用于向某些选择器设置特殊效果。

first-line向文本首行设置特殊样式。

first-letter向文本的首字母设置特殊样式。
以上均只能应用与块级元素。

: before  可在元素的内容前面插入新内容。

h1:before
  {
  content:url(logo.gif);
  }

:after  可在元素的内容之后插入新内容。

h1:after
  {
  content:url(logo.gif);
  }