`

css复合选择器、继承、层叠

    博客分类：
  • Css
css 
阅读更多
1. css复合选择器

1) "交集"选择器 

<style type="text/css">
    p{ font-size: 30px; }
    p.c{ text-decoration: underline; }
    .c{ color: blue;}
</style>
</head>
<body>
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3" class="c">p3</p>
<h1 id="h1" class="c">h1</h1>
<h2 id="h2">h2</h2>
<div id="d1">d1</div>
</body>


2) "并集"选择器 

<style type="text/css">
    p{ font-size: 30px; }
    p.c{ text-decoration: underline; }
    .c{ color: blue; }
    p,h1,.c,#d1{ background-color: gray; }
</style>
</head>
<body>
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3" class="c">p3</p>
<h1 id="h1" class="c">h1</h1>
<h2 id="h2">h2</h2>
<div id="d1">d1</div>
</body>


3) "后代"选择器 

<style type="text/css">
    span{ color: blue; }
    p span{ color: red; }
</style>
</head>
<body>
<div>一代<p>二代<span>三代</span></p></div><br/>
<span>一层一代</span><br/>
<span>也是一层一代</span><br/>
</body>


4) "子"选择器 

<style type="text/css">
    div>span{ color: pink; }
</style>
</head>
<body>
<div>
    <span>儿子</span>
    <p><span>孙子</span></p>
</div>
</body>


2. css的继承特性 

<style type="text/css">
    .c{ color: red; }
</style>
</head>
<body>
<h1>Java技术</h1>
<ul>
    <li class="c">网页基础
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>动态网页</li>
    <li>J2EE框架</li>
</ul>
</body>


3. css的层叠特性 

<style type="text/css">
    p{ color: blue; }
    .red{ color: red; }
    #p3{ color: green; }
</style>
</head>
<body>
<p>第一行文本</p>
<p class="red">第二行文本</p>
<p class="red" id="p3">第三行文本</p>
<p style="color: orange;" class="red" id="p3">第四行文本</p>
</body>
分享到：
| css网页
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css基础、选择器介绍、样式介绍

    选择器进阶：复合选择器、并集选择器、交集选择器 、hover伪类选择器； 背景相关属性：颜色、图片等； 元素显示模式：块级元素、行内元素、行内块元素； CSS三大特性：继承性、层叠性、优先级； 盒子模型：内容、...

    第四章 CSS选择器.pdf

    【基本CSS选择器】包括简单选择器和复合选择器。简单选择器又分为标记选择器、类选择器和ID选择器： 1. **标记选择器**：基于HTML或XML文档中的标签名，如`&lt;p&gt;`、`&lt;h1&gt;`等。标记选择器允许开发者为特定的标签定义...

    HTML5&CSS3网页制作：CSS层叠性.pptx

    在计算复合选择器权重时，需要将每个基础选择器的权重相加。例如，`.father .blue`的权重是10（类选择器`.father`）+ 10（类选择器`.blue`）= 20。 了解了这些基本概念后，我们可以更好地管理CSS样式，避免样式冲突...

    第四章 CSS选择器.docx

    选择器分为简单选择器和复合选择器。 **4.2.1 简单选择器** 1. **标记选择器**：利用HTML标签来定位元素，如`p`代表段落。例如： ```css p { font-size: 18px; font-style: italic; } ``` 这将使页面中所有...

    CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性

    复合选择器是指使用空格将多个选择器连接起来，从而选择父元素中的后代元素。其语法为：选择器1 选择器2 { css }。结果是，在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式...

    CSS快速掌握，自学版

    该资源摘要信息涵盖了CSS的基本概念、语法规则、基本选择器、尺寸样式属性、文本属性、字体属性、复合元素选择器、列表样式属性、伪类选择器、属性选择器等多个方面的知识点，是一本非常实用的CSS自学笔记。

    第3章使用CSS技术美化网页-教学设计.pdf

    在接下来的课时中，教师将继续深入讲解CSS的相关内容，包括复合选择器的使用，如后代选择器、子元素选择器、相邻兄弟选择器等，这些复合选择器能让开发者更精确地定位和控制网页元素。同时，教师会介绍CSS的层叠性、...

    css教程（附案例）免费下载

    在教程中，还详细介绍了CSS复合选择器、继承性、层叠性以及如何控制文本和超链接文字的样式。这些都是构建现代网页必不可少的知识点。 最后，综合实例部分，通过分析如百度搜索结果页、搜狐教育频道内容页等实际...

    《CSS设计彻底研究》光盘源码

    　1.4　复合选择器　 　1.4.1　“交集”选择器　 　1.4.2　“并集”选择器　 　1.4.3　后代选择器　 　1.5　CSS的继承特性　 　1.5.1　继承关系　 　1.5.2　CSS继承的运用　 　1.6　CSS的层叠特性　 1.7　本章小结　...

    农产品网页美化-CSS高级特性.pptx

    例如，复合选择器的权重是其组成的基础选择器权重的叠加，但并非简单的加法。例如，`p.father .blue`这个选择器的权重是1（`p`标签选择器）+10（`.father`类选择器）+10（`.blue`类选择器）=21。 理解并熟练掌握CSS...

    第3章使用CSS技术美化网页-教学设计.docx

    3. **CSS复合选择器**：通过组合使用不同的基础选择器（标记选择器、类选择器、ID选择器和通配符选择器），可以更精确地选择和操作页面中的元素。例如，`h1.title`会选择所有`class`为`title`的`h1`元素。 4. **CSS...

    css设计彻底研究 源代码

    1.3.2　类别选择器　1.3.3　ID选择器　1.4　复合选择器　1.4.1　“交集”选择器　1.4.2　“并集”选择器　1.4.3　后代选择器　1.5　CSS的继承特性　1.5.1　继承关系　1.5.2　CSS继承的运用　1.6　CSS的层叠特性　1.7...

    CSS3知识体系思维导图（手工整理）

    CSS3知识体系思维导图 ...* 权重叠加计算：使用场景：复合选择器。 CSS3知识体系思维导图旨在帮助开发者对CSS3的知识体系有更清晰的认知，掌握CSS3的基础知识和高级知识，可以更好地应用于Web开发中。

    css第03天.pdf

    权重可以叠加，复合选择器的权重是各部分权重之和。 接下来是CSS的盒子模型，它是网页布局的基础。网页布局的本质是将HTML元素视为可放置和调整的“盒子”。盒子模型由边框、外边距、内边距和实际内容四部分组成。...

    java程序员应该掌握的css

    了解通配符选择器（*）、后代选择器（空格）、子元素选择器（&gt;）、相邻兄弟选择器（+）和后续兄弟选择器（~）等复合选择器。 3. **盒模型**：理解CSS盒模型，包括内容(content)、内边距(padding)、边框(border)和...

    CSS初级学习手册.pdf

    5. CSS复合选择器 包括后代选择器、子元素选择器、并集选择器和伪类选择器。 - 后代选择器：选择所有后代元素，用空格分隔。 - 子元素选择器：只选择直接子元素，用“&gt;”符号分隔。 - 并集选择器：用逗号分隔，选择...

    CSS中文速查手册，非常好用

    复合选择器如`h1, p`可同时选择多个元素类型。 2. **属性与值**：每个CSS声明都包含一个属性和对应的值，如`color: red;`表示设置文本颜色为红色。属性和值之间用冒号分隔，每条声明以分号结束。 3. **层叠与继承*...

    CSS权威指南 第三版 中文

    6. 复合选择器：结合多种选择器，如`h1+p`选择紧随`h1`后的`p`元素。 三、声明与属性 声明由属性和值组成，用冒号分隔，如`color: red;`。属性定义样式类型，值则定义具体样式。CSS包含各种属性，如字体、颜色、...

    《HTML+CSS+JavaScript网页制作案例教程》_教学大纲.docx

    - 内容涵盖CSS样式规则、引入样式表、基础选择器、字体样式、复合选择器、层叠性和继承性等。 - 重点在于CSS的使用，包括复合选择器、层叠性和优先级的理解和应用。 - 学生需要掌握CSS样式规则，控制文本和元素的...

Magicbox
Global site tag (gtag.js) - Google Analytics