[css] 语法

层叠次序
层叠次序由高到低为
1. 内联样式（在 HTML 元素内部）
2. 内部样式表（位于< head>标签内部）
3. 外部样式表
4. 浏览器缺省设置

优先级
id > class, attribute > element
!important 优先级最高，会覆盖所有其它

语法
选择器(selector) {属性(property): 值(value); 属性: 值;}

h1 {color:red; font-size:14px;}

选择器

• 派生选择器

li strong {color:red;} /* 只有在li元素下的strong元素中的字会变红 */

• id选择器

#id {color:red;} /* 理论上html里每个id只能出现一次 */

• 类选择器

.center {text-align: center}
p.center {text-align: center} /* 不是派生选择器, 选择了含有class属性的p元素 */

• 属性选择器

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}
[title~=hello] { color:red; }
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} /* 属性与属性值必须完全匹配，有空格也不行 */

– [attribute] 用于选取带有指定属性的元素
– [attribute=value] 用于选取带有指定属性和值的元素
– [attribute~=value] 用于选取属性值中包含指定词汇的元素
– [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
– [attribute^=value] 匹配属性值以指定值开头的每个元素
– [attribute$=value] 匹配属性值以指定值结尾的每个元素
– [attribute*=value] 匹配属性值中包含指定值的每个元素

• 后代选择器

• 子元素选择器

• 相邻兄弟选择器

h1 + p {margin-top:50px;} /* 紧跟h1的p元素，只选择紧跟的那一个 */

• 伪类

• 伪元素
  在css3中采用::来编写

继承
子元素会继承父元素的属性
在早期浏览器中不会，考虑兼容性最好全部写上

除了id和class外对大小写不敏感

选择器顺序

若全部相同，选择最后列出的那个规则

样式
链接
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后

元素
置换元素
浏览器根据元素的标签和属性，来决定元素的具体显示内容
不可置换元素
大多数元素是不可替换元素，即其内容直接表现给用户端