后代选择器集中形式： 1.父代 * {}从 父代 中的找到 所有子代。 2.父代 子代1{} 是从 父代 中找到 子代1 或者 父代 子代2{} 是从 父代 中找到 子代2 。...3.父代 子代1 子代2{} 这个是从 父代 中找到子代1，再从 子代1 找到 子代2. 第一种形式：虽然是全部选中但是*的优先级较低。 <!...padding: 20px; background: rgba(255,0,0,0.2); //这是给它一个红色，透明度为0.2 } .a *{ border: 2px solid black; //这里是选中类
" href="style.css" /> @import url('styles.css'); 二、CSS 选择器 1...、CSS 基础选择器 CSS 选择器 : 标签选择器 ( 推荐使用 ) : 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签...color: blue; } ; 使用该 选择器 会降低 页面的 打开速度 , 如果没有特殊情况 , 不推荐使用 ; 2、CSS 复合选择器 后代选择器 后代选择器 可以选择 子元素 , 孙子元素..., 不限制选择层数深度 ; 后代选择器 可用于 选择 基础选择器选择出的元素组 中的 另外基础选择器选择出的元素组 ; 后代选择器 语法 : 父选择器 和 子选择器 都是 CSS 基础选择器 , 父选择器...写在后面 , 两个选择器之间使用 > 大于号隔开 ; 父选择器>子选择器 { 属性名称1:属性值1; } 交集选择器 交集选择器 由 两个 基础选择器 组成 , 目的是 选择出 同时满足 两个 基础选择器
在前端工程师的日常工作中，使用 CSS 元素选择器是稀松平常的事；无论你是编写一般的 CSS 还是需要经过编译的 SASS，SCSS，LESS等，最终都被编译成一行一行的 CSS 样式属性，最终交给浏览器解析并套用...>p，最后套用，但实际上浏览器解析 CSS 的顺序是由右到左的 p>h4>.class>＃id。...important 的样式属性 你可能会好奇：为什么 inline style 和开发者定义的 CSS 会被另外处理？...，以及前面讨论到的 CSS 运算过程，编写 CSS 时也有几个地方可以稍微留心一下： 由于样式规则的目标属性会分组存放，id 选择器效率非常高，所以是不能与其他条件混用的。...延伸 认识了 CSS 选择器之后，你一定会很好奇，JavaScript 的元素选择器又是怎么回事呢？
文章目录 一、 ID 选择器 1、简介 2、代码示例 二、通配符选择器 1、简介 2、代码示例 三、CSS 选择器使用注意事项 一、 ID 选择器 ---- 1、简介 ID 选择器 使用 " #...id " 选择 指定的 某一个 标签 , 使用 ID 选择器 步骤如下 : 首先 , 在 HTML 中 设置 标签的 ID ; 标签内容 然后 , 在 CSS 样式中使用...ID 选择器 ; #name { color: blue; font-size:20px; } 在一个 HTML 页面中 , 标签的 ID 是唯一的 , 不允许重复 ; *..." id="green">l e 运行效果 : 三、CSS...选择器使用注意事项 ---- CSS 选择器使用注意事项 : 尽量不使用 ID 选择器 ; 尽量不使用 通配符选择器 ; 使用标签选择器时 , 尽量不对 无意义的标签 进行选择 , 如 div , span
文章目录 一、CSS 选择器作用 二、CSS 选择器分类 三、标签选择器 1、简介 2、代码示例 四、类选择器 1、简介 2、类名规范 3、代码示例 4、div 与 span 标签 ① span...标签 ② div 标签 5、多类名选择器 一、CSS 选择器作用 ---- CSS 作用 : 以下面的代码为例 , 先通过 选择器 h3 将 HTML 中的 h3 标签类型选择出来 , 然后为这些标签设置...选择器分类 ---- CSS 选择器 主要分为 : 基础选择器 复合选择器 两种类型 ; CSS 基础选择器 主要分为以下几类 : 标签选择器 类选择器 id 选择器 通配符选择器 三、标签选择器 --...-- 1、简介 标签选择器 是 使用 HTML 标签作为选择器 , 如果 HTML 引入了使用 标签选择器的 CSS 样式 , 那么该 HTML 中的 所有的指定标签 , 都使用该 CSS 样式 ; 标签选择器...1、简介 CSS 类选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ; CSS 类选择器 使用方式如下 : 首先 , 在标签中的 class 属性中设置类名 ;
07.29自我总结 css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布局 二.CSS的三种引入方式 1....内联式 书写位置:在 head标签内定义一个stype标签内 CSS语法:css选择器{样式1;样式2} 优缺点:可读性强，有复用性，样式被html页面绑定了，不能提供给其它html页面使用 2....外联式 书写位置:在外部css文件中，在html文件中通过link标签引入css文件 CCS文件内CSS语法:css选择器{样式1;样式2} HTML文件中导入CSS文件语法:<link rel="stylesheet...三种方式的优先级别 内联与外联之间没有优先级区别，由于html属于解释性语言，书写在下方的会覆盖上方的样式 行间式的优先级要高于一切 三.<em>CSS</em><em>选择器</em> 统配<em>选择器</em> * { 样式1; } 标签<em>选择器</em> 标签名 { 样式1; } 类<em>选择器</em> .类名{ 样式1; } <!
CSS选择器的一些使用总结 CSS 选择器参考手册 CSS3 选择器——基本选择器 CSS3 选择器——属性选择器 CSS3 选择器——伪类选择器 CSS ::Selection 使用CSS选择器在页面中插入内容
; } ``` 属性选择器 E[att^=value] E[att^=value]属性选择器是指选择名称为E的标记，且该标记定义了att属性,att属性值包含前缀为value的子字符串...需要注意的是E是可以省略的，如果省略则表示可以匹配满足条件的任意元素。...为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是first-child选择器和:last-child选择器的扩展。...TIM图片20200308154954.png CSS浮动与定位 在一个网页中，默认情况下块级元素独占一行，是自上而下排列，行内元素自左向右排列，但是在实际的网页布局中往往需要改变这种单调的排列方式...•CSS浮动 –CSS的浮动可以通过float属性进行设置，默认值为none（不浮动）。
1. css 选择器的定义css 选择器是用来选择标签的，选出来以后给标签加样式。2. css 选择器的种类标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器3....类选择器根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。...="#" class="gold">谷歌你好新浪注意点: 这个层级关系不一定是父子关系，也有可能是祖孙关系...-- 无法应用以上样式，每个标签只能有唯一的id名 -->注意点: 虽然给其它标签设置id=“box”也可以设置样式，但是不推荐这样做，因为id是唯一的，以后js通过id只能获取一个唯一的标签对象。...小结css 选择器就是用来选择标签设置样式的常用的 css 选择器有六种，分别是:标签选择器类选择器层级选择器(后代选择器)id选择器组选择器伪类选择器
CSS样式 1.内联式CSS样式表：把CSS代码直接写在现有HTML标签中 (1)这里是红色的字 (2)这里是红色的12像素的字 2.嵌入式CSS样式表：把CSS代码写在<style type="text/<em>css</em>"..." type="text/<em>css</em>"是固定写法不可修改 3.... ID选择器类似类选择器,区别在于 1.为标签设置id="ID名称",而不是class="类名称" 2.ID选择符的前面是...而后代选择器是作用于所有子后代元素。
下述内容主要讲述了《HTML5权威指南》第17、18章关于“使用CSS选择器（第I部分、第II部分）”。 一、前传 1....CSS标准化 在模块定义不太稳定的阶段，浏览器会采用厂商前缀实现某个特性。它允许早起采纳者试用浏览器实现的新属性。...盒模型 CSS盒模型包括外边距、边框、内边距、内容四部分组成。 ? 元素盒子有两个部分是可见的：内容和边框。 元素还可以包含其他元素。...使用CSS计数器 示例：对指定内容使用计数器 <!...center; } .content:first-child { margin-right: 10px; } /*偶数 针对所有子元素进行计算 container所有子元素中偶数位上且是h2
前言 本文将介绍基本的CSS选择器使用方 CSS选择器 CSS选择器主要可以分为两大类： 基础标签器 复合选择器 除了基于HTML标签的属性选择元素，还有一些特殊的选择器： 伪类选择器 伪元素选择器 下面来逐一介绍...复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。...伪元素是指元素当中的某一个位置。...伪元素选择器可以选择一个位置的元素或者是位置的相对空间 e::first-letter e::first-line e::before e::after 可以选择元素的第一个字符 格式： e::first-letter...CSS不仅可以静态地修饰网页， 还可以配合各种脚本语言动态地对网页各元素进行格式化。
良药苦口利于病，忠言逆耳利于行——佚名 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:is is选择器可以同时包含多个，例如 /*
全部标签选择器，例如：选中所有的div加样式 id选择器，例如：选中id叫做div1的标签标签加样式 class选择器，例如：选中id叫做div1的标签标签加样式 >选择器...： 表示只选择当前标签的下一级标签 例如 ul>li{} 空格选择器：表示选中当前标签下所有标签 例如 ul li{} ,选择器：表示，前后的标签全被选中 例如 .myClass,#myId ,ul
父选择器 选择出的元素的 亲儿子 元素 中选择 , 孙子元素 和 重孙子元素 选择不到 ; CSS 基础选择器 : 标签选择器 类选择器 ID 选择器 通配符选择器 2、代码分析 在下面的代码中 ,...div > label { color: blue; } 父选择器是 div , 这是标签选择器 , 选择出了 div 标签 , 在 div 标签的字标签中 , 选择 label 标签 , 下面的标签中...下面的标签中 , div 标签 的 字标签 是 p 标签 , 没有 label 标签 , 因此 没有可选择的元素 , 孙子标签不在子元素选择器范围之内 ; div...---- 1、语法说明 交集选择器 由 两个 基础选择器 组成 , 目的是 选择出 同时满足 两个 基础选择器 要求的标签 ; 交集选择器语法 : 两个基础选择器之间没有空格 ; 基础选择器1基础选择器...2 { 属性名称1:属性值1; 属性名称2:属性值2; 属性名称3:属性值3; } CSS 基础选择器 : 标签选择器 类选择器 ID 选择器 通配符选择器 2、代码示例 下面是 交集选择器 ,
CSS 选择器 1....样式是由权重的，上面的权重都相同，所以 a:hover 的样式会覆盖掉前面的 a:active 的样式，因为链接被激活时，鼠标也是悬停在链接上方的，所以效果是什么样，就看谁没有被覆盖了。...:nth-of-type()选择器 用法和:nth-child()选择器类似。 不同的是：:nth-of-type()选择器是把要选择的元素按先后顺序排序。...:first-of-type 选择器 和:nth-of-type(1)用法一样 参考链接: MDN Web Docs (mozilla.org) CSS 选择器：伪类（图文详解） - 千古壹号 - 博客园...(cnblogs.com) CSS 的四种基本选择器和四种高级选择器Jack-CSDN 博客高级选择器
CSS选择器 使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。...id选择器 id选择器 #s1 { color: red; } ...font-style:italic; } 标签选择器 标签选择器1 标签选择器2 ...type="text/css"> /* 后代选择器会选择全部后代 */ .s8 div{ color: #7CFC00; } 通配符选择器 通配符选择器 通配符选择器 .s9 * {
选择器详解 1.通配符选择器 *{...} 2.标记选择器 标记名称{...} 3.class选择器 .class值{...} ...4.id选择器 作用 匹配指定id的样式 语法 #id值{...} 5.群组选择器 定义一组选择器的样式... 语法 选择器1,选择器2{...} 6.后代选择器 根据元素出现的位置关系来匹配 语法 选择器1...说明：至少是父子关系 7.子代选择器 说明：必须是父子关系 语法 选择器1>选择器2{...} 8.伪类选择器 1...选择器:hover 代表鼠标划过的样式 选择器:active 代表鼠标激活的样式 选择器:focus 代表获取焦点的状态 a:link
类型选择器，是对 HTML 标签中的 class 属性进行选择。CSS 类选择器的选择符是 “.”。 <!...通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。 <!...，由两个选择器构成，其中第一个必须是标签选择器，第二个为 class 选择器或 id 选择器。...并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class 类选择器、id 选择器等），都可以作为并集选择器的一部分。...而最终什么选择器在层叠中胜出遵循下列规则。 !important 具有最大优先级。也就是说任何情况下，只要定义了它,它的样式最终就会被应用。 <!
目录 W3C自1996年12月发布第一个CSS正式推荐版CSS 1.0以来，一直在对CSS标准进行修订、升级。...1999年1月，CSS 2.0 正式推荐版发布，增加了对其它媒体（打印机、视觉设备）、可下载字体、元素定位和表格的支持。最新版本的CSS标准CSS 3.0已经发部，就是HTML5里面的主要东西。...有了CSS，我们不再需要用font标记或者透明的1 px GIF图片来控制标题，改变字体颜色、字体样式等等。 5.CSS非常容易编写。我们可以象写HTML代码一样轻松地编写CSS。...二，学习要点 1，Css是什么？有什么优势？（css：cascade style sheet） 2，怎么样引用css文件、css样式？...3， Css选择器（如果对ajax感兴趣的话，可以了解） 4，和美工有沟通
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
