IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 前端之关系选择器 -> 正文阅读

[JavaScript知识库]前端之关系选择器


关系选择器可以根据 元素与元素之间所处关系 来选择元素。
关系选择器一说选择符。

后代选择器(空格)

可以选择第一个元素的任意后代。
语法:

<style>
父元素 子元素 孙元素 ……{
	声明;
}
</style>
<style>
/* 标题——后代选择器 */
/* -------------------------------------------------- */
body h1{
    text-align: center;
    color: #00FFFF;
    text-shadow: 3px 3px 1px black;
}

</style>
    <body>
        <h1>关系选择器</h1>
        <small>关系选择器可以根据 元素与元素之间所处关系 来选择元素。</small>
        <hr>

        <article>
            <h2>绘梨衣语录</h2>
            <section>
                <p>作为一名《龙族》爱好者,要说那一段最令我感触最深,那一定是因为路明非的迟到,从而失去上杉绘梨衣的那一段。路明非失去了那个将世界分给了他一半的女孩的时候,我真是久久不能平静,憋屈和难受不足以形容,当时想打作者的心都有了。</p>
                <ul>
                    <li>
                        <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">想要……一个好朋友。</a>
                    </li>
                    <li>
                        <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">我会很乖。</a>
                    </li>
                    <li>
                        <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">世界很温柔。</a>
                    </li>
                    <li>
                        <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">世界很温柔。</a>
                    </li>
                    <li>
                        <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">外面的世界好大!</a>
                    </li>
                    <li>
                        <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">我很喜欢这样的世界······但世界不喜欢我。</a>
                    </li>
                </ul>


                <p>没关系的,跟Sakura在外面到处玩,很开心,所以我能坚持下来。这是我一生里最自由的时间,以前没有过,以后也不会有。</p>
                <p>
                    我无所谓喜不喜欢,既然Sakura不喜欢,那就杀掉好了。</p>
                <p>
                    我们都是小怪兽,有一天会被正义的奥特曼杀死!</p>
                <p>
                    ······Sakura······Sakura······Sakura!</p>
                <ol>
                    <li>
                        “04.24,和Sakura去东京天空树,世界上最暖和的地方在天空树的顶上。”
                    </li>
                    <li>
                        “04.26,和Sakura去明治神宫,有人在那里举办婚礼。”
                    </li>
                    <li>
                        “04.25,和Sakura去迪士尼,鬼屋很可怕,但是有Sakura在,所以不可怕。”
                    </li>
                </ol>
                <p>
                    和sakura去东京天空树,世界上最暖和的地方在天空树顶上。</p>
                <p>
                    “Sakura最好了。”</p>

            </section>
        </article>

    </body>

在这里插入图片描述

子代关系选择器(大于号)

只能选择第一个元素的子代元素。
语法:

<style>
父元素 > 子元素{
	声明;
}
</style>
<style>
/* 文章标题 —— 后代选择器 */
/* -------------------------------------------------- */
article>h2{
    font-style:italic;
    border-bottom: 1px solid black;
}
</style>

article标签内的所有h2元素都会加上斜体、黑色下边框。
在这里插入图片描述

邻接兄弟(加号)

选择紧随其后后的元素。
语法:

<style>
/* 有序列表——邻接兄弟
--------------------------------------------------  */
p + ol {
    color: hotpink;
}
</style>

通用兄弟(波浪线)

不用紧随其后,但是前面的不会受影响。
语法:

<style>
/* div之后的section字体变大变粗 —— 通用兄弟选择器 
--------------------------------------------------*/

div~section {
    font-size: 1.2em;
    font-weight: bold;
}
</style>
<body>
    <h1>关系选择器</h1>
    <small>关系选择器可以根据 元素与元素之间所处关系 来选择元素。</small>
    <hr>
    <article>
        <h2>绘梨衣语录</h2>
        <section>
            <section>
                <p>作为一名《龙族》爱好者,要说那一段最令我感触最深,那一定是因为路明非的迟到,从而失去上杉绘梨衣的那一段。路明非失去了那个将世界分给了他一半的女孩的时候,我真是久久不能平静,憋屈和难受不足以形容,当时想打作者的心都有了。</p>
            </section>
            <ul>
                <li> <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">想要……一个好朋友。</a> </li>
                <li> <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">我会很乖。</a> </li>
                <li> <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">世界很温柔。</a> </li>
                <li> <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">世界很温柔。</a> </li>
                <li> <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">外面的世界好大!</a> </li>
                <li> <a href="https://www.bilibili.com/read/cv487957/" target="_blank" rel="noopener noreferrer">我很喜欢这样的世界······但世界不喜欢我。</a> </li>
            </ul>
            <div>
                <p>没关系的,跟Sakura在外面到处玩,很开心,所以我能坚持下来。这是我一生里最自由的时间,以前没有过,以后也不会有。</p>
                <p> 我无所谓喜不喜欢,既然Sakura不喜欢,那就杀掉好了。</p>
                <p> 我们都是小怪兽,有一天会被正义的奥特曼杀死!</p>
                <p> ······Sakura······Sakura······Sakura!</p>
            </div>
            <ol>
                <li>“ 04.24,和Sakura去东京天空树,世界上最暖和的地方在天空树的顶上。” </li>
                <li> “04.26,和Sakura去明治神宫,有人在那里举办婚礼。” </li>
                <li> “04.25,和Sakura去迪士尼,鬼屋很可怕,但是有Sakura在,所以不可怕。” </li>
            </ol>
            <section>
                <p> 和sakura去东京天空树,世界上最暖和的地方在天空树顶上。</p>
                <p> “Sakura最好了。”</p>
            </section>
        </section>
    </article>
</body>

在这里插入图片描述
网页实例

选择器的小试牛刀

去掉表格table的间隙

<style>
table {
    border-collapse: collapse;
}
</style>

去掉table表单里面td之间的间距链接

去除网页默认样式链接

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-06 12:53:24  更:2022-03-06 12:53:33 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 8:56:16-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码