`

css 选择器 复合 后代

 
阅读更多

基本CSS选择器有标记选择器、类别选择器、ID选择器3种
1。标记选择器
    每一种HTML标记的名称都可以作为相应的标记选择器的名称,如h1,p,等等
2。类别选择器
    类别选择器的名称可以由用户自定义
   格式如下:.class{color:green;font-size:20px;}
3。ID选择器
    与类别选择器相试
   格式如下:#id{color:green;font-size:20px;}



复合选择器:就是两个或者多个基本选择器,通过不同方式连接而成的选择器
有两种情况:”交集“选择器、“并集”选择器
1。“交集”选择器:由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集,其中第一必须是标记选择器,第二个必须是类别选择器或者ID选择器,两个选择器之间不能有空格,必须连续书写
如:h3.class{color:red;font-size:23px;}

2。“并集”选择器:同时选中各个基本选择器所选择的范围,任何形式的选择器都可以,并集选择器是多个选择器通过逗号连接而成的,
格式如:h1,h2,h3{color:red;font-size:23px;}

后代选择器:
后代选择器书写方法:把外层的标记写在前面,内层的标记写在后面,之间用空格分隔,当标记发生嵌套时,内层的标记就成为外层标记的后代了
举个列子

<html>
<head>
<title>后代选择器</title>
<style type="text/css">
p span
{}{
   color
:red
}

span
{}{
  color
:blue;
}

</style>
</head>
<body>
<p>嵌套<span>用CSS</span>标记的方法</p>嵌套之外的<span>标记</span>不生效
</body>
</html>

效果是:“用CSS”的显示红色,其他用<span>包围起来的是兰色
后代选择器产生的影响不仅限于元素的“直接后代”,而且会影响到它的“各级后代”
子选择器:也就是只有对直接后代有影响的选择器,而对“孙子”以及对个层的后代不产生作用。
格式如下:p>span{color:blue;}

 

http://dibrg.blog.163.com/blog/static/7598463820081022105651649/

 

分享到:
评论

相关推荐

    第四章 CSS选择器.docx

    【CSS选择器详解】 CSS(Cascading Style Sheets)层叠样式表是用于定义文档样式的语言,主要用于控制网页的布局、颜色、字体等视觉效果。CSS的优势在于它弥补了HTML标记属性在样式定义上的局限性,使得网页设计...

    css后代选择器使用方法实例

    1. **复合后代选择器** `.father .child1`:这里,`.father`是父选择器,`.child1`是子选择器。这意味着CSS样式将只应用到`.father`类的元素内部的`.child1`类元素。在这个例子中,`.father`是一个`&lt;div&gt;`元素,而`....

    详尽介绍CSS选择器的应用与分类方法

    探讨了属性选择器、后代、兄弟及交并集复合选择器的特点及实际运用,还阐述了几种常见的伪类如 hover 或 active 和伪元素 before 或 after 的语法及其在增强页面视觉效果方面的具体操作。 适合人群:网页设计师、...

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    1.复合选择器 (1)后代选择器(包含选择器 重要) 语法: 元素1 元素2 {样式声明} 选择器1 选择器2{ 属性:属性值 } 元素1和元素2用空格隔开 元素1父亲 元素2后代 最终改变的是后代(元素2)的样式 ...

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

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

    CSS复合选择器使用介绍

    CSS复合选择器是指一组由两个或两个以上的简单选择器通过特定的组合符连接而成的选择器,它能够选择更加具体和精确的元素。在实际开发中,复合选择器的使用能够帮助开发者更有效地控制页面的样式表现。下面我们来...

    第20章 CSS定义选择器

    子代选择器(`A &gt; B`)选择`A`元素的所有直接子元素`B`,而后代选择器(`A B`或`A B C...`)选择`A`元素下的任何深度的`B`和`C`元素。这些选择器提供了强大的控制,可以在复杂的布局结构中定位特定元素。 属性选择...

    CSS基础入门总结(很详细的哟)

    二、CSS选择器 (1)基础选择器 (i)标签选择器 (ii)类选择器 (iii)id选择器 (iv)通配符选择器 (2)复合选择器 (i)后代选择器 (ii)子代选择器 (iii)并集选择器 (iv)伪类选择器 三、CSS字体属性 (1...

    CSS-day02.pdf

    CSS复合选择器是CSS选择器中的一种,通过组合多个基础选择器,选择更准确、更精细的目标元素标签。下面将详细介绍四种常见的CSS复合选择器:后代选择器、子元素选择器、交集选择器和并集选择器。 1. 后代选择器 ...

    CSS选择器种类、优先级与匹配原理详解

    CSS选择器从基本类型上可以分为三类:标签名选择器、类选择器和ID选择器。 标签名选择器是直接使用HTML标签名作为选择器。比如,`p` 就是一个标签名选择器,它会选择页面中所有的`&lt;p&gt;`元素,并对它们应用相应的样式...

    CSS选择器到底有哪些?CSS笔记(一)

    6. **复合选择器(交集选择器)**:两个选择器之间没有操作符,表示它们同时存在,例如`div p`会选择所有在`div`内的`p`元素。 7. **后代元素选择器**:用空格分隔两个选择器,如`div .content`会选择所有在`div`内...

    CSS学习中EMMET语法、复合选择器、元素选择模式、以及背景的一些总结

    在CSS的学习过程中,掌握EMMET语法、复合选择器、元素选择模式以及背景的设定是非常重要的。下面将分别对这些知识点进行详细的阐述。 首先,EMMET(前身为Zen Coding)是一种高效的HTML和CSS代码编写工具,它能显著...

    CSS-day02.pptx

    CSS复合选择器是CSS选择器的一种,它由两个或多个基础选择器通过不同的方式组合而成的。学习CSS复合选择器的目的是为了可以选择更准确、更精细的目标元素标签。 后代选择器 后代选择器又称为包含选择器。作用:...

    CSS基础知识-2.md

    ### CSS复合选择器详解 #### 一、复合选择器概述 在CSS中,根据选择器的类型可以把选择器大致分为两大类:基础选择器和复合选择器。复合选择器是基于基础选择器之上的一种扩展形式,它通过对基本选择器进行不同...

    别具光芒CSS网页布局案例剖析摘要和经验.pdf

    CSS选择器有基本选择器、类别选择器、ID选择器、复合选择器、交集选择器、并集选择器、后代选择器、子选择器等多种。选择器的优先级为:行内样式&gt;ID样式&gt;类别样式&gt;标记样式。 五、CSS布局设计 在CSS中,可以使用...

    DIV+CSS教案

    紧接着,课程的重点落在了CSS选择器的学习上。学生需要掌握各种基本的CSS选择器,例如标签选择器、ID选择器、类选择器等,这些都是用来定位HTML文档中元素的基本工具。此外,为了实现更加复杂和精细的样式控制,学生...

    前端学习笔记-黑马程序员CSS

    七、CSS 的复合选择器 复合选择器是选择器的组合,用于选择多个标签或元素。 1. 后代选择器:使用空格分隔符选择所有后代元素。 2. 子选择器:使用 `&gt;` 分隔符选择所有子元素。 3. 并集选择器:使用 `,` 分隔符...

    css-知识点简介与梳理

    CSS复合选择器可以指定更具体的选择条件,包括: 1. 交集选择器:同时满足多个条件的选择器。 2. 并集选择器:用逗号分隔,选择满足任一条件的元素。 3. 后代选择器:空格分隔,选择所有匹配元素的后代。 4. 子选择...

    CSS层叠样式表技术参考手册

    - **选择器列表**:提供CSS选择器的完整列表。 - **选择器说明**:解释每个选择器的功能及应用场景。 - **9.3 CSS听觉参考手册** - **听觉属性**:介绍CSS中的听觉相关属性。 - **应用实例**:提供实例代码展示...

    CSS快速掌握,自学版

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

Global site tag (gtag.js) - Google Analytics