`

基本CSS选择器

CSS 
阅读更多
基本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;}
分享到:
评论

相关推荐

    CSS基本选择器实用PPT学习教案.pptx

    CSS 基本选择器实用学习教案 本学习教案主要介绍了 CSS 基本选择器的概念、语法和应用,旨在帮助学生掌握基本的 CSS 选择器,并实践于个人主页项目中。 一、CSS 概念和语法 CSS(Cascading Style Sheets)是用来...

    CSS选择器.pdf

    在CSS选择器的体系中,存在多种不同类型的选择器,每种都有其特定的用途和使用场景。 首先,元素选择符是最基本的类型,包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示,可以选中...

    CSS基本选择器实用PPT课件.pptx

    CSS 基本选择器 本资源摘要信息将着重介绍 CSS 基本选择器的概念、语法和应用,旨在帮助学习者快速掌握 CSS 基本选择器的使用和应用。 一、CSS 概念和语法 CSS 全称为 Cascading Style Sheet,即层叠样式表。它的...

    第四章 CSS选择器.docx

    **4.2 基本CSS选择器** CSS选择器是定位网页元素的关键,用于精确地选择需要设置样式的元素。选择器分为简单选择器和复合选择器。 **4.2.1 简单选择器** 1. **标记选择器**:利用HTML标签来定位元素,如`p`代表...

    第四章 CSS选择器.pdf

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

    CSS基本选择器资料实用PPT学习教案.pptx

    基本CSS选择器详解 ##### 5.1 标记选择器 - **定义**:针对HTML中的特定标记,如`&lt;p&gt;`、`&lt;h1&gt;`等。 - **示例**:`p { font-family: "宋体"; }`,表示所有`&lt;p&gt;`元素的文字都将使用宋体。 ##### 5.2 类别选择器 -...

    CSS选择器-.pdf

    CSS 选择器是 CSS 中最基本的概念之一,用于选择 HTML 元素并应用样式。 CSS 元素选择器是最常见的选择器,用于选择 HTML 文档中的元素,例如 p、h1、em、a 等。 根据 W3C 标准,元素选择器又称为类型选择器(type ...

    前端必须掌握的css选择器方法

    通用元素选择器*是选择页面上的全部元素,上面的代码作用是把全部元素的 margin 和 padding 设为 0,最基本的清除默认 CSS 样式。*选择器也可以应用到子选择器中,例如下面的代码: #container * { border: 1px ...

    python爬虫之css选择器

    通过本文的学习,相信读者已经掌握了CSS选择器的基本概念及其在Python爬虫中的应用方法。CSS选择器作为一种强大的工具,可以帮助我们在复杂的HTML结构中准确地定位到所需的元素。在实际开发过程中,合理地运用这些...

    CSS选择器详细介绍

    常用选择器是 CSS 选择器中最基本的选择器,包括三种类型:ID 选择器、类选择器和标签选择器。 * ID 选择器:根据元素的 ID 来选择元素,例如 `#demoDiv{color:#FF0000;}`。在 HTML 中,元素可以定义一个 ID 属性,...

    30个最常用css选择器解析

    "CSS选择器详解" CSS选择器是CSS样式语言中最基本的组成部分,它们定义了样式应用于...CSS选择器是CSS样式语言中最基本的组成部分,每种选择器都有其优点和缺点,选择合适的选择器可以提高CSS代码的效率和可维护性。

    CSS选择器和jQuery选择器

    ### CSS选择器与jQuery选择器详解 #### 一、引言 在现代Web开发中,选择器扮演着至关重要的角色。无论是对HTML元素应用样式还是对其进行动态操作,选择器都是必不可少的工具。本文将深入探讨两种常用的选择器——...

    利用css+javascript实现的一个日期选择器代码

    【标题】:“利用css+javascript实现的一个日期选择器代码”涉及的核心知识点主要集中在CSS样式设计和JavaScript编程上,用于创建一个交互式的日期选择组件。日期选择器是网页表单中常见的一种元素,允许用户方便地...

    基本的CSS选择器类型

    css选择器

    CSS属性选择器详解.pdf

    CSS属性选择器详解 CSS中的属性选择器是一种强大的选择器,允许开发者根据HTML元素的属性值来选择元素。今天,我们将深入探讨CSS属性选择器的详细解释。 什么是CSS属性选择器? --------------------- CSS属性...

    css选择器介绍

    首先,我们要了解CSS选择器的基本分类: 1. **类型选择器**:基于元素的标签名进行选择,如`h1`,`p`等。 2. **类选择器**:使用`.`前缀,匹配class属性值,如`.myClass`。 3. **ID选择器**:使用`#`前缀,匹配id...

    HTML5&CSS3网页制作:CSS基础选择器.pptx

    **CSS选择器**是CSS中的基本概念,它们是用于选取HTML文档中特定元素的工具。选择器使得我们可以精确地定位到网页上的某个或某些元素,并为其设定样式。下面,我们将详细讨论四种基础选择器: 1. **标签选择器**:...

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

     1.3 基本CSS选择器   1.3.1 标记选择器   1.3.2 类别选择器   1.3.3 ID选择器   1.4 复合选择器   1.4.1 “交集”选择器   1.4.2 “并集”选择器   1.4.3 后代选择器   1.5 CSS的继承...

    CSS选择器.docx

    以下是对CSS选择器的详细介绍: 一、基本选择器 通用选择器(*): 匹配HTML或XML文档中的所有元素。 例如:* { margin: 0; padding: 0; } 将所有元素的外边距和内边距设置为0。 元素(标签)选择器(E): 通过...

Global site tag (gtag.js) - Google Analytics