潭州学院html学习(day04)
一.毗邻选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧邻在另一元素后的元素,且两者有相同的父类
实例代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{padding:0;margin: 0;} 8 p{ 9 width: 100px; 10 height: 100px; 11 background-color: fuchsia; 12 } 13 .p1 p+p{ /* 毗邻选择器:选中p相邻的元素p */ 14 background-color: gold; 15 } 16 ul{ 17 background-color: red; 18 } 19 .p2 ul+li{ /*毗邻选择器:选中ul相邻的元素*/ 20 font-size: medium; 21 background-color: green; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="p1"> 27 <p >今天是2018年7月21号</p> 28 <p>今天是2018年7月21号</p> 29 </div> 30 <div class="p2"> 31 <ul> 32 <li>今天是2018年7月21号</li> 33 <li>今天是2018年7月21号</li> 34 <li>今天是2018年7月21号</li> 35 </ul> 36 </div> 37 </body> 38 </html>
二.伪类选择器
伪类:同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。
静态伪类和动态伪类
伪类选择器分为两种。
(1)静态伪类:只能用于超链接的样式。如下:
:link
超链接点击之前:visited
链接被访问过之后
PS:以上两种样式,只能用于超链接。
(2)动态伪类:针对所有标签都适用的样式。如下:
:hover
“悬停”:鼠标放到标签上的时候:active
“激活”: 鼠标点击标签,但是不松手时。:focus
是某个标签获得焦点时的样式(比如某个输入框获得焦点)
PS:以上三种样式,只能用于超链接。
超链接a标签
超链接的四种状态
a标签有4种伪类(即对应四种状态),要求背诵。如下:
:link
“链接”:超链接点击之前:visited
“访问过的”:链接被访问过之后:hover
“悬停”:鼠标放到标签上的时候:active
“激活”: 鼠标点击标签,但是不松手时。
对应的代码:
/*让超链接点击之前是红色*/
a:link{
color:red;
}
/*让超链接点击之后是绿色*/
a:visited{
color:orange;
}
/*鼠标悬停,放到标签上的时候*/
a:hover{
color:green;
}
/*鼠标点击链接,但是不松手的时候*/
a:active{
color:black;
在css中,这四种状态必须按照他特定的顺序写:a:link 、a:visited 、a:hover 、a:active
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } /*color: inherit;继承父级元素的字体颜色*/ /*text-decoration: none;去除下划线*/ a{color: inherit; text-decoration: none;} p{ width: 100px; height: 100px; background: #ccc; } /*伪类选择器 hover: 当鼠标移入移出的时候触发 */ .box1 a:hover{ color: deeppink; /*没有下划线*/ /*text-decoration: none;*/ /*有下划线*/ /*text-decoration: underline;*/ /*上划线*/ /*text-decoration: overline;*/ /*中划线*/ text-decoration: line-through; } .box2{ width: 200px; height: 200px; background: green; } .box2 p:hover{ background: deeppink; } /*其实是依赖于后代选择器实现的*/ .box2:hover p{ background: deeppink; } /*以下是错误的,因为box1不是box2的后代*/ .box2:hover .box1{} .box3{ width: 100px; height: 100px; background: darkblue; color: #fff; } /*伪类元素: 在元素内容前或者后插入元素(是行级元素) display: block; 将其他类型转为块级类型 content 为必须的属性且格式必须完整 content:''; 其解析出的效果基本等同于写入一个标签,因此,可以设置宽高,但默认是行级,需要转换为块级。 .box3:after或者.box3:before中的所有属性都是为伪类元素添加不影响使用伪类的元素 after常用于清除浮动时使用 */ .box3:before{ display: block; content: '我是小阳,'; background: deeppink; height: 40px; width: 60px } .box3:after{ display: block; content: ''; background: green; height: 40px; } </style> </head> <body> <div class="box1"> <a href="http://www.baidu.com">百度一下你就知道</a> </div> <div class="box2"> <p></p> </div> <!--<div class="box3"><span></span>我是小阳,我是box3,我是小鬼儿<span></span></div>--> <div class="box3">我是box3</div> </body> </html>
三.选择器的优先级
单个选择器的优先级:id选择器>类选择器>标签选择器
多个选择器:
id个数不等,id个数越多优先级越高
id个数相等,class类个数越多优先级越高
class类相等,标签选择器越多,优先级越高
总结:当你判断两个选择器的优先级的时候,先数id个数,id个数多的优先级高。如果id个数相等数class的个数,class类个数多的优先级高,如果class类的个数相等,看标签选择器的个数,标签选择器多的优先级别更高
实例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器的优先级</title> <style> *{padding: 0;margin: 0;} p{ width:100px; height: 100px; background-color: rebeccapurple; } #id1{background-color: fuchsia;} .box1{background-color: red} div{ width:150px; height:150px; } #id1 #id11{background-color: blue} #id1{background-color: green} p{background-color: cadetblue} .box1 p{ background-color: rebeccapurple; } div a p {background-color: pink;} a p{background-color: green} </style> </head> <body> <div class="box1" id="id1"> <p id="id11"></p> </div> <div class="box2"> <p></p> </div> <div class="box3"> <a href=""> <p></p> </a> </div> </body> </html>