先设置两个按钮的基本样式 .button{ flex: 0 0 40%; margin: 10px; height: 60px; display: flex; justify-content: center;
1、伪元素 伪元素用于设置元素指定部分的样式。 比如说设置元素的首字母、首行的样式;在元素的内容之前或之后插入内容 常见的伪元素如下图 语法： selector::pseudo-element { property: value; } 选择器::伪元素{ 属性：属性值; } 常用伪元素 ::after p::after 在每个
常用选择器 元素选择器：根据标签名来选择指定的元素，语法：标签名{} 例：p{} h1{} div{} p{ color: red; } h1{ color: blueviolet; } id选择器 作用：根据id属性值选中一个元素 语法：#id属性值{}
CSS选择器和jQuery选择器的区别与联系之一 到底什么是选择器？通过常接触的CSS选择器和jQuery选择器理解一下，我们知道CSS是用于分离网页的结构和表现的，也就是说对于一个网页，HTML定义网页的结构，CSS描述网页的样子，一个很经典的例子是说HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有
之前写了一篇 《详解 CSS 属性 - :before && :after》 的博文，当时自己没分清楚伪元素和伪类，所以在文章内把概念混淆了，庆幸 @riophae 兄指正了我的错误，所以今天打算好好研究下两者的区别。 首先，阅读 w3c 对两者的定义： CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素
CSS的复合选择器 在CSS中，可以根据选择器的类型分别把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器，对基本选择器进行组合形成的。 复合选择器可以更准确、更高效的选择目标元素(标签) 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 常用的复合
背景属性 1 <style> 2 div{ 3 width: 400px; 4 height: 400px; 5 padding:100px; 6 border:50px solid rgba(0,0,0,0.5); 7 background: url(../images/1.jpg); 8 /* 1、背景原点 */
浮动 文档流 文档流的简单定义：正常文档流，将窗体自上而下地分成一行一行，块元素 独占一行，相邻行元素在每行中按照从左到右依次排列顺序。 而脱离正常文档流可以将正常显示顺序打乱，比如将最底部的某个div元素抽出来，显示在其他元素前边。 float脱离正常文档流，但不脱离正常文本流
在css3提供的新选择器之前，选择一个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好用的选择器呢？ 首先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不用额外再添加class或者id。 比如需要选择出input
html5+css3，html不会再出第六版。css3是里面是分模块的，比如字体模块，盒子模块等等这些。每个模块都有各自不同的版本，所以css3是统一命名的，不用纠结。 回顾 回顾一下网页的三个部分：结构（html）、表现（css）、行为（JavaScript）。 之前的h标签等等其他标签，样式都是浏览器默认的，改变样式就是c
在css3提供的新选择器之前，选择一个元素需要借助id或者class，css3新增的选择器可以更灵活的去选择需要的元素，那css3提供了哪些好用的选择器呢？ 首先就是属性选择器，我们可以通过属性选择器在同样的标签/类中选择出具有相同属性的元素，不用额外再添加class或者id比如需要选择出input标签
vue项目中动态改变css样式，通过style写css样式的方式:style="{color:blue}"这种，但是可能会存在一个问题，这个style只是针对当前节点的样式进行修改，我如果还有其他节点样式或者伪类，这时候vue的style方式就没办法实现了（可能是我未了解到），所以我通过动态设置css的方式去控制css样式 以动
1.伪类，pseudo-classes 其核心就是用来选择DOM树之外的信息，不能够被普通选择器选择的文档之外的元素，用来添加一些选择器的特殊效果。 ：hover, ：active, :visited :link :first-child 由于状态的变化是非静态的，所以元素到达一个特定状态时，可以得到一个伪类的样式。当状态改变时，
/1.display:none(不占位置，无效果） visibility:hidden 可见属性为隐藏（看不见，但位置还在） /2.hover 伪类 伪元素（鼠标停在上面时变为红色） color:red display:block /3.style内联 优先级高于link /4.overflow:hidden 给父标签撑起高度
相同点 都可以用来表示伪类对象，用来设置对象前的内容 :befor和::before写法是等效的 不同点 :befor是Css2的写法，::before是Css3的写法 :before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好 CSS 3中引入了:: before表示法，以便在伪类和伪元素之间建
CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪元素用于将特殊的效果添加到某些选择器。 可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。 伪类的种类 伪元素的种类 具体使用如下
伪类伪类更多的定义的是状态，如:hover，或者说是一个可以使用CSS进行修饰的特定的特殊元素，如:first-child伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。当用户悬停在指定的元素时，我们可以通过 :hover 来描述这个元素的状态。虽然它和普
1、主要工作方式2、通过选择器选择一个或多个html标签3、使用css样式规则定义这些标签样式4、ie8以及ie8以下的浏览器不支持css3选择器 一、选择器分类 1、基本选择器 1.1类名和id的命名规范 1.2属性选择器 1.3伪类选择器（动态伪类）
伪类元素 用于存放文本和其他元素大的区域 类似于一个箱子之间存放东西 边框盒boder box{由boder，padding content 组成} 填充盒padding box{由padding content 组成} 内容盒 content box{由content组成} 什么是继承 继承（inherit） 是指子元素会自动拥有父元素的某些css属性 继
用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素。 应用场景： 鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等 细节优化： 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的
::after、::before 通过伪类的方式给元素加一个文本内容等等 ::after或::before设置它们的样式时有一个content这个属性这里可以写attr(data-label)其中data-label是标签上设置的data属性里的数据content:attr(data-label)这样写后就可以获取到data-label里的值
CSS基础知识 1.CSS简介 网页分成3各部分 结构(HTML) 表现(CSS) 行为(JavaScript) CSS 层叠样式表 网页实际上是一个多层的结构，通过CSS为网页的每一层设置样式 用来设置网页中元素的样式 使用CSS修改元素的样式 第一种方式：内联样式/行内样式 在标签内部通过sty
1.伪类与伪元素. 先说一说为什么 css 要引入伪元素和伪类，以下是 章节中伪类和伪元素的描述： CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree. css 引入伪类和伪元素概念
ul li:not(:last-child)::after { content: ''; height: 14px; border: 1px solid #3c423f; position: absolute; top: 4px; right: 0;}
## 伪类：伪类用于DOM树之外的消息,或是不能简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如:visited,:active ；后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:fitst-of-type,:target ## 伪元素：伪元素为DOM树没有定义的虚拟元素。不同于其他选
