CSS样式选择器分类（0）

来源：互联网发布：2016年交通事故数据编辑：程序博客网时间：2024/06/05 16:54

一.标记选择器

每一种HTML标记的名称都可以作为相应的标记选择器的名称

例如：

HTML例子：

<p>CSS使用规则/p>

CSS例子:

p{    font-size: 19px;    color: red;}

二.类别选择器

CSS中class定义是以 .类别名开始的

HTML例子：

<div class="p">CSS使用规则</div>

CSS例子:

.p {    font-size: 24px;    color: green;}

三.ID选择器

3.1在标签中直接定义ID选择器

CSS中ID定义是以 #ID名开始的

HTML例子：

<div id="p">CSS使用规则</div>

CSS例子:

#p {    font-size: 24px;    color: green;}

3.2优先级问题

3.2.1同时使用了class选择器和ID选择器的时候

ID选择器>类别选择器>标记选择器

3.2.2若一个CSS样式中有两个对于同一标签的定义

对于嵌入式样式：越靠近HTML的优先级越高

对于引入式样式：越靠近CSS样式页面下方优先级越高

例如：

<div class="p">CSS使用规则</div>

.p{    font-size: 24px;    color: chartreuse;}.p{    font-size: 24px;    color: red;}

四.复合选择器

4.1交集选择器

“交集”复合选择器由两个选择器直接连接构成，其结果是选中两者各自元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写，形式如图：

div.special{....}div#special{ .....}

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        p{            color: blue;        }        p.special{            color: red;        }        .special{            color: green ;        }    </style></head><body><p>普通文本段落</p><h3>普通标题段落</h3><p class="special">    制定了.special类别的段落文本</p><h3 class="special">制定了.special类别的段落文本</h3></body></html>

4.2并集选择器

任何标签都可以组合使用选择器，CSS样式中以“，”隔开

例如：

<div class="p">    <h1>CSS使用规则</h1>    <h2>CSS使用规则</h2>    <h3>CSS使用规则</h3>    <h4>CSS使用规则</h4></div><p>css使用规则</p>

h1,h2,h3,h4,p{    color: red;}

4.3后代选择器

后代选择器的写法就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记发生嵌套时，内层的标记就成为外层标记的后代。

1.类别选择器的嵌套：

例子1：如何定义在 <div class="p">中定义标签p

HTML例子：

<div class="p">    <p >你还好吗</p>    CSS使用规则 CSS使用规则 CSS使用规则</div>

CSS例子：

.p p{    font-size: 24px;    color: blue;}

例子2：如何定义在 <div class="p">中定义标签<p class="pp">

HTML例子：

<div class="p">    <p class="pp">CSS使用规则</p></div>

CSS例子：

.p .pp{    font-size: 24px;    color: yellow;}

2.ID选择器的嵌套

例子1：如何定义在 <div id="p">中定义标签p

HTML例子：

<div id="p">    <p>你还好吗</p>    CSS使用规则 CSS使用规则 CSS使用规则</div>

CSS例子：

#p p{    font-size: 24px;    color: blue;}

例子2：如何定义在 <div class="p">中定义标签<p class="pp">

HTML例子：

<div id="p">    <p class="pp">CSS使用规则</p></div>

CSS例子：

#p #pp{    font-size: 24px;    color: yellow;}

注意：

后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的“各级后代”

例如：

<p>这是最外层的文字，<span>这是中间层的文字，<b>这是最内层的文字</b></span></p>

p span {           color:blue;       }

4.4子选择器

“子选择器”对直接后代有影响，而对于“孙子”以及多个层的后代不产生作用。

子选择器和后代选择器的区别就是，使用大于号链接。

例如：

<p>这是最外层的文字，<span>这是中间层的文字，<b>这是最内层的文字</b></span></p>

p>span {           color:blue;       }

IE6不支持子选择器，仅支持后代选择器。IE7和Firefox既支持后代选择器又支持子选择器。

五.伪元素选择器

在链接中使用

5.1 link链接

正常的链接样式

例如：

<a href="www.baidu.com" target="_blank">百度</a>

a:link{    color: green;}

5.2 hover链接

鼠标放上去的样式

5.3 active链接

选择链接时的样式

5.4 visited链接

已经访问过的链接的样式

0 0