前端学习笔记（三）CSS选择器

选择器

内容：

• css选择器
• 选择器的权重
• css3新增选择器

一、 CSS选择器

1. 元素选择器/标签选择器{element选择器}
2. id选择器
3. class选择器
4. *通配符选择器（全局选择器）
5. 交集选择器
6. 并集选择器（群组选择器）
7. 后代选择器（包含选择器）
8. 子选择器
9. 伪类选择器

1.1标签选择器

语法:

元素名称{属性:属性值;}

说明:

• 标签选择器：以文档语言对象类型作为选择器，即使用结构中元素名称作为选择器，比如body、div、p、img、em、strong、span等
• 所有的页面元素都可以作为选择器
  用法:
• 如果想改变某个元素的默认样式时，可以使用元素选择器。
• 统一文档某个元素显示效果时，可以使用类型选择器。

1.2 id选择器

语法:

#id名{属性:属性值;}

说明:

• 使用id选择器时，应该为元素定义id属性。如：<div id=“top”>
• id选择器的语法格式："#"加上自定义的id名称，如：#top{width:300px;height:300px;}
• id名命名取英文名，不能使用关键字（所有的标记和属性都是关键字）如head标记。
• 一个id名称只能对应文档中的一个具体元素对象。因为id只能定义页面中某一个唯一的元素对象。
• id选择器最大的用处：创建网页的外围结构。

1.3 class选择器

语法:

.class名{属性:属性值;}

说明:

• 使用类选择器时，应该先为每个元素定义一个类名称。
• 类选择器的语法格式是:<div class=“top”> .top{width:200px;}

用法：

• class选择器更适合定义一类样式。

注意：

• 类名的第一个字符不能使用数字,它无法在Mozilla或Firefox中起作用。

1.4 *通配符(全局选择器)

语法:

*{属性:属性值;}

说明:

• 通配符的写法是“*”，其含义是所有元素，即对所有元素生效。

用法：

• 常用来重置样式。示例：
  *{padding:0margin:0;}

1.5 交集选择器

语法:

选择器1选择器2{属性:属性值;}

说明：

• 用于选择同时有多个选择器匹配的元素
• 第一种格式由标签选择器和类选择器组合，形同：
  h1.center{color:red;text-align:center}
• 第二种格式由标签选择器和id选择器组合，形同：
  h1#center{color:red;text-align:center}
• 两个选择器之间不能有空格，必须连续书写

1.6 并集选择器(群组选择器)

语法:

选择器1，选择器2，选择器3{属性:属性值;}

说明:
  当有多个选择器应用相同的样式时，可以将选择器用“,”分隔，合并为一组。

1.7 后代选择器

语法:

选择器1,选择器2{属性:属性值;}

说明:
  选择器1和选择器2用空格隔开，含义就是对选择器1中包含的所有选择器2生效。

1.8 子选择器

语法:

选择器1>选择器2{属性:属性值;}

说明:
  选择器1和选择器2用>连接，含义就是对选择器1中的所有一级选择器2生效。

1.9 伪类选择器

语法:

a:link{属性:属性值}超链接的初始状态 
a:visited{属性:属性值}超链接被访问后的状态
a:hover{属性:属性值}鼠标悬停在超链接上的状态  
a:active{属性:属性值}超链接被激活时的状态，即鼠标按下时超链接的状态

说明:

• 当这4个超链接伪类选择器联合使用时，应注意他们的顺序，上述顺序即为正确顺序，错误的顺序有时会使超链接的样式失效。
• 为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；例如：a{color:red;} a:hover{color:green;}表示超链接的三种状态都相同，只有鼠标滑过变颜色。
  有时会使超链接的样式失效。
• 为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；例如：a{color:red;} a:hover{color:green;}表示超链接的三种状态都相同，只有鼠标滑过变颜色。
• 并不是只有a标签才能使用伪类选择器。