python css功能补充讲解

Posted 2021-02-05 崽崽blog

###########总结####

css高级选择器

*子选择器*
子选择器用 大于号
.box1>.box2{
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.box1>div{
    width: 100px;
    height: 100px;
    background-color: yellow;
}

.box1>.box2>.box3{
    width: 100px;
    height: 100px;
    background-color: green;
}
.box1>.box2>p{
    color: red;
}

后代选择器
后代选择器用 空格
.box2 p{
    color: green;
}

通用选择器
*{
    margin: 0;
}

并集选择器  or的意思
body, h1, p{
    margin:0;
}

交集选择器
p.box1{
    color: green;
}
p#box{
    color: red;
}

属性选择器
[type]{
    color:red;
}
[type=‘submit‘]{
    color:red;
}

[type=‘text‘]{
    color: green;
}

[for^=‘test‘]{
    color:red;
}

伪类选择器

/*未被访问的链接*/
a:link{
    color: green;
}

/*访问过的链接*/
a:visited{
    color: red;
}

/*鼠标悬浮的时候的颜色*/
a:hover{
    color:blue;
}

/*鼠标按下时的样式*/
a:active{
    color: yellow;
}
################
ul li:first-child{#选择第一个孩子
    color: green;
}

ul li:last-child{ #选择最后一个孩子
    color: yellow;
}

ul li:nth-child(0){#选择指定的孩子
    color: red;
}

ul li:nth-child(3n){#间隔
    color: red;
}
#################

p:first-letter{#选择第一个字符内容
    font-size: 32px;
    color: red;
}
p:before{#在标签前边添加一个标签内容
    content: ‘alex‘;
}
p:after{#在标签后面添加一个标签内容
    content: ‘叫小宝宝‘;
}

继承性
字标签可以继承父标签的样式: color, font-, text- line-

层叠性
(选择器权重一样的时候)后边添加的样式会覆盖前边的样式

权重
id 权重100
类 权重10
标签 权重 1
!important 权重无限大

都有!important 的时候,比较权重

<div id=‘box1‘ class="wrap1">
    <div id="box2" class="wrap2">
        <div id="box3" class="wrap3">
            <p>再来猜猜我是什么颜色？</p>
        </div>
    </div>
</div>

.box1{
    color: blue;
}

.box1 p{
    color: red;
}

p{
    color: yellow;
}

#pid{
    color: green;
}


.pclass{
    color: blue;
}

权重问题

/*2 0 1*/
#box1 #box2 p{
    color: yellow;
}

/*1 1 1 */
#box2 .wrap3 p{
    color: red;
}

/*1 0 3*/
div div #box3 p{
    color: purple;
}

/*0 3 1*/
div.wrap1 div.wrap2 div.wrap3 p{
    color: blue;
}


/*权重相同的*/
/*1 1 1 */
#box1 .wrap2 p{
    color: red;
}

/*1 1 1 */
#box2 .wrap3 p{
    color: yellow;
}

/*2 1 0 */
#box1 #box2 .wrap3{
    color: red;
}
/*1 1 0 */
.wrap1 #box2{
    color: green;
}


/*2 0 0 */
#box1 #box2{
    color: red ;
}

/*1 2 0 */
.wrap1 #box2 .wrap3{
    color: green;
}


#box1 #box2 .wrap3{
    color: red !important;
}

#box2 .wrap3{
    color: blue !important;
}

#box3{
    color: yellow;
}