css复杂选择器，权重计算问题，css基础属性

css复杂选择器，权重计算问题，css基础属性

复习

css权重	-
!importtant	infinity
行间样式	1000
id	100
class/属性/伪类	10
标签/伪元素	1
通配符	0

知识点总结

• 父子选择器,也叫派生选择器
• 父子选择器不一定要用标签选择器写，只要父子关系成立就行
• 父子选择器不一定是直接的父子关系，间接的也可以
• 直接子元素选择器
• 浏览器从右向左遍历父子关系
• 并列选择器:用多个限制条件选中一个元素。注意：不加空格
• 只要写在同一行的选择器，将权重值相加
• 当权重相同时，后面的将会覆盖前面的
• 在css代码中,!important的权重是infinity,是一个常数。infinity+1>infinity
• 分组选择器
• css基础属性

知识点详解

1. 父子选择器不一定要用标签选择器写，只要父子关系成立就行

    <div>   
        <span>hotpink</span> 
    </div> 
    <span>blackpink</span>

    <div>
        <strong>
            <em>ImageDragon</em>
        </strong>
    </div>
    <em>Coldplay</em>

    <div class="wrapper">
        <strong class="box">
            <em>Sold out</em>
        </strong>
    </div>

/* 父子选择器 派生选择器 */
/* 父子选择器不一定要用标签选择器写，只要父子关系成立就行 */
div span {
      background-color: hotpink;
  }
div strong em {
    background-color: indigo;
}
.wrapper .box  em{
    background-color: lightcoral;
}

2. 父子选择器不一定是直接的父子关系，间接的也可以

    <div>
        <em>1</em>
        <strong>
            <em>2</em>
        </strong>
    </div>

/* 父子选择器不一定是直接的父子关系，间接的也可以 */
div em{
    background-color: lightgreen;
}

3. 直接子元素选择器

    <div>
        <em>1</em>
        <strong>
            <em>2</em>
        </strong>
    </div>

/* 直接子元素选择器 */
div > em {
    background-color: limegreen;
}

4. 浏览器从右向左遍历父子关系

    <section>
        <div>
            <p>
                <a>
                    <span></span>
                </a>
            </p>
            <ul>
                <li>
                    <a>
                        <span>
                            <em>1</em>
                        </span>
                    </a>
                </li>
            </ul>
        </div>

        <a>
            <p>
                <em>2</em>
            </p>
            <div></div>
        </a>
    </section>

/* 浏览器从右向左遍历父子关系 */
section div ul li a em {
    background-color: maroon;
}

5. 并列选择器:用多个限制条件选中一个元素。注意: 不加空格

    <div>1</div>
    <div class="demo">2</div>
    <p class="demo">3</p>

/* 并列选择器:用多个限制条件选中一个元素。注意：不加空格*/
div.demo {
    background-color: mediumspringgreen;
}

    <div class="wrapper">
        <div class="content">
            <em class="box" id="only">1</em>
        </div>
    </div>

#only {
    background-color: orange;
} */
.content em {
    background-color: orangered;
}
.wrapper > .content > .box {
    background-color: orchid;
}
em.box {
    background-color: grey;
}

6. 只要写在同一行的选择器，将权重值相加

    <div class="classDiv" id="idDiv">
        <p class="classP" id="idP">1</p>
    </div>

/* 只要写在同一行的选择器，将权重值相加 */
#idDiv p{
    background-color: hotpink;
}
/* id + 标签: 100 + 1 = 101 */

.classDiv .classP {
    background-color: lawngreen;
}
/* 类 + 类: 10 + 10 = 20 */

div .classP#idP {
    background-color: lightseagreen;
}
/* 标签 + 类 + id = 1 + 10 + 100 = 111 */

7. 当权重相同时，后面的将会覆盖前面的

/* 当权重相同时，后面的将会覆盖前面的 */
div .classP#idP {
    background-color: lightseagreen;
}
/* 标签 + 类 + id = 1 + 10 + 100 = 111 */

#idDiv p.classP{
    background-color: hotpink;
}
/* id + 标签 + 类: 100 + 1 + 10 = 111 */

8. 在css代码中,!important的权重是infinity,是一个常数。infinity+1>infinity

/* 在css代码中,!important的权重是infinity,是一个常数。infinity+1>infinity */
div#idDiv p.classP{
    background-color: hotpink!important;
}
/*标签 + id + 标签 + 类:1 + 100 + 1 + 10 = 112 */

div .classP#idP {
    background-color: lightseagreen!important;
}
/* 标签 + 类 + id = 1 + 10 + 100 = 111 */

9. 分组选择器

    <em>1</em>
    <strong>2</strong>
    <span>3</span>

/* 分组选择器 */
em,
strong,
span{
    background-color:yellowgreen;
}

    <div class="demo1">1</div>
    <div class="demo2">2</div>

/* 分组选择器 */
/* .demo1 {
    width: 100px;
    height: 100px;
    background-color: tomato;
}

.demo2 {
    width: 100px;
    height: 100px;
    background-color: aqua;
} */

.demo1,
.demo2 {
    width: 100px;
    height: 100px;
}

.demo1 {
    background-color: tomato;
}

.demo2 {
    background-color: aqua;
}

10. css基础属性

    <div>花都监狱</div>
    <strong><em>花都监狱</em></strong>

div {
    font-size: 50px;    /* 设置字体大小是设置字体的高 */
    font-weight: bold;
    /* lighter normal bold bolder 100/200/300.../800/900 */
    font-style: italic;
    font-family: arial;
}

strong {
    font-size: 50px;
}

    <div></div>

div {
    font-size: 50px;    /* 设置字体大小是设置字体的高 */
    font-weight: bold;
    /* lighter normal bold bolder 100/200/300.../800/900 */
    font-style: italic;
    font-family: arial;
    color: rgb(255, 255, 255);
    /* 1. 纯英文单词
    2. 颜色代码
    r       g      b
    00-ff   00-ff   00-ff
    # ff4400    代表同一个原色的每两位重复，可以简写成
    # f40
    3. 颜色函数 */
    border:200px solid black;
    /* 给容器加个外边框 */
    /* border:border-width border-style border-color; */
    /* border-width: 1px;
    border-style: dashed; */
    width: 0px;
    height: 0px;
    border-left-color:black;
    border-top-color: transparent;
    border-right-color: transparent;
}

strong {
    font-size: 50px;
}