CSS之基本选择器和扩展选择器的使用

最新推荐文章于 2019-04-30 15:55:41 发布

明昕1024

最新推荐文章于 2019-04-30 15:55:41 发布

阅读量436

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/weixin_43468667/article/details/88258112

版权

Java Web 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

        CSS是一种用来表现HTML或XML等文件样式的计算机语言。接下来我们来学习CSS的基本选择器和扩展选择器的使用。
        CSS的基本选择器的使用
        1.标签选择器
        标签选择器就是我们在HTML代码中使用的标签，例如P、BODY、A等。如果用CSS定义了它们，那么在整个网页中，该标识的属性都应用定义中的设置。
        代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            background-color: blue;
        }
        p{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>CSS是一种用来表现HTML或XML等文件样式的计算机语言。</div>
    <p>CSS的基本选择器和扩展选择器的使用。</p>
</body>
</html>

        结果：
在这里插入图片描述
        2.Class选择器(类选择器)
        类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。
        1、类选择器都使用英文圆点（.）开头；
        2、每个元素可以有多个类名，名称任意；
        3、类选择器只会改变类下的元素样式，而不会改变其它标签的默认样式.

代码如下所示：
`

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        /*div.test{
            background-color: red;
        }
        p.test{
            background-color: purple;;
        }*/
        .test{
            background-color: purple;
        }
    </style>
</head>
<body>

    <div class="test">CSS是一种用来表现HTML或XML等文件样式的计算机语言。</div>
    <p class="test">CSS的基本选择器和扩展选择器的使用。，</p>
</body>
</html>

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

        3.ID选择器
        功能同独立的Class选择符，但语法和用法不同。
        1、ID选择器为标签设置id=“ID名称”；
        2、ID选择符的前面是符号为井号（#）；
        3、ID选择器的名称是唯一的，即相同名称的id选择器在一个页面只能出现一次。
        代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div#test{
            background-color: aqua;
        }
        p#test{
            background-color: crimson;
        }
    </style>
</head>
<body>

    <div id="test">CSS是一种用来表现HTML或XML等文件样式的计算机语言。</div>
    <p id="test">CSS的基本选择器和扩展选择器的使用。</p>
</body>
</html>

        结果：
在这里插入图片描述
        CSS的扩展选择器的使用
        1.关联选择器
        设置嵌套标签的样式：用空格隔开的两个或更多的选择器

代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
       div p{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <p>CSS的扩展选择器之关联选择器</p></div>
    <p>CSS的扩展选择器</p>
</body>
</html>

        结果：
在这里插入图片描述
        2.组合选择器
        用逗号隔开的两个或更多的选择器
        代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div,p{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
   <div>CSS的扩展选择器之关联选择器</div>
    <p>关联选择器</p>
</body>
</html>

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

        3.伪元素选择器
        link,:原始状态
        visited表示点击之后
        active 点击控件时
        hover 当鼠标移动到某个控件上方时
        代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        
        a:link{
            background-color:red;
        }
        
        a:hover{
            background-color: blue;
        }
       
        a:active{
            background-color: aqua;
        }
       
        a:visited{
            background-color:yellow;
        }
    </style>
</head>
<body>
     href="http://www.baidu.com">超链接1</a>
</body>
</html>

结果：
在这里插入图片描述
这就是CSS的基本选择器和扩展选择器的使用，若有错漏，欢迎指正，希望大家一起学习进步！！！！
如果转载以及CV操作，请务必注明出处，谢谢！

明昕1024

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之基本选择器和扩展选择器的使用

&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;CSS是一种用来表现HTML或XML等文件样式的计算机语言。接下来我们来学习CSS的基本选择器和扩展选择器的使用。&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&
复制链接

扫一扫