day48 前端高级选择器优先级

复习

1. 基础选择器
标签选择器(div) | 类选择器(.div1) | id选择器(#div2)
<div class="div1" id="div2"></div>
统配选择器 | !important | 行间式

2. 选择器优先级
通常作用范围越精确优先级越高
!important > 行间式 > id > class > 标签 > 统配

3. 长度与颜色
px in mm cm em rem vw vh
red #FF0000 rgb(255, 0, 0) rgba(255, 0, 0, 1)

4.标签的分类
主内容: 双标签, <div></div>
主功能: 单标签, <img />(结束标识符可以省略)

5. display
通过显示方式来分类
inline: 同行显示, 不支持宽高, 宽高有内容撑开
block: 异行显示, 支持所有css样式, 设置宽高一定为设置的宽高(解决block的默认宽高)
inline-block: 同行显示, 支持所有css样式, 宽高一般有内容撑开, 但通过会设置宽或高,那么 高或宽会等比缩放(img)

6. 嵌套关系
inline套inline
inline-block不建议嵌套任意标签
block可以嵌套任意标签(hn,p一般嵌套inline标签)

7. 盒模型
margin + border + padding + content(w x h), 四个部分区域

8. 盒模型布局
1.margin-top | margin-left 完成自身布局
2.margin-right | margin-bottom 影响兄弟布局

坑:
1. 上兄弟的下(bottom)下兄弟的上(top)重叠, 取大值
2. 父级和第一个显示子级top重叠, 取大值 => 解决, 给父级加padding-top | (父级加border-top)

block设置宽高
一定采用设置的宽高

block默认宽高:
1.没有设置宽, 宽自适应父级的宽(子级的border+padding+width = 父级的width)
2.没有设置高, 高由内容撑开


前端写数字或者字母,不使用空格会被认为是一个字母或数字,中间可以加空格

margin-left:auto,自动值,自适应,将剩余空间给左边使用

盒子总结

block:
默认宽高
1.没有设置宽, 宽自适应父级的宽(子级的border+padding+width = 父级的width)
2.没有设置高, 高由内容撑开

设置了宽高
一定采用设置的宽高

显示宽高
border+padding+content

自身布局
margin-top | margin-left

兄弟布局
margin-bottom | margin-right

父级水平居中
margin: 0 auto;

与inline相关的盒子
vertical-align

盒子水平居中

.sup {
        width: 500px;
        height: 100px;
        background-color: orange;
        /*屏幕水平居中*/
        /*margin-left: calc((100% - 500px) / 2);*/
        /*屏幕水平居右*/
        /*margin-left: auto;*/
        margin: 0 auto;
    }
.sub {
        width: 50px;
        height: 50px;
        background-color: red;
        /*父级水平居中*/
        /*margin-left: calc((500px - 50px) / 2);*/
        /*父级水平居右*/
        /*auto自适应父级可利用的剩余宽度*/
        /*margin-left: auto;*/
        /*能不能通过自适应完成水平居中*/
        margin-left: auto;
        margin-right: auto;
        margin: 0 auto;
    }
    <div class="sup">
    <div class="sub"></div>
    </div>

今日内容

字体|文本相关属性样式
边界圆角属性样式
系统默认样式的清除操作(reset操作)，（body|ul|p|a|hn等）
高级选择器
伪类选择器，a的四大伪类
背景属性样式

文本属性操作

颜色,大小,字重,行高,水平居中方式

text-align: center; # 水平居中方式
color: red; # 字体颜色
font: 900 30px/120px "STSong"; # 字重 大小/行高 字族

# 了解
# em(自身->父->html) | rem(html)
text-indent: 2em;

# 字划线
# underline | line-through | overline
text-decoration: overline;

font-family:"STSong","微软雅黑",可以设置备用字体
a标签字体大小不是继承
最小字体大小只能达到12px

.p1 {
    /*颜色 大小 字重 字族 行高 水平居中方式*/
    color: red;
    font-size: 50px;
    /*100~900| normal | lighter | bold*/
    font-weight: bold;
    /*字族可以设置备用字体*/
    font-family: "STSong", "微软雅黑";
    /*将行高值以盒子高度一致*/
    line-height: 200px;
    
    /*left | center | right*/
    /*text-align: center;*/
}
.p1 {
    /*简写*/
    /*text-align: center;*/
    color: red;
    font: normal 30px/200px "STSong", "微软雅黑";
}
.p1 {
    font-size: 50px;
    /*em就是一个字的大小*/
    text-indent: 2em;
    /*underline | line-through | overline*/none
    text-decoration: overline;
}
html {
    /*rem: r => root 只和html字体大小关联*/
    font-size: 50px;
}
.sup {
    /*最小字体只能到达12px*/
    font-size: 12px;
}
.sub 
<p class="p1">
    一二三四五
</p>
<div class="sup">
    <div class="sub">呵呵</div>
</div>

reset操作

what|why: 大多系统预定义标签, 有默认样式, 不满足实际开发需求, 反倒影响布局, 通常在开发前, 将需要用到的预定义标签的默认样式清除, 该操作就称之为 reset操作

body, h1, h6, p {
	margin: 0;
}
ul {
    margin: 0px;
    padding: 0;
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
}

高级选择器

1.群组选择器
/*1.群组选择器:
    同时控制多个
    选择器之间用逗号隔开
    每一个选择器位均可以替换为任意基础选择器或高级选择器
    */
.div1, .p1 {
        color: red;
    }

2.后代子代选择器
通过关系层次控制一个目标选择器
>代表父子关系 | 空格代表后代关系(后代关系不一定是父子,还可能是爷孙关系)
    .sup1 > .sub {
        color: orange;
    }
    /*sub是body的后代,但不是子代*/
    body .sub {
        color: pink;
    }

3.兄弟选择器
通过关系层次控制一个目标选择器
上兄弟可以控制下兄弟,下兄弟不能控制上兄弟
+,~
+:相邻
~:兄弟,中间可以跨越几个相邻标签
    /* + 相邻 */
    .b2 + .b3 {
        color: blueviolet;
    }
    /* ~ 兄弟 */
    .b1 ~ .b3 {
        color: brown;
    }
4.伪类选择器 - 位置
:nth-child(3)
3n-1,可以表示第3,6,9个数
    ul:nth-child(10) > li:nth-child(2n) {
        color: green;
    }

5.多类
.d.dd {

}

<div class="div1">123</div>
<p class="p1">456</p>
<div>3333</div>
<div class="sup1">
    <div class="sub">sub</div>
</div>
<div class="sup2">
    <div class="sub">sub</div>
</div>

<div class="b3">b3 333</div>
<div class="b1">001</div>
<div class="b2">002</div>
<div class="b3">b3 003</div>

<ul>
    <h3>标题</h3>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>
<ul>
    <h3>标题</h3>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>
<div>
    <p>0001</p>
    <p>0002</p>
    <p>0003</p>
</div>

高级选择器优先级

优先级和个数(权重)相关
基础选择器优先级占主导: id 无限大于 class 无限大于 标签
选择器优先级相同时, 和顺序有关
高级选择器类型不会影响优先级
伪类选择器相当于class

<style>
    .div {
        font-size: 100px;
        color: red;
    }

    div > .div {
        color: orange;
    }
    div ~ div ~ .div {
        color: brown;
    }
    div .div {
        color: pink;
    }

    .div:nth-child(3) {
        color: yellowgreen;
    }
    .sup .div {
        color: darkgreen;
    }
</style>
<style>
    /*多类名*/
    .div.div1 {
        color: black;
    }
    /* div.div#dd.div1 */
</style>    

<div>
    <div class="sup">
        <div>
            <div>
                <div></div>
                <div></div>
                <div class="div div1" id="dd">123</div>
            </div>
        </div>
    </div>
</div>

边界圆角

左上为第一个角,顺时针赋值,不足找对角
先横后纵的取像素值,然后画圆角
可以横纵向分离:50px(横向) 10px (第一个角横向50px,第二个角横向10px,第三个50px,第四个10px) / 150px(纵向)

<style>
    div {
        width: 300px;
        height: 300px;
        background-color: red;
    }
    div {
        /*左上为第一个角, 顺时针赋值, 不足找对角*/
        /*border-radius: 30px 60px;*/

        /*border-radius: 150px;*/
        /*border-radius: 50%;*/

        /*横向第一个角50px, 第二个角10px, 不足找对角*/
        /*纵向均是150px*/
        border-radius: 50px 10px / 150px;
    }
</style>
<div></div>

a标签的四大伪类

:link  链接初始状态 
:hover  鼠标悬浮状态 *****
:visited  链接访问后的状态 
:active  鼠标按下时的状态 ***
字体属性还是靠继承,但是a标签的四大伪类属性对应了不同的颜色,所有它默认不继承父级的颜色

<style>
    /*链接初始状态 | 鼠标悬浮状态 | 链接访问后的状态 | 鼠标按下时的状态*/
    /*a:link {*/
        /*color: black;*/
    /*}*/

    /*a:hover {*/
        /*cursor: pointer;*/
    /*}*/

    /*a:visited {*/
        /*color: yellow;*/
    /*}*/

    /*a:active {*/
        /*color: green;*/
    /*}*/
    div标签只有两个伪类状态会生效/*鼠标悬浮状态 | 鼠标按下时的状态*/
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    div:hover {
        background-color: yellowgreen;
        cursor: pointer;
    }

    div:active {
        background-color: red;
    }

</style>

背景图片之精灵图

div {
	background: url("img/bg.png") no-repeat 10px 20px;
	图片地址 不平铺 x轴偏移 y轴偏移
}
精灵图操作本质: 控制背景图片的位置
backgroud-position-x
backgroud-position-y
div:hover {
	backgroud-position-y: -20px;


<style>

    .div {
        width: 500px;
        height: 500px;
        border: 1px solid black;
    }
    .div {
        background-image: url("img/001.png");
        /*平铺: repeat-x | repeat-y | repeat | no-repeat*/
        background-repeat: no-repeat;
        /*背景图片位置*/
        /*水平: left|center|right  垂直:top|center|bottom*/
        background-position: -200px 50px;
    }
    .div:hover {
        transition: 2s;
        background-position-x: center;
    }
</style>

精灵图案例

<!DOCTYPE html>

<head> <meta charset="utf-8"> <title>Title</title> <style> a { color: #333; text-decoration: none; } h1 { width: 500px; height: 100px; border: 1px solid black; } h1 a { width: 500px; height: 100px; display: block;

background: url("img/bg.png") no-repeat 0 -150px;
    }
    h1 a:hover {
        background-position-y: -250px;
    }
</style>
<style>
    .li {
        width: 157px;
        height: 48px;
        border: 1px solid black;
        background: url("img/bg.png") no-repeat -155px 0;
    }
    .li:hover {
        cursor: pointer;
        background-position-y: -48px;
    }
</style>
</head>
<body>
<h1><a href=""></a></h1>

<div class="li"></div>

</body>
</html>