第四篇-选择器

我不想写标签了，开始写css了
(1.)
通配选择器

*{
    margin:0px;
    padding:0px;
    }

一般来说这个选择器里就这两行代码

（2.）
id选择器

<style>
#name{
    font：20px/20px 微软雅黑；
}
</style>
<p id="name">id选择器</p>

（3.）
类选择器

<style>
.name{
    font：20px/20px 微软雅黑；
}
</style>
<p class="name">类选择器</p>

(4.)
标签选择器

<style>
p{
    font：20px/20px 微软雅黑；
}
</style>
<p>类选择器</p>

id优先级最高，类次之，标签选择器优先级最低

(5.)
接下来就是三种选择器的组合类型了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .op{
                text-decoration: line-through;
                text-align:left ;
            }
            .dr{
                font-size: 100px;
            }
            #pp{
                color: blue;
                text-align: right;
            }
            p{
                font-family:"ink free",华文琥珀, 微软雅黑,宋体;/*样式属性可以有多个值，用逗号间隔。如果样式属性的属性值含有空格则用单引号或双引号，在双引号中用单引号*/
                font-size: 60px;/*字体名字不区分大小写*/
                text-align: center;
            }/*id选择器级别最高，类次之，标签最次*/
            *{
                margin: 0px;
                padding: 0px;
            }/*通配符选择器，*号代表所有标签*/
            #t1,.c2,b{
                color: aquamarine;
            }/*这就是分组选择器，分组选择器用逗号隔开各个选择器*/
        </style>
    </head>
    <body>
        <p class="op dr" id="pp" style="font-family: 微软黑,华文琥珀;">abc</p>
                                      <!--
                                        描述：class可以有多个值，中间以空格相隔,
                                        像这个就是受op和dr两个类选择器的影响
                                      -->
        <b>二柱子</b>  
        <i id="t1" class="c2">鸣人</i>

    </body>
</html>

分组选择器表示多个选择器共用一段代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            p #lp .io{
                color: red;
            }/*这就是后代选择器，由父代选择器，子父代选择器，子父代选择器..........，子代选择器构成，中间以空格相隔。跟分组不太一样*/
        </style>
    </head>
    <body>
        <p>
            <i id="lp">
                <b class="io">
                    5455
                </b>
            </i>
        </p>
        <b>123</b>
    </body>
</html>

后代选择器的控制很严格，用于精准控制某些样式

猜你喜欢