首页 > 博客列表 > CSS选择器权重的原理与计算方式与结构伪类

博主信息

博文 19

粉丝 0

访问量 17211

专题推荐

更多>

1.CSS选择器

1.1CSS选择器的四种写法

1.1.1 父子关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
              /* 父子关系 */
              .item> .in
              {
                color: rgb(231, 22, 224);
                border: 1px rgb(0, 0, 0) solid;
              }
    </style>
</head>
<body>
    <!-- 父子关系:div与p标签 -->
    <div class="item">
        <p class="in">我不喜欢CSS1</p>
        <p class="in">我不喜欢CSS2</p>
        <p class="in">我不喜欢CSS3</p>
        <ul class="list">
            <li class="listitem">我不想学PHP</li>
            <li class="listitem">我不想学PHP</li>
            <li class="listitem">我不想学PHP</li>
            <li class="listitem">我不想学PHP</li>
            <li class="listitem">我不想学PHP</li>
        </ul>
        <p class="in">我不喜欢CSS4</p>
        <p class="in">我不喜欢CSS5</p>
        <p class="in">我不喜欢CSS6</p>
    </div>
</body>
</html>

代码运行效果如下：

" class="reference-link">

1.1.2 后代关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
              /* 后代关系 */
              .item .in
              {
                background-color: red;
              }
    </style>
</head>
<body>
    <!-- 父子关系:div与p标签 -->
    <div class="item">
        <p class="in">我不喜欢CSS1</p>
        <p class="in">我不喜欢CSS2</p>
        <p class="in">我不喜欢CSS3</p>
        <ul>
            <li class="in">我不想学PHP</li>
            <li class="in">我不想学PHP</li>
            <li class="in">我不想学PHP</li>
            <li class="in">我不想学PHP</li>
            <li class="in">我不想学PHP</li>
        </ul>
        <p class="in">我不喜欢CSS4</p>
        <p class="in">我不喜欢CSS5</p>
        <p class="in">我不喜欢CSS6</p>
    </div>
</body>
</html>

代码运行效果如下：

1.1.3 兄弟关系：同级关系——>同级上下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
              /* 链式语法 */
              .item>.in.list{
                background-color: green;
              }
              /* 兄弟:+* */
              .item>.in.list+*{
                background-color: green;
              }
    </style>
</head>
<body>
    <!-- 父子关系:div与p标签 -->
    <div class="item">
        <p class="in">我不喜欢CSS1</p>
        <p class="in">我不喜欢CSS2</p>
        <p class="in">我不喜欢CSS3</p>
        <ul>
            <li class="in">我不想学PHP</li>
            <li class="in">我不想学PHP</li>
            <li class="in">我不想学PHP</li>
            <li class="in">我不想学PHP</li>
            <li class="in">我不想学PHP</li>
        </ul>
        <p class="in list">我不喜欢CSS4</p>
        <p class="in">我不喜欢CSS5</p>
        <p class="in">我不喜欢CSS6</p>
    </div>
</body>
</html>

代码运行效果如下：

" class="reference-link">

1.1.4 所有：同级关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
              /* 链式语法 */
              .item>.in.list{
                background-color: green;
              }
              /* 兄弟:+* */
              .item>.in.list+*{
                background-color: green;
              }
              /* 所有: ~ */
              .item>.in.list~*{
                background-color: green;
              }
    </style>
</head>
<body>
    <!-- 父子关系:div与p标签 -->
    <div class="item">
        <p class="in">我不喜欢CSS1</p>
        <p class="in">我不喜欢CSS2</p>
        <p class="in">我不喜欢CSS3</p>
        <ul>
            <li class="in">我不想学PHP</li>
            <li class="in">我不想学PHP</li>
            <li class="in">我不想学PHP</li>
            <li class="in">我不想学PHP</li>
            <li class="in">我不想学PHP</li>
        </ul>
        <p class="in list">我不喜欢CSS4</p>
        <p class="in">我不喜欢CSS5</p>
        <p class="in">我不喜欢CSS6</p>
        <p class="in">我不喜欢CSS7</p>
        <p class="in">我不喜欢CSS8</p>
        <p class="in">我不喜欢CSS9</p>
    </div>
</body>
</html>

代码运行效果如下:

" class="reference-link">

1.2 选择器-伪类

1.2.1 用伪类获取第一个和最后一个item

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类</title>
    <style>
        /* 伪类-匹配第一个class */
        /* .list > p.first {
            background-color: rgb(233, 0, 0);
        } */
        /* 伪类获取第一个和最后一个item */
        .list > p:first-of-type {
            background-color: rgb(233, 0, 0);
        }
        .list > p:last-of-type {
            background-color: rgb(0, 255, 17);
        }
    </style>     
</head>
<body>
    <div class="list">
        <p class="item first">paragraph1</p>
        <p class="item">paragraph2</p>
        <p class="item">paragraph3</p>
        <p class="item">paragraph4</p>
        <p class="item">paragraph5</p>
        <p class="item">paragraph6</p>
        <p class="item">paragraph7</p>
        <p class="item">paragraph8</p>
        <p class="item">paragraph9</p>
        <p class="item">paragraph10</p>
    </div>
</body>
</html>

代码运行效果如下:

1.2.1 用伪类获取第一个和最后一个item

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类</title>
    <style>
        /* 伪类获取前三个item */
        /* 公式=an+b  */
        .list > p:nth-of-type(-n+3) {
            background-color: rgb(233, 0, 0);
        }
        .list > p:nth-last-of-type(-n+3){
            background-color: rgb(0, 255, 17);
        }
    </style>     
</head>
<body>
    <div class="list">
        <p class="item first">paragraph1</p>
        <p class="item">paragraph2</p>
        <p class="item">paragraph3</p>
        <p class="item">paragraph4</p>
        <p class="item">paragraph5</p>
        <p class="item">paragraph6</p>
        <p class="item">paragraph7</p>
        <p class="item">paragraph8</p>
        <p class="item">paragraph9</p>
        <p class="item">paragraph10</p>
    </div>
</body>
</html>

代码运行效果如下:

批改老师：

PHPz

批改状态：合格

老师批语：完成的很好

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1.vs code的安装与配置。（包括插件）

2020-04-02 19:27:10