css 设置可以继承父元素样式

CSS 子节点继承父节点(祖先节点)的样式

CSS 有些属性可以让子节点从父节点或祖先节点继承,文本.字体.列表属性等样式都可以被子节点继承.子节点没有自身的样式,子节点将继承父节点或祖先节点的样式. <ul class="container"> <li class="child-1">child 1</li> <li class="child-2"> child 2 <ul class="container-2"&

1. 前言在移动开发中,有时候需要设置一个宽高相等的div,并且为了使它能够适配更多的屏幕,于是需要让它的宽高和屏幕宽高成一定的比例.这里将提供一个css的解决方案,让一些后端开发不用再写繁琐的js. 2. 实现代码 html: <!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <div class="wrapper"

使用inherit属性值继承其父元素样式来覆盖UA自带样式。

像button.input这样的表单控件,不同的浏览器都会有自己的样式风格(UA样式).我们可以使用inherit继承其父元素样式,从而覆盖浏览器的UA样式. button, input, select, textarea { color: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; } 来自Airen的博客:http://www.w3cplus.com/css/back-to-the-roo

解决：子元素设置margin-top，父元素也受影响的问题

<!doctype html><html> <head> <meta charset="UTF-8"> <title>子元素设置margin-top,父元素也受影响</title></head><style type="text/css"> * { margin: 0px; padding: 0px; } .father { width: 500px; height: 8

关于元素设置margin-top能够改变body位置的原因及解决（子元素设置margin-top改变父元素定位）

关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用line-height=高度,无法居中,发现源码.navbar-brand 设置了 padding: 15px 15px;(默认导航高度为50),于是居中应该是等于高度-30,解决过程中写了几个div用于检测问题,结果遇到了以下问题,经过数小时的研究(时间大多花费在百度与谷歌上,以及研究原因上),于是写

CSS设置input placeholder文本的样式

placeholder是HTML5 input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏览器*/ #field::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } /* 火狐浏览器 */ #field::-moz-place

子元素设置margin-top，父元素也受影响

这个问题困惑了非常久.尽管没有大碍早就摸出来怎么搞定它.但始终不明确原因出在哪里,假设仅仅是IE有问题我也不会太在意.可问题是全部上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,竟然是CSS2.1盒模型规范--尽管非常别扭,非常别扭的规定. 问题例如以下.两层Div结构.Outer Div属性为"margin:0 auto".本该紧贴外框顶部的,假设没有Inner Div,或者没有Inner Div的"margin-top"属性,一切如预期.可

Javascript禁止子元素继承父元素的事件

3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3.简单点,直接在子元素事件function最后加return false:// 阻止事件冒泡和默认操作

jQuery如何阻止子元素继承父元素事件？

<a> <b></b> </a> $("a").click(...); 这种绑定的话,b也会响应一次事件,如何只对a元素绑定事件,而不对子元素绑定呢?即b被click之后自己并不触发回调函数,而是把事件传递给a. 我现在的做法是:直接在a上写 <a onclick="xxx"></a> ,这样b就不会把自己作为event.target触发回调了. --- 更新 ----大家可能对我的意思有误解,

I do not want to inherit the child opacity from the parent in CSS(不想让子元素继承父元素的透明度)

Instead of using opacity, set a background-color with rgba, where 'a' is the level of transparency. So instead of: background-color: rgb(0,0,255); opacity: 0.5; use background-color: rgba(0,0,255,0.5);

CSS中可以继承的元素(需要记住)

可以继承的属性很少,只有颜色,文字,字体间距行高对齐方式,和列表的样式可以继承. 所有元素可继承:visibility和cursor. 内联元素可继承:letter-spacing.word-spacing.white-space.line-height.color.font.font-family.font-size.font-style.font-variant.font-weight.text-decoration.text-transform.direction. 终端块状元素可继承:t

QT之setstylesheet防止子窗体继承父窗体样式

/* 1.这里的#号表示,主控件不会影响子控件 2.设置多个样式,可以用双引号和分号 */ ui->groupBox_1->setStyleSheet("#groupBox_1{background-color:white;" "border-width:1px;" "border-style:solid;" "border-color:white}");

子元素的div不继承父元素的透明度

问题一: 如何让logo部变成这样: 步骤一:先收一个大的div,上面logo+nav再一个div,下面是三个div横排着: 步骤二:最主要的是如何让上面的部分变暗,而logo的颜色不变暗? 答案:在包住logo+nav的div里设置backgroubd-color :rgba(0,0,0,0.3)就可以了

jquery如何阻止子元素继承父元素的事件（又称事件冒泡）

非常简单,子元素上添加如下代码即可 $('a').click(function(e){ e.stopPropagation(); }); 老版本为event,现在用e就行

css设置input获得焦点的样式

input:focus{ 样式; } 这样就ok

css flew 布局解决父元素高度不固定，子级居中。

给父级添加 display: flex; justify-content: flex-start; align-items: center; 子级里的内容永远居中

css 设置overflow:scroll 滚动条的样式

/* 定义滚动条样式 */ ::-webkit-scrollbar { width: 6px; height: 6px; background-color: rgba(240, 240, 240, 1); } /*定义滚动条轨道内阴影+圆角*/ ::-webkit-scrollbar-track { box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); border-radius: 10px; background-color: rgba(240

css 设置奇数行偶数行样式

.list ul li:nth-child(even){ ...} //li的偶数行样式 .list ul li:nth-child(odd){ ...} //li的奇数行样式 .list ul li:nth-child(1){ top:0;} //第一个li.list ul li:nth-child(2){ top:30px;} //第二个li 部分情况下的解决方案 <style> .list li:nth-of-type(odd){ margin-left:

js - 如何使子元素阻止继承父元素事件

想要阻止点击 #content 区域时触发a事件,需要在 #content 区域内加入阻止事件冒泡的代码,具体代码如下: <div id="box" onclick="a()"> <div id=content> </div> </div> #box 包括 #content ,当点击 #box 区域任何位置时(包括 #content ),都会触发a事件.想要阻止点击 #content 区域时触发a事件,需要在 #con

javascript阻止子元素继承父元素事件

$('.box').on('click', function (e) { if(e.target == this) { console.log(e.target) } })