了解HTML CSS选择器操作和特性_html/css_WEB-ITnose

　　子选择器

　　在CSS样式表中, 有时候我们需要为一个选择器进行再次的选择, 比如要为某段落标签下的标签进行样式设定(标签必须为段落标签下的第一代子元素, 意思即中间不包含别的标签嵌套), 这个时候就要使用子选择器.

　　代码示例:

　　p>span{

　　　　font-size:20px;

　　}

　　" > "就称之为子选择器, 它的作用就是将标签选择器下的第一代子元素的标签中的文本样式设置为字号20px, 但是这种显然不是很灵活, 只能选择子一代的标签元素, 如果我需要选择多代子标签, 就需要很麻烦的依次修改.

　　包含选择器

　　明白了子选择器, 包含选择器也就好理解了, 它用于选择指定标签元素下的后辈元素, 可以越级指定, 而不是非要直接后代元素.

　　两种选择器具体使用视情况而定, 并不是包含选择器更加方便就全部使用, 就如同程序开发中使用更多的常量会是程序更加健壮, 选择器也是这样, 选择合适的时机选择不同的选择器.

　　分组选择符

　　假如有一个样式, 你想同时给多个标签, 你可以给他们修改相同的类, id, 但是这样非常笨重, 而且ID选择器只可以设置一次, 所以这时候需要使用分组选择符, 通过符号" , "(没有双引号), 可以让多个选择器同时使用相同的样式.

　　代码示例

　　p, span{

　　　　font-size:20px;

　　}

　　伪类选择符

　　这个如果说用的非常多是这样, 说用的非常少, 也不为过, 主要是浏览器兼容性是个很大的问题, 万恶的IE((╯‵□′)╯︵┻━┻), 所以给大家简单介绍一个比较常用的, 也是你每天打开网页都会遇到的, 也不用担心浏览器兼容性的样式.

　　a:hover{

　　　　color:red;

　　}

　　这句话通过上面的学习应该很好理解, 也就是标签, 修改颜色, 而hover的意思就是, 当鼠标滑过的时候, a:hover属于标签的某种状态, 所以称之为伪类选择符.

　　有个叫通用选择器的东西, 这个我没仔细说, 就是选择器部分什么也不写, 用一个*代替, 它会默认选择所有的标签, 实际作用并不是很大.

　　css的几个特性

　　继承

　　这个继承可不是面向对象中的封装继承多态的继承, 在我理解应该是标签及其子标签的共性, 在面向对象语言中子类会完全继承父类的开放接口和成员变量, 而在HTML中是对父类标签做样式修改后, 一部分规则会传递给子标签(并不是所有的规则都可以的). 比如color等属性. 更加详细的规则, 大家就自行百度啦, 毕竟学习也是一个在探寻的过程, 常见的可以继承的属性比如字号, 颜色等文字类属性, 不可继承的比如加边框等.

　　权值

　　这个不需要大家理解, 虽然有较为详细的数值, 但是其实也就是个优先级的问题, 简单来说就是标签选择器

　　重要性

　　有的时候, 我们需要为一个属性设置为最高权值, 保证在后面也不会被修改, 这个时候在属性后面写上!important即可. 这样的属性就会是最高权值, 也就是最高优先级.

　　代码示例:

架设标签

样式表代码

p{

　　color:red!important;

}

p.class{

　　color:green;

}

　　虽然代码中css样式表中后来修改的颜色为绿色, 而且p.class是类选择器, 权值高于p标签选择器, 但是因为color属性已经被设置为最高权值了, 那么颜色还会是红色, 如果为后面的color:green;也加上!important, 那么颜色会变为绿色, 因为权值是附和相加原则的, 所以实际效果要先看权值, 再看层叠覆盖(也就是最后的css样式表), 如果权值相同才看层叠覆盖.