CSS样式选择器分类（0）

最新推荐文章于 2024-07-22 21:15:15 发布

ruthy-wei

最新推荐文章于 2024-07-22 21:15:15 发布

阅读量489

点赞数

分类专栏： CSS框架

本文链接：https://blog.csdn.net/ruthywei/article/details/71081067

版权

CSS框架专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.标记选择器

每一种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链接

已经访问过的链接的样式

ruthy-wei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录