CSS学习笔记（二）选择器

1、标签选择器

以html标签作为选择器：

p {color:red}

2、类选择器

类选择器以一个点"."号显示。
在标签内声明类：

<p class="con"></p>

在CSS文件中定义类选择器：

.con{color:red}

*注1：对于不同类型元素的同一个类选择器如何区分：

p.con{color:red}
h1.con{color:green}

*注2：同一个元素可以设置多个类，之间用空格隔开：

 <p class="con1 con2"></p>

3、ID选择器

为HTNL标签添加ID属性：

<p id="p1"></p>

在CSS文件中定义ID选择器：

#p1{color:red}

注：每个ID是唯一的，一个元素只能有一个ID

4、群组选择器

集体统一设置样式：

p.con,h1,#p1{font-size:30px;}

5、全局选择器

用*对所有元素进行设置：

*{font-size:30px;}

6、后代选择器

例如，p和em是父子关系：

<p><em>斜体</em>这是内容</p>

使用后代选择器，父子之间用空格隔开：

p em{color:red;}/*p标签中的em*/
#con em{color:red;}/*id为con的标签中的em*/
p.p1 a em{color:red;}/*class为p1的p标签中的a标签中的em*/

7、子选择器

大于符号(>),用于选择指定标签元素的第一代子元素。如下：

.food > li{border:1px solid red;}

子元素选择器：只能选择自己的儿子：

<div>
 <p>This is <strong>very</strong> important</p>    //此处p是div的儿子
</div>

<div>
 <em><p>This is <strong>very</strong> important</p></em>   //此处p不是div的儿子
</div>

注意子选择器和后代选择器的区别：

• 子元素选择器：只能选择自己的儿子；
• 后代选择器：只要是自己的后代，都能选定

8、伪类选择器

伪类选择器定义特殊状态下的样式；
无法用标签、id、class及其他属性实现。

• 链接伪类

链接中的四种状态：激活状态、已访问状态、未访问状态、鼠标悬停状态。

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

*注1：当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

*注2：text-decoration 属性主要用于删除链接中的下划线：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

9、:nth-child() 选择器

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。
第一个子元素可以写成 :first-child
比如：
（1）规定属于其父元素的第二个子元素的每个 p 的背景色：

p:nth-child(2)
{
background:#ff0000;
}

（2）Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
在这里，我们为奇数和偶数 p 元素指定两种不同的背景色：

p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}

（3）使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

p:nth-child(3n+0)
{
background:#ff0000;
}