加载中…
个人资料
  • 博客等级:
  • 博客积分:
  • 博客访问:
  • 关注人气:
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

css里面*{}和html{}的区别

(2017-11-29 14:46:31)
标签:

通用选择器

继承性

分类: CSS


*是一个通配符,也是一个选择器------通用选择器,它的作用是匹配html中所有标签元素,包括html标签、body标签等等,所有标签都会继承*里面的属性,除非子标签属性重新被设置。其实,除了别的标签外,html *{}*等价。

html{}只是一个标签,如果它的子标签的属性具有继承性,那么才会继承html里面的属性。不过,这种情况下,子元素不一定继承html的属性,而是根据就近原则进行继承。所以这种方式在选取dom进行一些操作时,有些情况下可能会出错。

 

可继承:指子节点能继承父节点的属性。反之,不能继承。

 

下面看一个示例:

http://s15/mw690/0066Nca9zy7gbxn2cFM4e&690

http://s3/mw690/0066Nca9zy7gbxnlZ5Mc2&690

http://s2/mw690/0066Nca9zy7gbxo7R6x51&690


效果1

 

http://s15/mw690/0066Nca9zy7gbxq1ekC6e&690

当我们把a.css代码改成如下样式时,效果为

 

http://s5/mw690/0066Nca9zy7gbxrt8wY84&690

效果2

 

http://s11/mw690/0066Nca9zy7gbxsBMV4ca&690

$("div").children("p")表示在div中选取标签是p的子元素。

执行$("div").children("p").css("color","red");后效果1的结果正确,选取了p。而效果2是错误的,不仅选择了p,而且还选择了p元素的子元素spanspan里面的文本被变成红色正是因为就近原则造成的,受了p的影响。如果要使dom操作正确,span应该受div的影响,但是这种形式下是就近原则,不能能受div的影响,所以最后只能导致dom的选取出现错误的结果)。

 

    对比效果1与效果2,在进行选取dom执行一些操作时,尽量用带*的选择器。

 

 

    css的有些属性是不能继承的,有些是可以继承的。至于更多具体的,请参考:[转]CSS中继承性属性和非继承性的属性

 

 

 

 

 

 

 

 

 

 

0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有