通过js来改变CSS属性,使用jQuery可以很方便的实现,像这样:
$("img").css('border-color','red')
就可以把边框颜色都变成红色。
这是针对此问题的测试页面
2、这是3张图片
<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=975878983,2392470128&fm=11&gp=0.jpg'>
<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=61343736,951557457&fm=11&gp=0.jpg'>
<img src='https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1354592590,1762022981&fm=11&gp=0.jpg'>
3、这是图片的样式,边框默认为灰色。
img{
max-width:200px
border-color:gray
border-width:10px
border-style:solid
}
4、现在通过这几行用到jQuery的代码,控制图片边框根据鼠标移入移出边框变灰和变红。
$(function(){
$("img").on('mouseover',function(){
$(this).css('border-color','red')
}).on('mouseout',function(){
$(this).css('border-color','gray')
})
})
5、效果如图
在div里给它加上一个类,给新加的类写样式。
继承在CSS中是一种自然的行为,我们甚至不需要考虑是否可以这样做,但它有其局限性。
首先,有些属性不能被继承。这是没有原因的,因为它是这样建立的。例如,您都知道,border属性用于设置元素的边界,因此它没有继承。
如下图所示,如果继承了border属性,那么文档将看起来很奇怪,除非您采取其他措施来关闭border的继承属性。大多数边框属性,如填充、空白、背景和边框,都不是继承的。
扩展资料:
CSS中的样式优先原则:
规则1:当由于继承而发生样式冲突时,最近的祖先获胜(最近的原则)。
Strong分别从body和p继承了color属性,但是因为p在继承树中更接近Strong,所以Strong中的文本最终继承了p的蓝色。
规则2:当继承的样式与直接指定的样式冲突时,直接指定的样式获胜(最直接的原则)。
强大的{颜色:红色;}
根据规则二,用strong表示的文本以红色结尾。
规则3:当直接指定的样式冲突时,具有最高样式权重的样式将获胜。
该值取决于样式的选择,权重定义见下表。
CSS选择器的重量
标签选择器1
类选择器10
ID选择器100
内联样式1000
伪元素(:第一个子元素,等等
伪类(:链接等
可以看到,行内样式的权重是>、>ID选择器、>、b>类选择器、>、>标签选择器,除了子类选择器外,权重是每个权重的和,比如“# nav”。电流a“重100 + 10 + 1 = 111”。
//jsvar d = document.getElementById('nav1111')
d.style.width = width + "px"
//jquery
$('#nav1111').css('width',width)