CSS学习笔记:选择符

1.简单选择符
基于HTML标签的类型选择符和基于HTML属性的class或id选择符
示例:
a:HTML标签的类型选择符(省出<>的HTML标签的名字)
p{...},body{...},input{...}

b:基于HTML属性的class或id选择符
<input type="text" name="item" class="b" />
.b{...}
,
<label id="item">...</label>
#item{...}

2.通用选择符
CSS定义了一个通用选择符,适用于页面内所有标签和内容,它由星号(*)表示.
示例:
*{...}
*.b{...}

注意:
若编写通用选择符的规则中,还包括一些其它内容(class,id选择符),那么可以省略星号.实际上,class选择符的通常方法只是省略星号的通用选择符的一种特殊情况.

3.组合简单选择符
要使CSS规则发挥最大的作用,需要写组合规则(抽取共同的部分).通过集中列出选择符,并用逗号将他们分隔,可以联合规则.
.b,#item{...}

4.子选择符
在HTML,XML中,孩子是完全包括于另一个元素内容之内的元素.通过组合简单选择符,并用空格隔开.子选择符定义在基于页面内给定标签出现处的规则.
示例:
<div id="item">
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</div>
#item ul li{...}

5.伪类和伪元素
5.1:伪元素
伪类选择符是基于一组预定义性质的选择符,HTML元素可以占有这些预定义性质.实际上这些性质与class属性的功能相同.在CSS术语中称为:伪类
伪选择符标识虚拟元素,即在标记中不存在,但浏览器可以推理并应用样式的元素.在伪类中,没有对应伪元素的标记
示例:
:link{...}
a:link{...}

注意:
通过把伪类和真正的类甚至是其它的伪放在一起.中间不留空格,只有.和:指示符可以将它们联合起来
示例:
<a href="4.html" class="nav1">4</a>
...
<a href="n.html" class="navn">n</a>

a:link.nav1{...}
a.navn:link{...}
常用的有:
a:link{...}
a:visited{...}
注意:
link和visited是互斥的.给定的连接在给定的时间点上只能是其中一种.不可能同时是两种.当然你也可以这样写:
a:link,a:visited{...}

这里就不一一罗列伪元素了!可以去W3C去看看文档或准备一本<<CSS权威指南>>参考一下.

5.2:伪元素
级联样式表定义了4种伪元素,也称为:虚拟元素.它们从内容创建.这些内容位于与基本元素相关的文档中.
:before-插入元素前的内容
:after-插入元素后的内容
:first-letter-块元素的第一个字母
:first-line-块元素的第一行

示例:
<div id="item">
This is <p>Car</p>
</div>
#item p:first-line{...}
#item p:first-line:first-letter{...}

6.属性选择符
属性选择符对设置在元素上的所有特殊HTML属性的存在,也可能上值进行测试
示例:
input[type="checkbox"]{...}
input[type="submit"]{...}
option[value="a"]{...}
hr[noshade]{...}

使用通用选择符:
*[title]{...}
[title]{...}

除了检验属性的存在之外,还可以使用属性值进行选择.

6.1元素[属性="值"]{...}
注:指定确切匹配,只选择那些已经给定属性值的元素
示例:
<table summary="layout">
table[summary="layout"]{...}

6.2元素[属性~="值"]{...}
注:记录匹配,若规则中的值是HTML中给定的几个值之一,用空格隔开
示例:
<div class="foo bar">...</div>
div[class~="bar"]

6.3元素[属性|="值"]{...}
注:形式匹配规则的值和HTML的值,并比较连字号前的字符
示例:
<span lang="en-us">...</span>
*[lang|="en"]

7.家族关系
CSS中基于家族的选择符基于HTML标签间的关系选择元素
7.1子选择符
子选择符是后代选择符的一种特殊类型.子选择符仅指那些属于其他元素直系子女的元素,不指任何"孙子"或其后代.子选择符由父元素与子元素间的大于符号(>)指示
示例:
<div class="item">
  <p>Yes</p>
  <p>No</p>
</div>

.item >p{...}
只有第一个p应用规则

7.2近亲选择符
若两个HTML标签具有相同的父元素.他们就是同胞.通过列出第一个同胞,一个加号(+),然后是第二个同胞,就可以写近亲规则.看下面的示例:
<ul>
 <li>Yes</li>
 <li>No</li>
 <li>Define</li>
</ul>
li +li{...}

注意:
近亲选择符对基于两个近亲的情况作出选择,但是它将规则只应用于两个中的第二个,第一个不受规则影响.这一条非常重要.

同胞意味着可视化地流向一起,而近亲选择符对于添加,删除边矩,边框,填充很有用.
示例:
<dl>
  <dt>CSS</dt>
  <dd>Cascading Style sheets</dd>

  <dt>HTML</dt>
  <dd>Hypertext Markup Language</dd>
  <dd>See also:<cite>XHTML</cite></dd>

  <dt>WAI</dt>
  <dd>Web Accessibility Initiative</dd>
  <dd>See also:<cite>W3C</cite></dd>

  <dt>WCAG</dt>
  <dd>Web Content Accessibility Guidelines</dd>

  <dt>WWW</dt>
  <dd>World Wide Web</dd>

  <dt>W3C</dt>
  <dd>World Wide Web Consortium</dd>
  <dd>See also:<cite>WWW</cite></dd>

  <dt>XHTML</dt>
  <dd>eXtensible HTML</dd>
  <dd>See also:<cite>HTML</cite></dd>
</dl>

dt{...}
dt+dt,dd+dt{...}
dt+dd{...}
dd+dd{...}