了解HTML CSS选择器操作和特性
2016-02-11 21:14
519 查看
子选择器
在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样式表), 如果权值相同才看层叠覆盖.
相关文章推荐
- CSS3新的特性
- 【CSS笔记】css3制作立体导航
- 【CSS笔记】使文字在一行显示,超出部分用省略号显示
- css三列布局
- 网页布局CSS初始化代码
- 网页中Logo的样式代码
- 根据设备视口宽度来更换样式表
- 利用CSS3媒体查询实现更换样式表
- 了解HTML CSS布局(层叠样式表)
- 前端试题-什么是css sprite?优缺点?
- 利用JS生成博文目录及CSS定制博客
- [笔记][Web]利用JS生成博文目录及CSS定制博客
- 【CSS笔记】display:inline-block的使用
- mac下 静态文件css403无法显示
- HTML+CSS笔记 CSS笔记集合
- HTML+CSS笔记 CSS中级 一些小技巧
- HTML+CSS笔记 CSS中级 颜色&长度值
- HTML+CSS笔记 CSS中级 缩写入门
- HTML+CSS笔记 CSS进阶再续
- HTML+CSS笔记 CSS进阶续集