首页 > 其他分享 >css 中 +

css 中 +

时间:2023-05-23 09:45:31浏览次数:42  
标签:段落 这是 color demo 相邻 css

  • 在CSS中,加号(+)是一个相邻兄弟选择器,用于选择指定元素后面满足条件的第一个相邻兄弟元素。

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test demo</title>
</head>
<style>
    /* body{
        background-color: aqua;
    } */
    .con p + p{
        color:red;
    }
</style>
<body>
    

<div class="con">
    <p>这是第一段落</p>
    <p>这是第二段落</p>
    <p>这是第三段落</p>
    <p>这是第四段落</p>
</div>

</body>
</html>

标签:段落,这是,color,demo,相邻,css
From: https://www.cnblogs.com/pansidong/p/17422380.html

相关文章

  • 纯CSS实现加载效果
    HTML标签<divclass="loading"><span></span><span></span><span></span><span></span><span></span></div>CSS样式<style>.loading{ width:80px; height:40px; ......
  • 【整理】CSS知识点
    1、=========================================css注释/*这是个注释*/2、=========================================选择器id选择器#para1{}class选择器.center{}p.centerclass为center的所有p元素3、===========......
  • css优先级
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatib......
  • CSS表情包好上头,再来一款送我嫣的晚安表情
    晚安好梦我与好友道晚安,喜欢用一个带「晚安做个美梦」文字的表情,因为喜欢这个文字。前面做了一个送花的表情,我有些膨胀了。还有就是,有些豪言壮志,也到了该兑现的时候了。先来摆一摆,对我嫣的那些空口大话。我又要给你整活了,入秋三件套。我应该是可以画出来,等你回京带你去吃真的。送......
  • CSS基础知识笔记
    CSS(CascadingStyleSheets)指层叠样式表,是一种描述如何显示HTML元素的语言。参考教程:https://www.w3school.com.cn/css/index.aspCSS语法CSS规则集(rule-set)由选择器和声明块组成:CSS选择器元素选择器p{text-align:center;color:red;}id选择器注意:i......
  • css常用
    CSS中height和line-height的区别height是元素自身的高度,line-height则是元素内部文字的行高。比如:height:100px;line-height:20px;表示具有height样式的元素的高度为100像素,里面的文字行高为20像素,就是可以排5行文字。补充说明一下:如果一个元素的height和line-height相同,意味......
  • css解决浏览器滚动条出现时页面宽度会缩窄页面抖动
    css解决浏览器滚动条出现时页面宽度会缩窄页面抖动解决方式如下方式一html{overflow-y:scroll;}总是显示滚动条,体验不好方式二html{overflow-y:overlay;}兼容性一般方式三html{margin-right:calc(100%-100vw);}方式四html{padding-......
  • css li 不换行
    转载:感觉写的挺见解的,借鉴过来,以备后用。li不换行 ------不换行的策略: 不换行原理:ul和li默认都是display:block;的标签,可以通过2种方式实现li的不换行显示:*将li设为display:inline;,然后通过marging和padding设置li的间距,*将li设为float:left;,然后通过(......
  • HTML和CSS实现京东首页
    HTML代码基本结构<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title><metaname="description"content="京东JD......
  • html和css
    Web第一天一、html和CSS1.B/S软件的结构JavaSE:C/SClientServerB/SBrowserServer2.前段开发流程3.网页的组成部分页面由三部分组成!分别是内容(结构)、表现、行为。内容(结构),是我们在页面中可以看到的数据。我们称之为内容。一般内容我们使用html技术来展示。表现,......