http://www.cnblogs.com/2050/p/3569509.html :first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。... 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素； 然后，在css3中又定义了:first-of-type这个选择器，这个跟:first-child有什么区别呢？...p:first-of-type 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个； h1:first-of-type 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个...:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。...同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。 分类: css+html
CSS中两个类选择器写在一起一、CSS层叠样式表设计当中，两个类选择器写在一起，那么如果这两个类选择器之间没有使用英文的“,”隔开，而是使用空格，那么一般表示的是选择第一个类选择器的子元素中类名为第二个类选择器的所有元素...，即这两个类选择器一般是父、子元素（或后代元素）的递进关系，目的是为了更精确地选择到HTML的元素，比如.A .B就可以选择A类中的B类元素，而不是所有的B类元素（A类元素之外可能还有B类元素）。...二、如果这两个类选择器之间有英文“,”隔开，那么这两个类的元素是被同时选择，比如.A, .B就是同时选择A类元素和B类元素，并可以同时这两个元素设置相同的CSS样式。...CSS中两个类选择器写在一起实例代码，及在线编辑器下方的实例中，运行之后，可以将两个类选择器中的空格改成英文的“,”，然后再运行看看二者效果上的区别：这是段落p，不包含子元素...>原文：CSS中两个类选择器写一起是什么意思，可分有逗号和没有免责声明：内容仅供参考。
1.1 CSS的"hello world" 二、CSS选择器及几种引用方式 2.1 id选择器 2.2 class选择器 2.3 几种引用方式 2.3.1 外部引用 2.3.2 内部引用 2.3.3 内联引用...简而言之，就是样式、布局，使html的框架更好看，把html元素定位在自己想要放的位置。...---- 二、CSS选择器及几种引用方式 2.1 id选择器 只能引用一次，给特定的id引用。...代码如下（示例）： #test1{color:red;} id选择器 2.2 class选择器 可以多次引用，多种写法...写法1：.test2{color:blue;} 引用：class=“test2” 写法2：div.test3{color:black} 引用：class=“test3” 只有div元素引用时起效果
CSS伪类允许设置元素的动态状态的样式，例如悬停，活动状态和焦点状态，以及文档树中现有但不能通过使用其他选择器作为目标的元素，而无需添加任何选择器它们的ID或类。 例如，针对第一个或最后一个子元素。...注意： CSS :last-child选择器在Internet Explorer 8和更早版本中不起作用。在Internet Explorer 9及更高版本中支持。...提示： CSS :nth-child(N)选择器在必须选择以特定间隔或模式（例如在偶数或奇数位置等）出现在文档树内的元素的情况下非常有用。...IE8仅在指定a的情况下支持。 三、伪类和CSS类 伪类可以与CSS类结合使用。 在下面的示例中class="red"，带有的链接将显示为红色。 <!...四、总结 本文基于CSS基础，介绍了CSS中的伪类，从什么是伪类，常见的伪类的用法（ first-child，: last-seudo，: nth-child，: lang）最后介绍了伪类可以与CSS
说到网页打印，首先想到的便是@media查询（即网页css），通过使用媒体类型print即可解决实际应用的大多数问题，比如实现只打印网页的某部分内容，调整字体大小、修改布局等使打印出来的纸质文件更简洁明了...这就要使用到css打印样式了，即@page，用来指定页面盒子的各个方面。...当margin设置不起作用时检查打印机是否边距是否设置了默认以外的值。...eg3:避免表格断开 @page{ table{ page-break-after: avoid; } } 注：page-break-after对tr、td不起作用所以当以整体出现的时候要在同一个table...中。
说到网页打印，首先想到的便是@media查询（即网页css），通过使用媒体类型print即可解决实际应用的大多数问题，比如实现只打印网页的某部分内容，调整字体大小、修改布局等使打印出来的纸质文件更简洁明了...这就要使用到css打印样式了，即@page，用来指定页面盒子的各个方面。...当margin设置不起作用时检查打印机是否边距是否设置了默认以外的值。...eg2：设置第一页、奇数页或偶数页样式（以首页为例） @page :first { /*首页设置*/} 注：left、right分别为偶数页、奇数页选择器。...table中。
/author/craig-buckler/[2] 总览 CSS选择器允许你通过类型、属性、位于HTML文档中的位置来选择元素。...在被禁用时，元素不能被激活或获取焦点 :required：指向必填的输入框。...MDN解释：:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同的样式。...任何选择器的语法错误都会破坏所有元素的样式。 像Sass这样的CSS预处理器允许嵌套（这也将出现在原生CSS[6]中）。...:is()选择器与article p具有相同的优先级，但它在样式表的后面，所以文本变成了红色。
交集选择器（连在一起）：.A.B选择自身同时拥有.A和.B两个属性的元素 上面几个规则看着很复杂，其实用的多的就是第一个后代选择器，记住它就行。...通常使React项目使用的是用的是CSS Module，Vue项目使用Scoped标记。 接下来会讲清两种样式隔离的原理，以及使用样式隔离时怎么覆盖组件库的样式。...React的CSS Module 首先来了解一下CSS Module的原理。它的使用很简单，在CSS文件加一个后缀.module，然后当做一个变量引入到JS文件中。... 可以看到，它的原理和CSS Module不太一样，Vue的Scoped会使CSS选择器后加上一个中括号。 这并不是Vue独创的语法，而是属性选择器。....了解了组合选择器的优先级分数累加，以及在实际React、Vue项目用到的样式隔离方案——CSS Module和Scoped的原理，最后是介绍了在样式隔离的情况下，如何使用:global和深度作用选择器做样式覆盖
07.31自我总结 CSS高级选择器 一.伪类选择器 对于之前的类选择器的补充类再定义一个别名 举例 123 其中a为类,a-1为伪类,伪类也是一种类,...他们之间用宫格隔开 我们选择该标签的时候可以.a.a-1,也有.a,也可以.a-1 常用的两个伪类选择器 伪类选择器都是用:连接的 类名:nth-child(N):先确定位置，再筛选选择器 在同一结构下都是相同选择器时使用...类名:nth-of-type(N):先确定选择器，在匹配位置 在同一结构下不全是相同选择器时使用 举例 二.后代(子代)选择器 后代选择器: CSS语法:上一级标签他所有的后代用宫格进行连接 子带选择器...相邻选择器:+进行连接,他是找到前者后,在前者后面的相邻的才会选中,如果没相邻他会接着找第二个前者 注意 选择器放置位置前与放置位置后,会有影响有点类似正则匹配先匹配到第一个然后匹配第二个 他所改变的是他们后者而不是两个都改变
二、less和sass的相同之处 Less和Sass在语法上有些共性，比如下面这些： 1、混入(Mixins)——class中的class； 2、参数混入——可以传递参数的class，就像函数一样；...>>>无参混合，会在css中编译除同名的class选择器，有参的不会 (3)、less的匹配模式：使用混合进行匹配，类似于if结构 声明： .name(条件一，参数){} .name(条件二，参数...){} .name(@_,参数){} 调用：.name(条件值，参数值); 匹配规则：根据调用时提供的条件值去寻找与之匹配的"MiXins"执行，其中@_表示永远需要执行的部分 (4)、less中的运算...，使用时需注意最终单位 例：10px10px=100pxpx (3)、sass中的嵌套：选择器嵌套，属性嵌套，伪类嵌套 选择器嵌套 ul{ li{} } 后代 ul{ >li{} } 子代 &...②继承：声明：.class{} 调用：@extend .class; >>>优点：继承的相同代码，会提取到并集选择器中，减少冗余代码 >>>缺点：无法进行传参，会在css中，生成一个同名class
) color: rgba(253,217,106,0.3); 注意 建议使用十六进制表达方式 调试时可以用英文字母形式，初期的调试就是随便设置一个颜色，查看区块是否存在等，在合模型中我们会遇到 设置文字透明度或者背景透明度...：line-height: 30px; 作用：1、改变段落中行与行之间的距离 2、使文字上下居中，先写text-align: center; 再将line-height设置与height..." type="text/css" href="index.css" /> 补充知识 CSS内部注释为 /* */ 外部注释 直接在.css文件中注释 link rel属性 rel属性规定了当前文档与被链接文档之间的关系.../返回上一层，如果有多层就用多个../ css/表示进入css文件 2-3 常用选择器 标签选择器 即定义一次，多次使用 分为原始样式 内部样式 外部样式 选择器的层叠性 在一次标签后，继续添加标签会覆盖前一个标签...类选择器 给一段文字赋予特定的属性 定义 class是定义类的关键字，article是类名，类名可以任意，但是要符合规范 使用 .article
3-2 ID选择器和类选择器的区别是什么？ ID选择器可以为含有ID属性的标签指定CSS样式，以“#”来定义，例如：#red{color:red;}。...在一个HTML文档中，它只能使用一次，而且仅一次。 类选择器可以为含有class属性的标签指定CSS样式，类选择器以“.”来定义，例如：.red{color:red;}。...在一个HTML文档中，它可以使用多次。 3-3 HTML中列表的分类有哪些，CSS中的列表属性有哪些？...html 列表分类： 有序列表（和） 无序列表（和） css 列表属性： list-style：把所有用于列表的属性设置在一个声明中...） fixed（将背景图片固定在页面的可见区域） background-position（背景图片在页面中的位置） length（设置背景图片与页面边距水平和垂直方向的距离，单位cm、mm、px等） percentage
本文为CSS基础知识。 CSS的一些基础知识 CSS简介 CSS全称（Cascading Style Sheets）称为层叠样式表，他的存在使 HTML 与样式分离。...以上选择器可配合一起使用：tagname.class-name[tag-attribute=keyword] {...}。 （注意：单个文件中，id选择器只能拥有一个，且只能使用一次。）...选择器存在优先级，优先级高的会覆盖优先级低的样式。 css中，后定义的样式会覆盖之前定义的样式。最近的祖先样式比其他祖先样式优先级高。 优先级为： !...另外我们也可以这样认为，同样情况下选择器越多的优先级越高，例如：#id1#id1 > #id1/.class1.class1 > .class1）。（注意：在属性值对后面加 △！...（例：） css中，为了后续的可扩展性和可维护性，应尽量少使用id选择器，尽量不使用行内样式，且css应建立单独文档引入
以前我们通过VB敲机房的时候，可以直接通过拖动窗体上的控件、修改代码的属性或是通过代码来设置窗体的布局，而在B/S的学习中，可以通过CSS语言来使网页的内容和样式分离，也就是在aspx或是html中设计网页的内容...，在CSS表中设置网页的显示、文字的设计等。...概述 CSS（Cascading StyleSheets）：层叠样式表。将网页表现与内容分离的一种样式设计语言。...当我们想要在HTML中设置CSS样式时，就需要通过class选择器或id选择器来进行标记连接。 ID选择器： 为标有特定ID的HTML元素制定特定的样式。.../*红色*/ } 在页面上的显示效果： 对比： ID选择器 CSS选择器 元素范围 特定元素 一组元素 HTML表示 <span class=”title
前言 很多小伙伴对css选择器表示不屑，觉得很简单没必要学习，其实你究竟了解多少呢？当面试官问你的时候，你能分出哪些是css3新增的选择器，他们兼容如何？又该如何处理呢？...css3选择器分类 css3选择器在最新的版本中作为一个独立的模块分离了出来，而css选择器有哪些呢？又该如何分类，请看下图。 ?...选择器攻略 基本选择器 id,class,*通配符选择器，复合选择器（选择器分组），无兼容问题 层次选择器 后代选择器：e f;子选择器 e>f ;相邻兄弟选择器 e+f,只能选择之后的一个；通用兄弟选择器...,:empty ,等，兼容ie9+ 否定伪类 ：not() 针对性排除，兼容ie9+ 伪元素 伪元素在新的规范中为双冒号，为了区别伪类，ie6-8只识别单冒号，写法不同，无兼容问题 属性选择器 针对属性...样式属性必须使用标签，以标签定义的CSS样式是不会被解析的。 由于安全原因，样式文件需以域的形式调用，像是file:是不起作用的。 此效果非动态的。
CSS声明会被放置在一个CSS声明块中。最后，CSS声明块与选择器相结合形成一个CSS规则集（或CSS规则） CSS声明 CSS 的属性和属性值都是区分大小写的。...简单选择器 1） 类选择器 类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。...因为比起class而言id专用性更高(在一个页面上id是唯一的, 但很多元素可以拥有相同的class — ID 选择器在它们的目标中是非常优先的)，红色背景色和1pixel的黑色边框都应应用于第二元素，...前两个选择器正在竞争链接的背景颜色的样式——第二个赢得并使背景色为蓝色，因为它有一个额外的ID选择器在链中：其专用性值为201比101。...然而选择器七同时击败了五和六——它有与五相同数量的子选择器在链中，但一个元素已被换为了一个类选择器。所以获胜的专用性值是33比23和24。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。...CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。 如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。.../Firefox 浏览器中不起作用。...class 选择器 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。...class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示： 在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
CSS文件中： 导致每次都需要重新编写，延长了项目制作时间 每次编写的并不统一，造成一种布局有多套做法，包括对其进行操作的js编写 不便于统一进行样式更改 不便于交接 3）表现与结构没有分离——频繁使用行内样式与以...常用页面如详情页和含有大量表格的页面的CSS样式应写到各自独立的CSS文件中制作成模板，以后每次使用时直接调用即可。...5、表现与结构分离：CSS样式都应写在CSS文件中，且尽量少用id、组合、属性选择器和行内样式以及style标签样式 为避免在CSS文件使用类选择器和使用js添加类选择器进行样式覆盖时因优先级问题而无法覆盖成功...可缩写的属性中，如果属性值只有1个或2个，那应该分开写；如果大于2个，应该合并写在一起。这样就可以使其编译的时间最优化。...6）不要随意使用id id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先于class，所以id应该按需使用，而不能滥用。
|先应用第二个的元素，且在第一个元素中| 子代选择器 | >|ul>li|匹配第二个选择器，属于第一个选择器的子代| 兄弟选择器 |+ |p+a{}|匹配紧跟第一个选择器的选择器...:after选择器 :after伪元素选择器用于在某个元素之后插入一些内容，使用方法与:before选择器相同。...只有用户单击了页面中的超链接，并且跳转到target元素后，:target选择器所设置的样式才会起作用。 链接伪类 链接伪类 在CSS中，通过链接伪类可以实现不同的链接状态。...TIM图片20200308154954.png CSS浮动与定位 在一个网页中，默认情况下块级元素独占一行，是自上而下排列，行内元素自左向右排列，但是在实际的网页布局中往往需要改变这种单调的排列方式...，使网页内容变得丰富多彩，CSS的浮动和定位完美的解决了这个问题。
Q9、CSS中使用ID和Class的区别？ 1）ID：ID属性的操作类似于CLASS属性，但有一点重要的不同之处：ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。...包含ID属性的选择器称为ID选择器。ID选择器的标志符是散列符号（#） 2） Class：CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。...以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。...Q33、浏览器如何确定哪些元素与CSS选择器匹配？ 浏览器从最右边（key 选择器）到左边匹配选择器。浏览器根据key选择器筛选出DOM中的元素，并遍历其父元素以确定匹配项。...元素的宽度是通过内容的宽度+水平填充+水平边框宽度来计算的。 在我们的盒子模型中，考虑到填充物和边框，与设计人员实际如何想象网格中的内容产生了更好的共鸣。 Q39、什么是CSS预处理器？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
