首页 > 博客列表 > css引入方式与上下文选择器伪类结构相关

博主信息

博文 47

粉丝 3

访问量 50727

专题推荐

更多>

css引入方式与上下文选择器伪类结构相关

1.css三种引入方式

CSS引入三种方式:内部样式表、外部样式表、行内样式
内部样式：仅对当前页面的元素有效，使用style标签
外部样式：适用于所有引用了这个css样式表的html文档，使用link标签
行内样式：仅适用于当前页面中的指定的元素，使用style属性

内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css第一种引入方式：内部样式表</title>   
    <style>
        h1 {
            color: blue;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <h1>PHP中文网</h1>
</body>
</html>

演示截图
内部样式

外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css外部样式</title>
    <link rel="stylesheet" href="css/demo1.css">
</head>
<body>
    <h1>php中文网</h1>
</body>
</html>

演示截图

行内样式

   <h1 style="color: violet;">php中文网</h1>

演示截图

2. css选择器

css选择器分为三大类：

1.简单选择器

选择器	描述	示例
标签选择器	根据元素标签名称进行匹配	`li {...}`
类选择器	根据元素的class属性进行匹配	`.a {...}`
ID选择器	根据元素的ID属性进行匹配	`#a {...}`

标签选择器案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css简单选择器</title>
    <style>
        /* 标签选择器，返回一组 方法：li {...}*/
        li{
            color: violet;
        }
        /* 类选择器，返回一组 方法：.a {...} */
        .a {
            color: red;
            border: 1px solid black;
        }
        /* id选择器，返回一个 方法：#b {...} */
        #b {
            color: blue;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li class="a">test1</li>
        <li id="b">test1</li>
        <li class="a">test1</li>
        <li id="b">test1</li>
        <li>test1</li>
    </ul>
</body>
</html>

演示截图

3.上下文选择器

1.后代选择器：ul li中间加空格，选择当前元素的所有层级
2.子选择器：body>ul>li选择当前元素的父层级和子层级
3.同级相邻选择器：.a + li当前元素相邻的第一个兄弟元素
4.同级所有选择器：.a ~ li当前元素相邻的后面所有元素

实战案例

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上下文选择器</title>
    <style>
        /* 后代选择器 */
        ul li {
            background-color: violet;
        }
        /* 子元素选择器 */
        body>ul>li {
            background-color: yellow;
        }
        /* 同级相邻选择第一个兄弟元素 */
        .a + li {
            background-color: green;
        }
        /* 同级相邻选择后面所有兄弟元素 */
        .a ~ li {
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>test1</li>
        <li class="a">test1</li>
        <li>test1</li>
        <li>test1
            <ul>
                <li>tset2</li>
                <li>tset2</li>
                <li>tset2</li>
            </ul>
        </li>
        <li>test1</li>
    </ul>
</body>
</html>

演示截图

4.伪类选择器

结构伪类

选择器	描述	示例
`nth-of-type(an+b)`	匹配任意位置的子元素;<br>n全部n+3偏移量往后的所有元素;<br>2n或者even选择所有索引为偶数的元素;<br>2n-1或2n+1或者odd选择所有索引为奇数的元素	`ul li:nth-of-type(3){...}`
`:nth-last-of-type{an+b}`	反向获取任意位置的子元素	`ul li:nth-last-of-type(3){...}`
`:first-of-type`	选择第一个子元素	`ul li:first-of-type`
`:last-of-type`	选择最后一个子元素	`ul li:last-of-type`
`:only-of-type`	选择父元素下唯一的子元素	`ul li:only-of-type`

匹配任意位置的子元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 匹配任意位置的子元素 */
        ul li:nth-of-type(5){
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>tset1</li>
        <li>tset2</li>
        <li>tset3</li>
        <li>tset4</li>
        <li>tset5</li>
        <li>tset6</li>
        <li>tset7</li>
        <li>tset8</li>
        <li>tset9</li>
        <li>tset10</li>
    </ul>
</body>
</html>

演示截图

选择为偶数的元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 选择所有为偶数的元素 */
        ul li:nth-of-type(even){
            background-color: violet;
        }
    </style>
</head>
<body>
    <ul>
        <li>tset1</li>
        <li>tset2</li>
        <li>tset3</li>
        <li>tset4</li>
        <li>tset5</li>
        <li>tset6</li>
        <li>tset7</li>
        <li>tset8</li>
        <li>tset9</li>
        <li>tset10</li>
    </ul>
</body>
</html>

选择所有为奇数的元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 选择所有为奇数的元素 */
        ul li:nth-of-type(odd){
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>tset1</li>
        <li>tset2</li>
        <li>tset3</li>
        <li>tset4</li>
        <li>tset5</li>
        <li>tset6</li>
        <li>tset7</li>
        <li>tset8</li>
        <li>tset9</li>
        <li>tset10</li>
    </ul>
</body>
</html>

演示截图

快速匹配第一个元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 快速匹配第一个元素 */
        ul li:first-of-type{
            background-color: violet;
        }
    </style>
</head>
<body>
    <ul>
        <li>tset1</li>
        <li>tset2</li>
        <li>tset3</li>
        <li>tset4</li>
        <li>tset5</li>
        <li>tset6</li>
        <li>tset7</li>
        <li>tset8</li>
        <li>tset9</li>
        <li>tset10</li>
    </ul>
</body>
</html>

演示截图

快速匹配倒数第一个元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 快速匹配倒数第一个元素 */
        ul li:last-of-type{
            background-color: violet;
        }
    </style>
</head>
<body>
    <ul>
        <li>tset1</li>
        <li>tset2</li>
        <li>tset3</li>
        <li>tset4</li>
        <li>tset5</li>
        <li>tset6</li>
        <li>tset7</li>
        <li>tset8</li>
        <li>tset9</li>
        <li>tset10</li>
    </ul>
</body>
</html>

演示截图

选择父元素下唯一的子元素

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 选择父元素下唯一的子元素 */
        ul li:only-of-type{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>tset1</li>
        <li>tset2</li>
        <li>tset3</li>
        <li>tset4</li>
        <li>tset5</li>
        <li>tset6</li>
        <li>tset7</li>
        <li>tset8</li>
        <li>tset9</li>
        <li>tset10</li>
    </ul>
    <ul>
        <li>test1</li>
    </ul>
</body>
</html>