层作为它的子元素设置absolute，然后在使用label的hover伪类来控制hover层的显示和隐藏，这其中一个要求及时hover层必定要求能够遮住页面中其他的元素，所以最常用的办法是设置它的背景颜色...，然后让它的z-index处于合理的位置，一切都是这样设计的，但是最终的效果却出现了hover层设置bg为#fff的时候，hover层显示时还是会把底部内容给透出来，第一反应就是opacity设置为1，...但是还是没有效果（因为背景为白色，所以有点坑） 最终问题定位在父元素的opacity属性设置为不为1的值导致的，这样即使hover层（作为子元素）设置了bg和opacity为1，也依然会存在一定的透明度...（设置父元素的opacity为1通过了测试），父元素的opacity会影响到子元素，即使子元素自定义了opacity属性；还发现最后元素遮住了字体之后，背景颜色还能透给底部的文字，相当于底部内容文字形成了一个遮罩的效果...总结：在设置opacity时，需要排查父元素是否已经设置，需要考虑对于元素中所包含的子元素的影响 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/141518.html
为Typecho的子分类设置二级菜单 就是普通的分类，正常输出；有子分类的父级分类，输出后点击它会展开二级菜单里面有这个父级旗下的子分类。类似下面的两个GIF图片效果。
注意看下面的窗口标题栏，当我在这些不同区域间点击的时候，窗口标题栏在黑色和灰色之间切换： 这说明当子窗口获得焦点的时候，父窗口会失去焦点并显示失去焦点的样式。...你可以在这篇博客中找到一个简单的例子： 解决办法 而原因和解决方法仅有一个，就是子窗口需要有一个子窗口的样式。 具体来说，子窗口必须要有 WS_CHILD 样式。...你可以看看 Spyxx.exe 抓出来的默认普通窗口和子窗口的样式差别： !...本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。...欢迎转载、使用、重新发布，但务必保留文章署名 吕毅 （包含链接： https://blog.walterlv.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。
有如下树形结构：RT-ST-SST-SSST共四层，RT是根节点，往后依次是一代子节点，二代子节点，三代子节点。 如何根据当前节点的id，获得其子节点呢?这是一个SQL问题。...加入传入的id为1（即根节点），使用自连+SUBSTRING_INDEX函数得到其子节点： 示例： id name type url 1 大树 RT root...tree_branche3/tree_leaf3 | +----+---------+------+-----------------------------------------------+ 加入传入的id...为1（即根节点），使用自连+SUBSTRING_INDEX函数得到其子节点： mysql> select tree1.* from tree_node as tree1 -> join tree_node...= 1; ##返回"树干1"的父节点的url select SUBSTRING_INDEX('root/tree_main_line1','/',1) ##将"/"替换为"" mysql> select
:target{ background: red; } /*通常用于锚点定位后，定位的目标点样式*/ 32：E:last-child，匹配父元素的最后一个子元素...h2:nth-last-of-type(even){ background:red; } 37：E:first-of-type，匹配父元素下使用同种标签的第一个子元素...h2:first-of-type{ background-color: yellow; } 38：E:last-of-type，匹配父元素下使用同种标签的最后一个子元素...li:only-child{ background-color: yellow; } 40：E:only-of-type，匹配父元素下使用同种标签的唯一一个子元素...需要注意的是，即使用户将该单选框或复选框的选取状态设定为非选取状态，该样式仍然有效。
，用以结束的“;”可写可不写，但是基于W3c标准规范思考建议最后一条声明的结束“；”都要写上 2.行内样式 直接在style属性设置css样式style属性提供了一种改变所有的HTML元素样式的通用方法...">hhhh 注意:id选择器只能使用一次，也就是说在同一页面同一个id属性只能设置一次；而类选择器可以在页面使用多次 3)选择器的优先级 id选择器>class类选择器>标签选择器...E元素相邻的后面兄弟元素下，是一个或多个元素； 2）相邻兄弟选中的是与E元素仅挨的F元素，其中选中的仅是一个元素 8.结构伪类选择器 1）E：first-child 作为父元素的第一个子元素的元素...E 2） E：last-child 作为父元素的最后一个子元素的元素E 3）E F：nth-child（n） 选择父级元素E 的第n个元素F（n可以是1/2/3）关键字为even odd...(n) 选择父元素内具有指定类型的第n个F元素 注：E F：nth-child（n）和 E F:nth-of-type(n)使用时记住以下关键点： 1）E F：nth-child（n）在父级里从第一个元素开始查找
，E 的父元素最高是 body，即 E 可以是 body 的子元素 匹配父元素的第 n 个子元素 E，假设该子元素不是 E，则选择符无效，但 n 会累加 /* 第二个 p 会被设置成红色...，E的父元素最高是body，即E可以是body的子元素 该选择符允许使用一个乘法因子(n)来作为换算方式，比如我们想选中倒数第一个子元素E，那么选择符可以写成：E:nth-last-child(1) 匹配父元素的倒数第...也就是说E可以是body 该选择符总是能命中父元素的倒数第1个为E的子元素，不论倒是第1个子元素是否为E /* 设置倒数一个元素类型为 p 的元素为红色，尽管该 p 元素不是父元素的倒数第一个元素...{ sRules } 设置在打印时页面容器第一页使用的样式。...长期坐在办公室的同学们要多注意运动。 ::first-line CSS3 E::first-line { sRules } 设置对象内的第一行的样式 此伪对象仅作用于块对象。
ID选择器，#ID{}, 在标签内定义id=""，有严格的一一对应关系。 子选择器， .span>li{}，作用于父元素span类下一层的li标签。... 代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。 ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。...我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。...，为元素设置了上下之后，元素就会脱离竖直方向的标准流；脱离之后，会根据父元素的位置来确定当前元素的位置。...（一般设置为1000px） 块级元素怎么相对于父元素居中？ 元素需要设置长度，元素左右的外边距设置为 auto 即可！
3.获取元素 1. document.getElementById('id')方法获取带有ID的元素对象 (参数必须是字符串) 2.根据标签名获取 ：document.getElementsByTagName...还可以获取某个元素(父元素)内部指定标签的子元素集合，父元素必须是指定的单个元素：element.getElementsByTagName('标签名'); 获取的是一个伪数组,可以通过索引访问，但它没有数组的一些方法...元素.innerText 可以直接获取元素中的文本，但不带有任何内部标签。 元素.innerText = 值 设置元素之间的文本，其中文本内不能有标签，因为它不会识别。...当使用 JavaScript 的 DOM 操作 修改 元素的css样式时 , 有两种主要的方法 : 行内样式操作 element.style 类名样式操作 element.className...使用 element.style 可以直接在 JavaScript 中 设置元素的 行内样式 ; 行内样式 会直接作用于该元素 , 它权重优先级比css内部样式优先级高 , 可以直接指定样式属性的值 ;
（注：文中代码因篇幅有限仅写出关键部分代码） id和class id 在元素的属性里加上id标签，然后用“#+id名选择”，如 #z {text-align:center;} id="...h1> 分组和嵌套 分组 当多个元素有共同的css样式描述时可以使用分组减少代码，如： #a,#b,#c {color:blue;} id="a">text id="...b">test id="c">text 嵌套 当要操作元素内部的子元素时可以使用嵌套来进行操作，如： div p {text-align:center;} name... age 则name和age都会居中，选择的只要是后代就行，可以是子元素的子元 子元素选择器 以大于号分隔，子选取元素的直接后代，如： div>p {text-align...FF00FF} a:active {color: #0000FF} first-child伪类 伪元素 first-line： 用于相文中首行设置样式，且只应用于块级元素，可设置的属性有： font
ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。 可以使用类选择器词列表方法为一个元素同时设置多个样式。...我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。...适用于由连字符分隔的属性值： [lang|=en] { color:red; } 4 设置表单的样式 属性选择器在为不带有 class 或 id 的表单设置样式时特别有用： input[type="text...比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。...如border:1px solid red; 子元素继承父元素的样式，但并不是所有属性都是默认继承的。通过文档中的 inherited: yes 来判断属性是否可以自动继承。
1、class 和 id 的使用场景? id：指定标签的唯一标识。根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)。...| | E:nth-of-type(n) | 与:nth-child()作用类似，但是仅匹配使用同种标签的元素| | E:nth-last-of-type(n) | 与:nth-last-child...() 作用类似，但是仅匹配使用同种标签的元素| | E:last-child| 匹配父元素的最后一个子元素，等同于:nth-last-child(1)| | E:first-of-type | 匹配父元素下使用同种标签的第一个子元素...，等同于:nth-of-type(1)| | E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)| | E:only-child...| 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)| | E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素
20px 30px 40px 150% 20px 30px 30px 2 20px 30px 60px 总结:不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。...嵌套的盒子外边距塌陷 嵌套的盒子，直接给子盒子设置垂直方向外边距的时候，会发生外边距的塌陷（父盒子跟着移动） 解决方法: 1.给父盒子设置边框 2.给父盒子overflow:hidden;...特点： 1.元素使用绝对定位之后不占据原来的位置（脱标） 2.元素使用绝对定位，位置是从浏览器出发。 3.嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。...4.嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。 5.给行内元素使用绝对定位之后，转换为行内块。...2.不脱标，其他的元素不能占有其原来的位置。 3.子绝父相（父元素相对定位，子元素绝对定位），用的最多的场景。 4.行内元素使用相对定位不能转行内块元素。
DOM可以做什么 找对象（元素节点） 设置元素的属性值 设置元素的样式 动态创建和删除元素 事件的触发响应：事件源、事件、事件的驱动程序 元素节点的获取 DOM节点的获取方式其实就是获取事件源的方式...用法： 子节点数组 = 父节点.childNodes; //获取所有节点。 （2）children：非标准属性。返回的是指定元素的子元素节点的集合。...方式1： 父节点.appendChild(新的子节点); 解释：父节点的最后插入一个新的子节点。...方式2： 父节点.insertBefore(新的子节点,作为参考的子节点) 解释： 在参考节点前插入一个新的节点。 如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。...要复制的节点.cloneNode(true); 括号里带不带参数，效果是不同的。解释如下： 不带参数/带参数false：只复制节点本身，不复制子节点。
仅支持单 class 选择器，不支持样式继承 Weex 样式内不支持标签选择器、属性选择器、ID选择器、后代和子层级选择器、相邻选择器，以及 CSS3 中增加的各种计数选择器等。...而且不设置子元素的宽度，父元素的 align-items 为默认的 stretch 时，子元素将自动拉伸填充侧轴宽度。...多行等分布局问题 之前说过，默认子元素侧轴拉伸对齐的情况下，不设置子元素宽度即可实现宽度 100% 的适配。...对于 Web 页面 flex 多行布局的情况，我们给父元素设置 flex-wrap: wrap; 属性后，通常根据每行子元素数量设定子元素宽度的百分比。...所以只能假定，父元素一定是占满屏幕宽度，子元素根据 750px/n 来设置宽度。
开头 例如：document.getElementById 使用 console.dir 可以打印出返回的元素对象，从而更好的查看属性和方法 getElementById （元素ID) 获取标签为Id的元素...parentNode //可以返回某个节点的父节点，注意是最近一级的父节点如果指定的节点没有父节点则返回null × 子元素节点 parentNode.children (各个浏览器都支持) （不包含...别忘了e.通常情况下e.target 和 this 的指向是一致的 注意：有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）这时候 this 指向的是元素...,会保留空格和换行使用 innerHTML 设置内容 识别 可设置 HTML 标签 属性的操作 this 指向的是事件函数的调用者 普通元素的属性操作 innerText 、innerHTMLsrc...在标签中设置 使用 js设置 Element.setAttribute("data-index",2) 节点操作 node 表示父级 child 表示子级
什么是 scoped scoped 属性是 HTML5 中的新属性，是一个布尔属性，如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素。...这样如果使用了 Ant Design for Vue 或者 Element UI 等第三方组件，就会出现 CSS 设置不起效的问题，无法通过 CSS 修改组件的样式。...可以使用下面的方法来解决： scoped 穿透： 1、使用 >>> 可以穿透 scoped 属性，修改其他第三方组件的样式。... 外层 >>> 第三方组件 { 样式 } 2、使用曲线救国的一个方法，用两个 style 标签，一个带 scoped 属性，一个不带 scoped... scoped> /deep/ .title { color: #888; } 4、还有一种就是不使用 scoped 属性，通过在最外层加 id 或者 class 的形式进行区分。
伪元素的本质是创建了一个可以设置内容和样式的虚拟容器。 可以同时使用多个伪类，但只能使用一个伪元素。 CSS选择器优先级、权重计算 CSS选择器的优先级 选择器的优先级分为两种：1....给父元素使用overflow:hidden 这种方案让父容器形成了BFC（块级格式上下文），而BFC可以包含浮动，通常用来解决浮动父元素高度坍塌的问题。 设置zoom:1清除浮动原理?...em em，是相对长度单位，em是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 优缺点：em的值并不是固定的，它会继承父级元素的字体大小。...，我们仅会有目的地对目标元素设置样式。...当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等 减少css嵌套，最好不要套三层以上 避免使用通配规则，以及慎用用css reset，可以选择normolize.css 渲染性能
vue.config.js —— vue配置文件，用于设置代理，打包配置等(自己创建的) 组件 组件的使用就两种方式 在父组件中使用 在路由中使用 组件：是根据ui界面来划分的功能小模块 组件包含三部分...不用的可以不用管 } 自定义指令的钩子： bind 指令与元素进行绑定的时候会被调用 只调用一次 可以给元素添加样式 inserted 元素插入父节点的时候被调用 可以给元素添加行为 update...数据的钩子 mounted是最高操作dom元素的钩子 两个理论问题，面试经常会问道 slot 插槽 slot 在子组件中显示父组件的数据 记住两点： 1、怎么在子组件中显示父组件的数据 a、在父组件中子组件的标签内部...:名>来指定数据显示的位置 单个 Slot： 在子组件内使用特殊的元素就可以为这个子组件添加一个 slot (插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的标签及它的内容...3个 元素,其中在内的 没用使用 name 特性,它将作为默认 slot 出现,父组件没有使用 slot 特性的元素与内容都将出现在这里。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
