系列文章目录
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
一、高级选择器
二、伪类选择器
三、背景、阴影、圆角边框
一、高级选择器
1、后代选择器
选择父元素中的子元素
代码示例:
<style>
ul li{
color:pink;
font-size:16px;
}
<style>
<ul>
<li>好想快点解封</li>
</ul>
注意:元素1属于父类,元素2属于子类;两者之间用空格隔开
2、子类选择器
格式:
元素1(父级)> 元素2(子类) {
属性1:属性值;
属性2:属性值;
}
<style>
ul > li{
color:blue;
font-size:16px;
}
</style>
<ul>
<li>好想快点解封</li>
</ul>
<ol>
<li>好想出去</li>
</ol>
注意:子类选择器只会选择最近一级的子元素
3、并级选择器
选择多组标签,同时为他们定义
格式:
元素1, 元素2 {
属性1:属性值;
属性2:属性值;
}
<style>
ul,ol{
color:blue;
font-size:16px;
}
</style>
<ul>
<li>好想快点解封</li>
</ul>
<ol>
<li>好想出去</li>
</ol>
**注意:
- 元素1与元素2之间用逗号隔开;
- 任何形式的选择器都可以作为并级选择器的一部分**
二、伪类选择器
1、伪类连接选择器
- a🔗选择未被访问的链接;
- a:hover:鼠标指针位于其上的链接;
- a:visited:选择已访问过的链接;
- a:active:鼠标选中但并未按下的链接;
<style>
a:hover{
color:rgb(255, 0, 0);
font-size: 16px;
text-decoration: none;
}
</style>
<a href="https://www.baidu.com/?tn=88093251_18_hao_pg">点击此处到百度</a>
注意:
- 为了确保链接伪类生效,尽量按顺序声明;
- a链接有默认样式,实际中需单独给其指定样式;
2、focus伪类选择器
用于选取获得焦点的表单元素,把获得光标的input元素选出来
格式:
input:focus{
属性1:属性值;
属性2:属性值;
}
三、背景、阴影、圆角边框
1、背景
-
背景颜色:background-color:transparent 透明(默认)
-
背景图片:background-image:none(无)url(地址)
-
背景平铺:background-repeat:repeat(默认平铺)
no repeat(不平铺) repeat-x(在x方向平铺) repeat-y -
背景图片位置:background-position
length:具体的数值(单位px)(第一个默认x方向)
position:left,center,right,top,bottom;(没有顺序)
混合单位:length与position的混合(第一个表示想方向的值) -
背景图像固定:background-attachment:scroll(滚动)随页面滑动而动
fixed(固定)不随页面滑动而动
<style>
div{
background: blue url(rcfvh.jpg) repeat scroll center center;
width:300px;
height :200px;
border-color: aqua;
}
</style>
<div> <div>
2、圆角边框
格式:
div{
border-radious:length(10px);
}
<style>
div{
border-radius: 10px;
border-color: blue;
border-style: solid;
width:200px;
height:100px;
}
</style>
<div> <div>
3、阴影
1、 盒子阴影
格式:
div{
box-shadow:10px;
}
属性值:
- h-shadow(水平阴影)必填
- v-shadow (垂直阴影)必填
- blur (模糊距离)可选
- spread (阴影尺寸)可选
- color (阴影颜色) 可选
- inset (内部阴影) outset(外部阴影)默认
2、文字阴影
text-shadow:
属性值:
- h-shadow(水平阴影)必填
- v-shadow (垂直阴影)必填
- blur (模糊距离)可选
- color (阴影颜色) 可选