css 选择器

最新推荐文章于 2024-07-06 23:21:28 发布

花开花落的博客

最新推荐文章于 2024-07-06 23:21:28 发布

阅读量703

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_42028153/article/details/132616200

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*  ~ 表示的h1的兄弟元素  <h2>hello</h2> <h2>后盾</h2>*/
        article h1~h2{
            color: rgb(1, 20, 1);
        }

        /* + 表示紧挨着h1的兄弟元素闺蜜那种哈哈（<h2>hello</h2>） */
        article h1+h2{
            color: green;
        }
         /* ^ 表示title是以hello开头的元素 */
        article h1[title^='hello']{
            color: red;
        }
         /* $ 表示title是以hello结尾的元素 */
        article h2[title$='hello']{
            color: blue;
        }
        /* ~ 表示title中包含hello这个词的，hello是一个单独的词 */
        article h2[title~='hello']{
            color: #3f1f1f;
        }
        /* | 表示title中以hello这个词开头的或者以hello开头以短横线连接的其他词的 */
        article h2[title|='hello']{
            color: #ce450f;
        }
        section div{
            border:1px solid #ccc;
            width: 300px;
        }
        section div input{
            border: none;
            outline: none;
            width: 230px;            
        }
        section div>span::after{
            content: '搜索';
            border-left: solid 1px #ccc;
            padding-left: 10px;
        }
        section div>input:placeholder-shown+span::after{
            content: 'lll';
            border-left: solid 1px #ccc;
            padding-left: 10px;
        }
        section .test{
            width: 300px;
            height: 300px;
            overflow: scroll;
        }
        section .test h4{
            position: sticky;
            top: 0;
            left: 0;
            background-color: #eb7d7d;            
        }
    </style>
</head>
<body>
    <!-- css选择器 ~ 与 + 的区别 -->
    <main>
        <article>
            <h1 title="hello55">你好</h1>
            <h2>hello</h2>
            <aside>
                <h2 title="ss hello">ok</h2>
            </aside>
            <h2 title="www.hello">后盾</h2>
            <h2 title="hello-555">后来</h2>
            <h2>hello www</h2>
        </article>
        <section>
            <div>
                <input type="text" placeholder="some text here">
                <span></span>
            </div>
        </section>
        <section>
            <div class="test">
                <div>
                    <h4>印度成功登月后不久 将视线转向下一个目标：太阳</h4>
                    <p>
                            “Aditya”在印地语中指的是太阳。印度空间研究组织的一份报告称，Aditya-L1将被置于围绕太阳-地球系统“拉格朗日1点”的光环轨道上，因为在那里观察太阳可以毫无阻碍。
    
        拉格朗日点是空间中两个大质量的引力产生“增强的吸引力和排斥力区域”的位置，由此产生的力可以用来保持飞船的位置并减少燃料消耗，所以拉格朗日点也被比作航天飞行器的“停车位”。
    
        报告指出，这次发射将标志着印度第一个研究太阳的天基天文台。
    
        此次飞行任务的目的是深入了解太阳活动的各个方面及其对空间天气的影响，其目标包括：了解太阳风和空间天气的形成原因和构成要素、研究日冕物质抛射的动力学、以及观察太阳圆盘等，同时旨在解决太阳物理学中一些尚未解决的问题。
                        </p>
                    </div>
                    <div>
                        <h4>土耳其一航空公司航班拟设成人专区</h4>
                        <p>　据美联社29日报道，这家廉价航空公司拟于今年11月开始，在往返荷兰阿姆斯特丹和加勒比海荷属岛屿库拉索之间的航班上开设成人座位专区，面向年满16岁的乘客开放。
    
                            　　科伦登航空公司上周宣布，执飞这条航线的空中客车A350客机有432个客位，位于机舱前部的93个普通座位和9个超大空间座位将被设为成人专区，用帘子或隔板与其他座位分开。
                            
                            　　公司网站消息显示，相比普通机票，成人专区普通座位收取45欧元的预订费，超大空间座位预订费为100欧元。阿姆斯特丹至库拉索航班单程飞行时间约10个小时。</p>
                    </div>
                    <div>
                        <h4>上海一地有毒气泄漏？要封路一个月？权威部门答复</h4>
                        <p>上海辟谣平台从浦东新区应急管理部门了解到，网传事故发生在8月28日22时56分许，一辆装有桶装液态甲基三氯硅烷的货车行驶至S1川沙路南约50米处，其中1桶发生泄漏。经应急管理局、公安分局、消防救援支队等单位联动处置，将泄漏的1个铁桶作危废处理，其间无人员伤亡。8月29日10时25分许，道路交通逐步恢复正常，不存在要封路一个月的情况。此外，经区生态部门检测，事故未造成附近环境及水质污染</p>
                    </div>
                </div>
        </section>
    </main>
</body>
</html>