码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习(1)选择器

时间:2014-09-08 03:14:06      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   使用   div   sp   log   c   ad   

使用CSS


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

h1 {
    color: red;
}

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

/*外部样式表*/
<link rel="stylesheet" href="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)选择器

标签:style   blog   color   使用   div   sp   log   c   ad   

原文地址:http://www.cnblogs.com/meamin9/p/3961035.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!