写给具有CSS基础的学者,在我初学时也四处碰壁因为有更多分享的人才使我深入了解。
在你阅读这篇文章时,你需要具有CSS基础——“选择器”概念,如果你不太清楚这可能对你的阅读理解有些困扰。
1.重叠状态[待改]
重叠状态,指A状态中的B状态,通常有A-a状态和B-a状态、A-a状态和B-b状态、A-b状态和B-a状态、A-b状态和B-b状态;你可以在这里这样去理解,假如水杯是圆形,水平面也是圆形既是A-a状态和B-a状态,如果水杯被拿起那边此时水杯为正方形,水平面是圆形(假设)那么此刻就是概念中的A-b状态和B-a状态。
所强调的是CSS实际上可以在A标签的hover状态下给内部标签(任意)设置在A标签hover状态下的内部标签状态(样式)。
我们直接上CSS和HTML
.div{width:100px}
.div h1{color:#000}
.div:hover h1{color:red}
<div class="div"><h1>h1</h1><p>text</p></div>
请注意你在鼠标移动到div标签中内部的h1标签执行了“.div:hover h1” 这就是重叠状态,因此实现在html结构的不变状态下,改变页面布局;可以在CSS中定义不同的声明改变状态。
2.复类和伪类共存
我们知道可以使用复类添加指针在上方时的状态和点击的状态以及点击过的状态;利用伪类在标签内部插入一个伪标签的方法;实际上复类和伪类可存在一个选择器中,它们的写法是“对象—》复类—》伪类”(注意顺序,如果写成“对象—》伪类—》复类”是不合法)。
一个例子来解释它们:
.div:hover:before{width:100px}
<div class="div"></div>
注意当你的鼠标指针移动到该div上,在该标签内部创建一个伪标签,这取决于是在前插入还是后插入(也可以同时)。
3.选择若干个类的标签
指标签内符合同时具有多个样式类要求的标签,我们以一个更加实际例子说:假如某标签内有div类和div2类,CSS的选择方法是:
.div.div2{color:red}
如果这个标签带div类和div2类以及一个div3类,那么这个标签就不符合上方的“*.div.div2”