CSS选择器（一）

一、什么是选择器

Css控制html样式，要css控制哪个元素的样式，这个元素就要被作为选择器。例如要改变标题一的大小h1{font-size:12px;},改变段落文本颜色 p{color:Red},此时h1、p为选择器。

二、选择器种类

• 标签选择器。
  

实例

选择并设置所有 <p> 元素的样式：

1. p{ background-color:yellow;}

复制代码

*注意：只针对HTML中标签使用。

由于标签选择器控制的是所有此标签的样式，范围较大，使用起来不够灵活。

• 类别选择器。
  

语法：.style引用 class=“style”。

规定某一类样式的时候，使用类别选择器。

实例

选择并设置 class="intro" 的元素的样式：

1. .intro{ background-color:yellow;}

复制代码

例1：大小30px，颜色蓝色字体。

例2：一个html元素可以引用多个类，class=aa bb 用空格隔开

1. .style1{font-size:30px; color:blue;}
   
2. .bgred{background-color:red}
   
3. <p class="style1">this is a prograph</p>
   
4. <h1 class="style1 bgred">this is a title</h1>

复制代码

*注意：选择器必须以字母或下划线开头，命名时要按照其作用命名。区分大小写。

• ID选择器。
  

语法：#top 引用 id=“top”

*注：ID与类别区别：id不能同时在两个标记中使用，有唯一性。而且id不仅仅适用于CSS代码，同样适用在js中，会造成语法混乱。对于页面结构的定义使用id，对于文本等样式的定义多次重复使用的使用class。

实例

为 id="firstname" 的元素设置样式：

1. #firstname
   
2. { 
   
3. background-color:yellow;
   
4. }

复制代码

• 群组选择器，h1，p{ font-size:14px}
  

群组选择器用于同时选取多个元素。如需为不同的元素设置相同的样式，请用逗号来分隔每个元素。

实例

选择并设置所有 <h1> 样式和所有 <p> 元素的样式：

h1,p{ background-color:yellow;}

例3：

文档中所有的H1\h2\h3均为红色、30像素字体、背景色为黄色。

1. h1,h2,h3{ font-size:30px; color:red; background-color:yellow}
   
2. <h1>这是标题1</h1>
   
3. <h2>这是标题2</h2>
   
4. <h3>这是标题3</h3>

复制代码

如果部分相同而部分不同，不同部分需要重新定义。

例4：

1. h1,h2,h3{ font-size:30px; color:red; background-color:yellow}
   
2. H3{ background-color: #66FFFF}
   
3. <h1>这是标题1</h1>
   
4. <h2>这是标题2</h2>
   
5. <h3>这是标题3</h3>

复制代码