首页 > 代码库 > CSS学习(1)选择器

CSS学习(1)选择器

使用CSS


1,CSS是层叠样式表(Cascading Style Sheet),由选择器和声明块两部分构成。如下前部分h1是选择器,花括号包围的块是声明块。

h1 {    color: red;}

2,CSS使用主要分为外部样式表,嵌入样式表,和内联样式表。

/*外部样式表*/<link rel="stylesheet" href="http://www.mamicode.com/base.css">/*嵌入样式表*/<style>    h1 {        color: red;    }</style>/*内联样式表*/<h1 style="color: red">内联样式表</h1>

3,选择器用来确定样式表要应用到哪些元素中。可用的选择器类别有五种:元素名称、类别、伪类、属性、ID

(1)在优先级上,ID的优先级是最高的,元素名称最低,类别和属性是一样的。

(2)选择器可以混合使用。混合后的选择器优先级从右边往左开始计算。比如 h1.very要比 .very h1的优先级高,所以同时满足两者的元素会优先使用h1.very的样式。如果优先级相同则使用后出现的样式

(3)混合使用选择器:

  a,元素名称:与同类选择器组合,以空格隔开表示父子元素关系;以逗号隔开表示等同关系

  b,类别用点号+类名

  c,伪类使用冒号+伪类名

  d,属性使用[name="value"]属性值不填时[name]表示不限制属性值,可用的匹配模式有 =, ~=, |=, *=, ^=, $=

  e,ID用#id

h1,h2 { } /*h1,h2元素*/h1 h2 { } /*h1的所有h2子元素*/h1 > h2 { } /*h1的直接h2子元素*/h1 + h2 { } /*h1后面的相邻的同父元素的h2元素 */h1 ~ h2 { } /*h1后面的同父元素h2元素*/h1.very h2[lang|="zh"]:first-letter { }

 

CSS学习(1)选择器