css基础标签选择

css:

        1.使结构和样式分离

        2.便于后期维护

        3.提高了样式的可复用性

<!-- 行间样式:不推荐使用,优先级最高 -->

    <div style="width:300px;"></div>

<!-- 内部样式:大型门户网站的首页 -->

    <style>

        div {

            width: 200px;

        }

    </style>

<!-- 外部样式 -->

<link rel="stylesheet" href="style.css">

常见选择器

        id:

            数字/字母/_, 组成 ,首字符是字母,

            一个页面内标签的id 都是唯一的

        class:

            数字/字母/_,-, 组成 ,首字符是字母,a_b,a-b

            不同的标签可以有相同的类名

            同一个标签有多个类名  (空格隔开)

        tag:标签选择器

        id>class>tag

复合选择器

            后代选择器

            用空格隔开,

            被#list1  包裹  li

            选择 #list1 中的  li

#list1 li {

            background-color: pink;

        }

群组选择器:

            逗号隔开:满足  群组的任意一个选择器都可以被选中

           p,  div, #list1 span

          {

            color: red;

        }

子代选择器

   以>隔开,直接被 #list1 包裹的li

  #list1>li {

            border: 1px solid #000;

}

交集选择器:

              既是一个div 又有类名  bf         <div class="bf">......</div>

div.bf{

            font-size: 40px;

        }

通配符选择器

* {

            margin: 0;

            padding: 0;

        }

伪类选择器

：link (未访问的链接)                                        a:hover {

：visited(已访问的链接)                                                 color: pink;

：hover(鼠标悬停的状态)                                                    }

：active(激活的链接)（按下鼠标hi后方开之前的时间）

：link>:visited>:hover>:active

选择器权值

标签选择器：1

类选择器和伪类：10

id选择器：100

通配符选择器：0

行内样式：1000

权值看复合选择器加起来的权值，只数各个类的权值累加

相同权重,后面的覆盖前面的样式