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

标签:
通用选择器继承性 |
分类: CSS |
*是一个通配符,也是一个选择器------通用选择器,它的作用是匹配html中所有标签元素,包括html标签、body标签等等,所有标签都会继承*里面的属性,除非子标签属性重新被设置。其实,除了别的标签外,html *{}与*等价。
而html{}只是一个标签,如果它的子标签的属性具有继承性,那么才会继承html里面的属性。不过,这种情况下,子元素不一定继承html的属性,而是根据就近原则进行继承。所以这种方式在选取dom进行一些操作时,有些情况下可能会出错。
可继承:指子节点能继承父节点的属性。反之,不能继承。
下面看一个示例:
http://s15/mw690/0066Nca9zy7gbxn2cFM4e&690http://s3/mw690/0066Nca9zy7gbxnlZ5Mc2&690
http://s2/mw690/0066Nca9zy7gbxo7R6x51&690
效果1:
当我们把a.css代码改成如下样式时,效果为
效果2:
$("div").children("p")表示在div中选取标签是p的子元素。
执行$("div").children("p").css("color","red");后效果1的结果正确,选取了p。而效果2是错误的,不仅选择了p,而且还选择了p元素的子元素span(span里面的文本被变成红色正是因为就近原则造成的,受了p的影响。如果要使dom操作正确,span应该受div的影响,但是这种形式下是就近原则,不能能受div的影响,所以最后只能导致dom的选取出现错误的结果)。