当前位置:首页 > 前端技术 > CSS基础(四)-- CSS选择器之标签选择器

CSS基础(四)-- CSS选择器之标签选择器

2022年11月09日 17:00:16前端技术10


随笔记录方便自己和同路人查阅,学习CSS时最好先学会HTML。

#------------------------------------------------我是可耻的分割线-------------------------------------------

标签选择器是设定一种格式,只要是和指定的标签相同,就使用该格式div{},该方法常用

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
     
            background-color:black;
            color:white;
        }
    </style>

</head>
<body>
    <div class="c1">.c1
        <div >嵌套标签div</div>
        <spam>嵌套标签spam</spam> #div标签内数据也会被表颜色
    </div>
    <span class="c1">spamm</span>
    <div class="c1">.c2</div>
</body>
</html>

 

效果:

CSS基础(四)-- CSS选择器之标签选择器 _ JavaClub全栈架构师技术笔记

当然有时候我们不希望所有的div标签都是一样的格式,怎么办呢,可以这样写span div{},表示只有span标签下的div标签应用该格式

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
     
            background-color:black;
            color:white;
        }
        span div{
     
            background-color:red;
            color:black;
        }
    </style>

</head>
<body>
    <div class="c1">不一样标签</div>
    <span class="c1">spamm
        <div class="c2">嵌套</div>
    </span>
</body>
</html>

 

效果:

 

CSS基础(四)-- CSS选择器之标签选择器 _ JavaClub全栈架构师技术笔记

 

转载于:https://www.cnblogs.com/lirongyang/p/11303217.html

作者:ancan9144
来源链接:https://blog.csdn.net/ancan9144/article/details/101791806

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/68880.html

标签: css标签
分享给朋友:

“CSS基础(四)-- CSS选择器之标签选择器” 的相关文章

div和span标签以及标签分类

div和span标签以及标签分类

div标签 什么是div标签 作用:一般用于配合css完成网页基本布局。 span标签 什么是span标签 作用:一般用于配合css修改网页中的一一些局部信息 <!DOCTYPE html> <htm...

span标签居中显示的正确处理方法

span标签居中显示的正确处理方法可以使用下面的方式进行居中展示: example:<span style="text-align: center;display:block;">没有数据显示</span> caution:必须加display:...

如何使用纯 CSS 创建翻牌动画

如何使用纯 CSS 创建翻牌动画

下面的示例向您展示了如何使用纯 CSS 创建翻牌动画。 作者:坚果 公众号:“大前端之旅” 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GVA成员之一,专注于大前端技术的分享,包括F...

HTML框架结构标签(frameset)

HTML框架结构标签(frameset)

第一次了解到竟然还有HTML框架结构标签()。为此小编在实例中应用了一下,但是在搭建框架之初就遇到 了问题。为此总结本博客,以便大家能及时解决问题。 什么是HTML框架结构标签(<frameset>)...

HTML表单标签常用属性及其常见子标签

表单标签 通过form来定义 <form> //1.input类型 //2.select类型 //3.textarea类型 </form> 常用属性 ​ action:提交路径,默认是当...

HTML-列表标签list与表格标签table

HTML-列表标签list与表格标签table

目录   列表标签 表格标签 列表标签      <ul>无序列表             ...

HTML标签大全(常用)

转自:https://www.cnblogs.com/moije/p/6751624.html 文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言。 HTM...

jquery 根据自定义属性获取标签对象

实例代码:  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>...

html中标签元素属性,HTML标签及属性大全

基本结构标签: ,表示该文件为HTML文件---,包含文件的标题,标题出现在浏览器标题栏中 ,的结束标志 ,的结束标志 ,的结束标志 其它主要标签,以下所有标志用在中: ,链接标志,"…"为链接的文件地址 ,显示图...

Could not resolve matching constructor (hint: specify index/type/name arguments for simple parameter 标签: 构造器注入Spring

    问题:要么是因为构造方法改变了,要么就是构造方法入参实例化失败(比如没有实现)   问题 在练习spring构造器注入方式的小程序的时候报错: Exception in thread...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。