CSS的选择器和优先级——之转生在异世界学前端

1.id选择器

id选择器具有唯一性，一个标签只能对应一个id，使用的时候加#号

    <style>
        #weiyi {
            font-weight: 800;
        }
    </style>
    <div id="weiyi">id选择器具有唯一性，一个标签只能对应一个id</div>

2.class选择器

class选择器又称类名选择器，一个标签可以有多个名字，多个标签也可以使用一个名字

使用的时候加英文字符 .

    <style>
    .a1{
    color:#888;
    }
    .a2{
    color#666;
    }
    </style>
    <div class="a1" class="a2">类名选择器或class选择器</div>
    <div class="a1">类名选择器或class选择器</div>

3.标签选择器

直接用使用标签添加样式

    <style>
    div{
    color:#888;
    }
    </style>
    <div>标签选择器</div>

4.通配符选择器

给页面所有标签内容设置css样式

    <style>
    *{
    color:#666;
    }
    </style>

CSS的优先级是! important>行内样式>id选择器>class选择器>标签选择器>通配符选择器

行内样式直接在代码中添加style属性

! important是最重要的优先级最高加在属性的末尾

    <style>
     div {
        color: skyblue !important;
    }
    </style>

伪类选择器

link设置未访问的链接

visited设置已经访问的链接

hover鼠标移入元素上的样式   hover不仅能作用于连接，还能作用于普通元素标签

active设置选定的链接       

        <style>
        /* 伪类选择器 */
        /* 1.未访问的链接 */
        a:link {
            color: black;
        }

        /* 2.已访问的链接 */
        a:visited {
            color: pink;
        }

        /* 3.鼠标移入到连接上 */
        a:hover {
            color: orange;
        }

        /* 4.选定的链接 */
        a:active {
            color: gold;
        }

    </style>
    <a href="http:www.jingdong.com">京东官网</a>