课堂小结。

chenguan66

已于 2023-06-14 18:55:54 修改

阅读量39

点赞数

文章标签： html5

于 2023-06-14 18:53:43 首次发布

本文链接：https://blog.csdn.net/chenguan66/article/details/131213875

版权

一、结构选择器、

1.1 选择第一个元素

① 父元素>元素1:first-child 选择第一个元素1，要求元素1是父元素里面的第一个子元素

②父元素>元素1:first-of-type 选择第一个元素1，父元素先按元素种类（标签名）先分组，然后在元素1组中选择第一个元素

1.2选择最后一个元素

①父元素>元素1:last-child 选择最后一个元素1，要求元素1是父元素里面的最后一个子元素

②父元素>元素1:last-of-type 选择最后一个元素1，父元素先按元素种类（标签名）先分组，然后在元素1组中选择最后一个元素

1.3选择第几个元素

①父元素>元素1:nth-child(num) 选择第num个元素1，要求元素1是父元素中的第num个子元素

②父元素>元素1：nth-of-type(num) 选择第num个元素1，父元素先按元素种类（标签名）先分组，然后在元素1组中选择第num个元素

备注： 2n+1/odd 选择所有奇数子元素

2n/even 选择所有偶数个的子元素

1.4除了...之外

:not(条件) {}

<style>
        *:not(del) {
            list-style: none;
            text-decoration: none;
        }

        ul>li:not(:last-of-type) {
            background-color: aqua;
        }

        ul li:first-of-type {
            font-size: 20px;
            color: red;
        }

        ul h3:first-of-type {
            color: pink;
        }

        ol li:first-of-type {
            color: yellow;
        }

        ol li:last-of-type {
            color: rgb(207, 101, 40);
        }

      
        ol>li:nth-of-type(5) {
            color: goldenrod;
        }

        ol>li:nth-of-type(2n+1) {
            background-color: aqua;
        }

        ol>li:nth-of-type(2n) {
            background-color: gold;
        }

        ol>p:nth-of-type(even) {
            background-color: aqua;
        }

        ol>p:nth-of-type(odd) {
            background-color: gold;
        }
    </style>
</head>

<body>
    <ul>
        <p>你是我的爱</p>
        <h3>Lorem, ipsum dolor.</h3>
        <h3>前道</h3>
        <h3>结构选择器</h3>
        <li>lorem1</li>
        <li>lorem2</li>
        <li>lorem3</li>
        <li>lorem4</li>
        <li>lorem5</li>
        <li>lorem6</li>
        <a href="#">我是a</a>
    </ul>
    <hr>
    <ol>
        <p>我是P1</p>
        <p>我是P2</p>
        <p>我是P3</p>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
        <li>我是li6</li>
    </ol>
    <del>1000元</del>
    </ul>
</body>

二、伪类选择器

2.1元素1:hover 元素2：

设置鼠标悬停在元素1时元素2的样式，

如果hover后面没有元素，则表示设置样式对象是元素1

2.2 :link：

超链接还没有被访问

2.3 :active ：

超链接正在被访问

2.4 :visited：

超链接已经被访问了

当设置超链接（a）四种状态时，顺序:link->:visited->:hover->:active

  <style>
        * {
            list-style: none;
            width: 180px;
        }

        ul>li:hover {
            background-color: orange;
        }

        a {
            text-decoration: none;
        }

        ol>li:hover>a {
            text-decoration: underline;
        }

        .one:link {
            color: chartreuse;
        }

        .one:visited {
            color: fuchsia;
        }

        .one:hover {
            color: green;
        }

        .one:active {
            color: red;
        }
    </style>
</head>

<body>

    <a href="#" class="one">我是你爸爸</a>
    <ul>
        <li>jw1</li>
        <li>jw2</li>
        <li>jw3</li>
        <li>jw4</li>
    </ul>
    <ol>
        <li><a href="#">Lorem1</a>我的</li>
        <li><a href="#">Lorem2</a>我的</li>
        <li><a href="#">Lorem3</a>我的</li>
        <li><a href="#">Lorem4</a>我的</li>
    </ol>
</body>

三、伪元素选择器

3.1元素1::before

给元素1添加第一个子元素（默认是行元素）

3.2元素1::after

给元素1添加最后一个子元素（默认是行元素）

注意点：::before和::after必须与content属性一起连用

<style>
    
        div::before{
            content: "";
            width: 1px;
            height: 50px;
            background-color: red;
            display: inline-block;
        }
        div::after{
            content: "";
            width: 1px;
            height: 50px;
            background-color: black;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>
      
        <span>
            我的
        </span>
    </div>
</body>

chenguan66

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
课堂小结。

①父元素>元素1:last-child 选择最后一个元素1，要求元素1是父元素里面的最后一个子元素②父元素>元素1:last-of-type 选择最后一个元素1，父元素先按元素种类（标签名）先分组，然后在元素1组中选择最后一个元素。
复制链接

扫一扫