css复合选择器

最新推荐文章于 2024-03-07 00:02:51 发布

Zoe Din

最新推荐文章于 2024-03-07 00:02:51 发布

阅读量168

点赞数

分类专栏： Web前段学习笔记

本文链接：https://blog.csdn.net/naturly/article/details/104139820

版权

Web前段学习笔记专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1、后代选择器（包含选择器）用空格重要

后代选择器可以选择作为某元素后代的元素。

h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：

2、子元素选择器子选择器使用了大于号（子结合符）。

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

子元素指亲儿子。不包括孙子、重孙子

4这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is

<strong>very</strong> important

.</h1>

<h1>This is

<em>really

</em> important

.</h1>

3、交集选择器用点隔开

<!--交集选择器如：让p 这个red变成红色

交集选择器既是p标签又是. red类选择器的关系-->

p.red{

color: red;

}

4、并集选择器用逗号隔开，逗号理解为和的意思重要

h3,

span{

color: red;

}

<!-- 并集选择器

如：要求h3 与span中的颜色都为红色

-->

5、链接伪类选择器冒号表示重要

类选择器 .demo{}

伪类选择器：link{}

锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */

写代码时按此顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        .nav a{
            color: yellow;
        }
        .cat ul li{
            color: red;
        }
        p.red{
            color: red;
        }
        h1>strong{
            color: aqua;
        }
        h3,
        span{
            color: red;
        }
    </style>
</head>
<body>

<div class="nav">
    <a href="#">内部链接</a>
    <a href="#">内部链接</a>
    <a href="#">内部链接</a>
</div>
    <a href="#">外部链接</a>
    <a href="#">外部链接</a>
    <a href="#">外部链接</a>
<ul>
    <li>dog</li>
    <li>dog</li>
    <li>dog</li>
</ul>
<div class="cat">
    <ul>
        <li>cat</li>
        <li>cat</li>
        <li>cat</li>
    </ul>
</div>
<!--交集选择器  如：让p 这个red变成红色
     交集选择器   既是p标签又是. red类选择器的关系-->
<p class="red">red</p>
<p class="red">red</p>
<div class="red">red</div>
<div class="red">red</div>
<p class="blue">blue</p>
<!--子选择器-->
<h1>This is
    <strong>very</strong>
    <strong>very</strong> important .</h1>

<h1>
    This is
    <em>really
        <strong>very</strong>
    </em> important .
</h1>

<!--    并集选择器
如：要求h3 与span中的颜色都为红色
-->

    <h3>my</h3>
    <h3>my</h3>
    <span>you</span>
    <span>you</span>

</body>
</html>

Zoe Din

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css复合选择器

1、后代选择器（包含选择器）用空格重要后代选择器可以选择作为某元素后代的元素。h1 em {color:red;}上面这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中：2、子元素选择器子选择器使用了大于号（子结合符）。与后代选择器相比，子元素选择器（Child selectors）只能选...
复制链接

扫一扫

专栏目录