css中子节点清除父节点的样式影响

html-css015

css中子节点清除父节点的样式影响,第1张

楼主你的逻辑本身就有问题，你自己都说content的内容是变化的，既然说是变化的那么你肯定要单独再另设样式，而单独设了样式后body中设定的样式将不会调用了或者是优先调用你单独设的样式；你存在这个逻辑问题就说明了你写css的方法有问题，在body中设定的样式一般都是所占比例比较大的样式，其余不同的样式在单独设就是了，难不成你认为所有样式都单独设会更好？这只能无谓的增加代码量

jquery可以使用如下代码删除孩子节点

$(object).children(selector).remove()  // 删除object元素下满足selector选择器的子元素，不填写则默认删除所有子元素

创建Html元素及css样式

<div id="top"> 

<div>

这是孙辈元素

<li>孙代的li-1</li>

<li>孙代的li-2</li>

<li>孙代的li-3</li>

</div>

<span>子代的span</span>

<li>子代的li-1</li>

<li>子代的li-2</li>

<li>子代的li-3</li>

</div>

<input type="button" value="点我删除子代的li" name="btn1">

<input type="button" value="点我删除子代所有元素" name="btn2"> div{padding:10px 20pxmargin:5px 0border:4px solid #ebcbbe}

div#top{width:250pxheight:250px}

li{margin:10px 0}

jquery代码

$(function(){

$("input[name='btn1']").click(function() {

$("#top").children('li').remove()

})

$("input[name='btn2']").click(function() {

$("#top").children().remove()

})

})

查看效果

删除子代的li的效果

删除子代所有元素的效果

body *{

-moz-border-radius: 0

-webkit-border-radius: 0

border-radius: 0

}

上面的是CSS清理Body下所有元素的圆角，如果想用 js 或 jquery 来控制是否取消圆角的话，改成

body.noradius *{

-moz-border-radius: 0

-webkit-border-radius: 0

border-radius: 0

}

//注意空格  body 与 .noradius 之间无空格，dius 与 * 之间有空格

然后 利用 js 或 jquery 给body 添加 class="noradius":

$('xxx').addClass('noradius')  //会去掉所有圆角