CSS样式表操作及选择器定义

1.操作样式表

（1）html中引入css的三种方式：外部样式表、嵌入式样式表和内联样式表。首选外部样式表，引入的方式为<link rel="stylesheet" href="base.css" />，可以使用多个link标签，引入多个样式表。浏览器将其保存到了缓存中，只需一次加载。

（2）当且仅当style元素出现在link元素后面时，嵌入式样式表的样式才会覆盖外部样式表。

（3）内联样式的优先级高于其他所有样式。除非其他样式有!important。

（4）使用了@import时，若引入的样式之后有与之冲突的样式时，则后出现的样式会覆盖这些引入的样式。

（5）可设置一个只用于特定输出的样式表，如只用于打印media="print"，只用于在浏览器查看屏幕的media="screen"。在html文件中定义与媒体相关的样式表时，写为@media print {}

2.选择器的定义

（1）定义选择器的5个标准

• 元素的类型和名称
• 元素所在的上下文
• 元素的类或ID
• 元素的伪类或伪类
• 元素是否有某些元素

为指出目标元素，可将上述标准任意组合。

（2）选择器的选择元素的常用方法

• a[title]{...}指的是所有具有title属性的a元素。尽量避免使用ID选择器.

• .architect p{}表示这个选择器会寻找任何作为architect类元素后代(无论是第几代)的所有p元素，空格必不可少。

• .architect > p，按父元素选择要格式化的子元素，这个选择器仅选择architect类元素的子元素的p元素。

• architect p+p,+是相邻同胞结合符只选择直接跟在同胞p元素之后的元素。h1~h2，~是普通同胞结合符，会让任何属于同一父元素的同胞h1后面的h2元素显示指定的样式。

• li:first-child{}选择父元素的地第一个子元素的li元素，借用:first-child和last-child伪类，选择第一个或最后一个子元素。伪类选择的是作为第一个或最后一个子元素的元素。

• p:first-letter只选择每个p元素的每一个字母。:first-line只选择第一行，这里的“第一行”指的是浏览器中的第一行，html文件中是看不出来的。只有某些特定的CSS属性能使用：first-letter伪元素，如font、color、background、text-decoration、vertical-align、text-transform、line-height、margin、padding、border、float和clear。伪元素：::first-line、::first-letter、::before和::after。伪类::first-child、:link等。

• a:link、a:visited、a:focus、a:hover和a:active使用伪类的方法按链接的状态来选择链接元素，a:link设置从未被激活或指向，a:visited设置以激活过的链接，a:focus通过键盘如Tab键获得焦点的链接外观,a:hover设置光标指向链接时的外观，a:active设置激活过的外观。也可对其他类型的元素使用active和hover伪类。链接设置时按LVFHA顺序。

• 按属性选择属性值:

  选择器	属性值
  [attribute]	匹配指定属性，不论值是什么
  [attribute=“value”]	完全匹配指定属性值
  [attribute~=“value”]	属性值是以空格分隔的多个单词，需有一个完全匹配
  [attribute|=“value”]	属性值以value-开头
  [attribute^=“value”]	属性值以value开头，value为完整的单词或单词的一部分
  [attribute$=“value”]	属性值以value结尾，value为完整的单词或单词的一部分
  [attribute*=“value”]	属性值包含指定值的子字符串

  (3）指定元素组，h1,h2{}中间以逗号隔开，有时候可能需要组合使用选择器。