了解HTML CSS选择器操作和特性

Posted 2020-06-13

　　子选择器

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

　　代码示例:

　　p>span{

　　　　font-size:20px;

　　}

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

　　包含选择器

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

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

　　分组选择符

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

　　代码示例

　　p, span{

　　　　font-size:20px;

　　}

　　伪类选择符

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

　　a:hover{

　　　　color:red;

　　}

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

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

　　css的几个特性

　　继承

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

　　权值

　　这个不需要大家理解, 虽然有较为详细的数值, 但是其实也就是个优先级的问题, 简单来说就是标签选择器 < 类选择器 < ID选择器(权值的大小也是如此), 也就是说ID选择器的优先级最高, 当设置规则是是可以通过选择器覆盖的, 但是这个要在同等类型的css样式表里, 也就是说内联式就和内联式比, 外部式就和外部式比. 继承的权值非常低, 也就不过多介绍了.

　　重要性

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

　　代码示例:

架设标签<p class = "wang">

样式表代码

p{

　　color:red!important;

}

p.class{

　　color:green;

}

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