前端第三次预习

高级选择器

后代选择器

ol li{
/*选择的是ol标签里的li标签的内容
ol和li之间必须用空格隔开
元素也可以是爷孙关系*/
}

子元素选择器

ol>li {
	/*ol和li元素间必须用>连接
	必须是父子关系的元素*/
}

并集选择器

div,p {
	/*元素之间需用'，'连接*/
}

伪类选择器

链接伪类
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择所有鼠标针位于其上的链接
a:active 选择所有活动链接（鼠标按下未弹起的链接）
:focus伪类链接
一般情况用于input类表单元素

input:focus {
	background: red;
}

背景、阴影、圆角边框

背景background
背景颜色：background-color
背景图片：background-image
背景平铺：background-repeat
横铺：repeat-x
纵铺：repeat-y
横纵铺：repeat
背景位置：background-position
top/center/bottom/left/right
精确位置，用x,y确定
背景图像固定：background-attachment
滚动：scroll
固定：fixed
背景复合属性：
颜色；地址；平铺；滚动；位置
没有顺序要求
背景半透明：background
rgba(0,0,0,0.3)前三个为颜色，最后一个为透明度
阴影
盒子阴影：box-shadow

h-shadow	必需，水平阴影位置，允许负值
v-shadow	必需，垂直阴影位置，允许负值
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色
inset	可选，外部阴影改为内部阴影

div {
	box-shadow: 10px 10px 10px 4px blue inset;
	}

文字阴影：text-shadow

h-shadow	必需，水平阴影位置，允许负值
v-shadow	必需，垂直阴影位置，允许负值
blur	可选，模糊距离
color	可选，阴影颜色

圆角边框
原理：半径原理
border-radius: 10px/50%;

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: rgb(12, 85, 138);
            border-radius: 10px;
            margin: 20px;
        }
        .one{
            width: 100px;
            height: 20px;
            border-radius: 10px;
        }
    </style>
  

 <div>网页</div>
   <div class="one">网页</div>

border-radius: 10px;四个角都是10px
border-radius: 10px 20px;左上和右下是10px,其余是20px
border-radius: 10px10px 10px 10px;从左上开始，顺时针
border-top-left-radius: 10px;