CSS 知识点总结（三）

最新推荐文章于 2024-09-17 00:54:14 发布

在下木子李

最新推荐文章于 2024-09-17 00:54:14 发布

阅读量137

点赞数

分类专栏： HTML/CSS 文章标签： css html5 html

本文链接：https://blog.csdn.net/weixin_44902943/article/details/120074563

版权

HTML/CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS 知识点总结

1、CSS 复合选择器
2、CSS 伪类选择器
3、CSS 显示模式转换

1、CSS 复合选择器

<!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>
        /*  CSS复合选择器之后代选择器 
        后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在
        后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
        语法：
        元素1 元素2 { 样式声明 }
        1、 元素1 和 元素2 中间用空格隔开
        2、 元素1 是父级，元素2 是子级，最终选择的是元素2
        3、 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
        4、 元素1 和 元素2 可以是任意基础选择器 */
        /* ul li {
            color: blue;
        } */

        ol li a {
            color: red;
        }

        .myol a {
            color: pink;
        }

        /*  CSS复合选择器之子元素选择器 
        子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
        语法：元素1 > 元素2 { 样式声明 }  
        1、元素1 和 元素2 中间用 大于号 隔开
        2、元素1 是父级，元素2 是子级，最终选择的是元素2
        3、元素2 必须是亲儿子，其孙子、重孙之类都不归他管 */
        .nav>p {
            color: blue;
        }

        /* CSS复合选择器之并集选择器
        并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.
        并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
        语法：
         */
        /* 案例：
        1、利用并集选择器将张三、李四设置为蓝色*/
        /* .mydiv,
        span {
            color: blue;
        } */

        /*2、利用并集选择器将张三、李四、小明、小红、小张设置为蓝色 */
        .mydiv,
        span,
        .myul li {
            color: blue;
        }
    </style>
</head>

<body>
    <!-- 后代选择器 -->
    <ol>
        <li>ol中的li</li>
        <li><a href="#">ol中的a标签</a></li>
    </ol>
    <ol class="myol">
        <li>ol中的li</li>
        <li><a href="#">ol中的a标签</a></li>
    </ol>
    <!-- 子元素选择器 -->
    <div class="nav">
        <p>1、hello world</p>
        <p>2、hello world</p>
        <div>
            <p>3、hello world</p>
        </div>
    </div>
    <!-- 并集选择器 -->
    <div class="mydiv">
        张三
    </div>
    <span>李四</span>
    <p>王五</p>
    <ul class="myul">
        <li>小明</li>
        <li>小红</li>
        <li>小张</li>
    </ul>
</body>

</html>

效果：
在这里插入图片描述

2、CSS 伪类选择器

<!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>
        /* 链接伪类选择器 */
        /* 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。 */
        /* 选择正常状态下的a标签 */
        /* a:link {
            color: black;
        } */
        /* 选择访问过的a标签 */
        /* a:visited {
            color: gray;
        } */
        /* 选择鼠标经过时的a标签 */
        /* a:hover {
            color: skyblue;
        } */
        /* 选择鼠标按下时未松开的a标签 */
        /* a:active {
            color: blue;
        } */
        /* 链接伪类选择器常用方式 */
        a {
            color: black;
            text-decoration: none;
        }

        a:hover {
            color: blue;
        }

        /* :focus伪类选择器 */
        /* 选择获取到焦点（光标）的元素 */
        :focus {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <a href="#">百度</a>
    <a href="#">腾讯</a> <br>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

效果：
在这里插入图片描述

3、CSS 显示模式转换

<!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>
        /* 行内元素转块元素 display: block */
        a {
            width: 150px;
            height: 50px;
            background-color: skyblue;
            display: block;
        }

        /* 块元素转行内元素 display: inline */
        div {
            width: 150px;
            height: 100px;
            background-color: purple;
            display: inline;
        }

        /* 转成行内块元素 display: inline-block */
        span {
            width: 200px;
            height: 100px;
            background-color: salmon;
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">我是a标签</a>
    <a href="#">我是a标签</a>
    <div>我是块元素</div>
    <div>我是块元素</div>
    <span>我是行内元素</span>
    <span>我是行内元素</span>
</body>

</html>