css基础：简单的选择器、伪类选择器与前端组件样式模块化知识 -

选择器id、class、tag

优先级id>class>tag

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* id选择器,优先级大于class与tag,h1为红色*/
        h1#p11.p1{color: red}
        h1.p1{color: blue}
        h1{color: green}
        /* class选择器,优先级大于tag,h2为蓝色*/
        h2.p2{color: blue}
        h2{color: green}
        /* h3为绿色*/
        h2{color: green}
    </style>
</head>
<body>
    <h1 class="p1" id="p11">77777</h1>
    <h2 class="p2" id="p22">77777</h2>
    <h2 class="p3" id="p33">77777</h2>
</body>
</html>

效果如图

简单的前端组件样式模块化

dome.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--引入文件index.css-->
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <header>首</header>
    <main>身</main>
    <footer>尾</footer>
</body>
</html>

index.css

@import url(header.css);
@import url(main.css);
@import url(footer.css);

header.css

header{min-height: 3em;background-color: red;}

main.css

nain{min-height: 5em;background-color: blue;}

footer{min-height: 4em;background-color: green;}

伪类选择器的使用

deom.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
    <ul class="list">
        <li>7777</li>
        <li>7777</li>
        <li>7777</li>
        <li>7777</li>
        <li>7777</li>
        <li>7777</li>
    </ul>
    <ul>
        <li>888</li>
    </ul>
</body>
</html>

css.css

/*第一个li*/
.list > li:first-of-type {
  background-color: red;
}
/*第二个li*/
.list > li:nth-of-type(2) {
  background-color: yellow;
}
/*最后一个li*/
.list>li:last-of-type{
    background-color: blue;
}
/*倒数第三个li*/
.list>li:nth-last-of-type(3){
    background-color: green;
}
li:only-of-type{
    background-color: skyblue;
}