CSS的伪类和伪元素,CSS组合器和CSS样式之间的关系

CSS的全局声明*:所有标记都会使用该样式 例如:*{color:red }(这个是我之前忘了的,哈哈哈哈)

CSS的伪类:是一种以冒号做前缀的关键字,比如:focus,当用户点击或者通过键盘tab键触发的事件。

例如:input :focus{background:yellow}就是当用户点击该input的时候背景颜色会变成黄色。

CSS的伪元素:它和伪类差不多,是一种以双冒号做前缀的关键字,比如::selection,用于在文档中使文本高亮。

例如:p::selection{color:white; background black;}

关于更多伪类和伪元素的详细信息你可以参考其他网站。

CSS组合器:

很多时候我们一种样式不是只用在一个元素上,那么就用到我们今天要看的CSS组合器。

讲解CSS组合器最好的例子就是对<table>加样式。

 (编写时最好按照规定的格式书写,这会让你的代码整齐易读,所以最好是刚刚开始学习的时候就养成好的习惯。我的格式会更倾向于在此文章中简洁,易读。)

<body>
<h1>为了演示CSS组合器</h1>
<table>
<tr>
<th>这是第一行</th>
<td colspan="2">1</td>
</tr>
  <tr>
<th>这是第二行</th>
<td>2.0</td>
<td>2.1</td>
</tr>
  </table>
</body>

组合器更重要的是看组合的两个元素的关系,我们用A和B来表示他们,但是组合可以是两个以上的,当然你也可以把几种形式结合起来。

1.形式一:A,B A和B没有关系 例如:h1,table { font: 20px } 

2.形式二:A B A是B的父节点(B是A的子节点 或 B是A的子节点的子节点)例如:table tr{ font: 20px } 或 table td{ font: 20px } 

3.形式三:A>B A是B的直接父节点 例如:table>tr{ font: 20px }  这个时候 table>td{ font: 20px } 就不可以了。

4.形式四:A+B A和B是连接的兄弟节点(A和B的父节点相同,且B紧跟A后)例如:th+td{ font: 20px }这里只修改了2.0的样式。

5.形式五:A~B A和B是兄弟节点(A和B的父节点相同,且B在A后)例如:th~td{ font: 20px }这里修改了th后的所有td。

至此我们才算是学完了CSS的选择器,可是你会不会好奇,我在一个页面用不同的选择器修改一个元素的样式,最终哪个样式会被使用呢?我们来看看把。

CSS样式之间的关系:

CSS的继承:子节点会继承父节点的所有样式,并且可以在父节点的样式上进行修改,并且不对父节点有影响(不是所有样式都会继承,font,color等会被继承,也有一些不被继承的样式)。例如:我给上面的表格<table>一个底色蓝色,这个时候我的表的每个单元格的底色都是蓝色,如果我想突出一个单元格,那我就把这个单元格的底色设置成红色,而整个表格的其他单元格还是蓝色。

解析哪个样式最终会被使用其实挺简单,无非就是几点

1.该样式是否重要

2.该样式的优先程度

3.还有就是你写代码的顺序。

一.CSS样式的重要性一般用!important修饰,把它放到你重要样式的后面。

例如:table tr{ font: 20px !important }

尽管!important很好用,但是它打破了CSS样式默认的规则,这会让调试CSS样式变得很难。

CSS样式默认的规则是:

用户代理样式表的声明 (浏览器在没有其他声明的默认样式)

用户样式表中的常规声明(用户设置的浏览器自定义样式)

作者样式表中的正常声明(web开发人员编写的样式)

作者样式表中的重要声明(web开发人员定义的!important)

用户样式表中的重要声明

二.该样式的优先级(权重),当不同选择器的样式设置有冲突时,会采用权重高的选择器设置样式。

首先要知道CSS选择器的优先级是用四个值衡量的。0,0,0,0.为了方便描述我们用千位,百位,十位,个位来形容它。

优先级:千位的>百位的>十位的>个位的

那么怎么知道样式的优先级是多少呢?规则是这样的。

1.行间样式(写在HTML标签中的样式):1,0,0,0.

2.ID选择器:0,1,0,0.

3.类选择器,属性选择器和伪类:0,0,1,0.

4.元素和伪元素:0,0,0,1.

5.通配选择器* :0,0,0,0.

以上是每发现一个就在相应位置加1.

另外!important是没有优先级的,但是它是最重要的,也就是说你优先级再高也要先用!important。

例如:#onaa #inaa a{color: red }这个选择器的优先级是0,2,0,1.因为它有两个类选择器和一个元素。

三.如果前面的比较都相同时,你的代码顺序将会是最后的防线。后面编写的规则将战胜先前编写的规则。



关于更多详细的CSS优先级和!important使用的相关资料可以参考下面的博客http://blog.csdn.net/lzgs_4/article/details/43446303

(推荐的链接和本人没有任何关系)


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值