`

基本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设计彻底研究》光盘源码

     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设计彻底研究 源代码

     1.1 HTML与XHTML 1.1.1 追根溯源 1.1.2 DOCTYPE(文档类型)的含义与选择 1.1.3 XHTML与HTML的重要区别 1.2 (X)HTML与CSS 1.2.1 CSS标准简介 1.2.2 在HTML中引入CSS的方法 1.3 基本CSS选择器 ...

    CSS选择器鱼骨图记忆

    介绍CSS选择器,包含基本选择器,复合选择器,属性选择器,关系选择器,伪类选择器和伪元素选择器,首先以鱼骨图展示方便记忆

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

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

    《CSS设计彻底研究》【中文PDF+源代码】

    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的继承特性 1.5.1 继承关系 ...

    css选择器的一些基本使用和用法

    css选择器的一些基本使用和用法

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

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

    CSS3 选择器 基本选择器介绍

    我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器;第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器,这一部分也是最难理解和掌握的部分,今天我们先来看第一部分——...

    css选择器和基本样式

    基本样式和选择器(权重优先级)以及复合选择器

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

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

    jquery CSS选择器笔记

    今天的笔记中包括44个选择器,基本涵盖了CSS 2和CSS 3的所有规定。 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class...

    CSS的基本选择器.pdf

    CSS的基本选择器.pdf 学习资料 复习资料 教学资源

    CSS3选择器

    基本涵盖了CSS 2和CSS 3的所有规定。

    CSS选择器

    一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 选择指定ID属性值为“id”的任意类型的元素 .class 类选择器 选择...

    微信小程序 CSS 选择器::after和::before的简单使用

    前两天看文档看到选择器那块儿的时候,前面4个基本都能理解:.class,#id,element,element, element,但后面两个::after和::before(文档中说,分别表示在view 组件的后面和前面插入内容),表示有点没有理解。...

    css选择器(selector) xPath的选择器

    去年我学jQuery的时候,曾经做过一点选择器(selector)的笔记...CSS选择器笔记 一、基本选择器 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info cl

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

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

    你不可不知的CSS选择器

    一、五大基本选择符 ...2. #X(ID)#+id名,这是日常常用的css选择器,用于匹配id为XXX的元素,id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10),作为javascript脚本钩子的不二选择,

Global site tag (gtag.js) - Google Analytics