1215-css引入和选择器

1. css的三种引入方式

内部样式：将css写在style标签中。仅对当前html文档有效。
外部样式：适用于所有引入css文件的html文档。使用link标签、或在style标签内容中使用@import。
行内样式：将css赋予标签的style属性。

2. css选择器

标签选择器

<head>
<style>
    h1 {
        background-color: red;
    }
</style>
</head>
<body>
    <h1>标签选择器</h1>
</body>

属性选择器

<head>
<style>
    h1[class="ooo"] {
        background-color: red;
    }
    .ooo {
        background-color: red;
    }
    #ooo {
        background-color: red;
    }
</style>
</head>
<body>
    <h1 id="ooo" class="ooo">类选择器</h1>
</body>

上下文选择器

<head>
<style>
    /* 1. 后代选择器，所有层级 */
    ul li{
        background-color: red;
    }
    /* 子元素选择器：仅父子层级 */
    body>ul>li {
         background-color: red;
    }
    /* 同级相邻选择器：仅选中相邻的第一个兄弟元素 */
    li+li{
        background-color: red;
    }
    /* 同级所有选择器：选中与之相邻的后面所有的兄弟元素 */
    li~li{
        background-color: red;
    }
</style>
</head>
<body>
    <ul>
        <li>li-1</li>
        <li>li-2</li>
        <li>li-3</li>
        <li>li-4</li>
        <li>li-5
            <ul>
                <li>li-1</li>
                <li>li-2</li>
                <li>li-3</li>
                <li>li-4</li>
            </ul>
        </li>
    </ul>
</body>

伪类选择器

<head>
<style>
    /* 匹配任意位置元素： :nth-of-type(an+b)
    偶数：odd
    奇数：even
     */
ul li:nth-of-type(0n+3){
    color : red;
}
/* 反向获取任意元素： :nth-last-of-type(an+b) */
ul li:nth-last-of-type(-n+3){
    color : red;
}
/* 选择第一个子元素： :first-of-type
    选择最后一个子元素： :last-of-type
 */
 ul li:first-of-type{
    color : red;
}
 ul li:last-of-type{
    color : red;
}
/* 匹配父元素的唯一子元素： :only-of-type */
 ul li:only-of-type{
    color : red;
}
</style>
</head>
<body>
     <ul>
        <li>li-1</li>
        <li>li-2</li>
        <li>li-3</li>
        <li>li-4</li>
        <li>li-5</li>
    </ul>
</body>

1215-css引入和选择器

1215-css引入和选择器

1. css的三种引入方式

2. css选择器

相关文章