Question

我在Codrops网站上看到了关于模态对话框效果的tutorial。

我表明他们使用了下面给出的“〜”符号

.md-modal 
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    backface-visibility: hidden;
    transform: translateX(-50%) translateY(-50%);
}

.md-show {
    visibility: visible;
}


.md-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(143,27,15,0.8);
    transition: all 0.3s;
}

主要问题：这里他们使用“〜”符号，但是用什么??

.md-show ~ .md-overlay 
{
    opacity: 1;
    visibility: visible;
}

任何人都可以帮我解决这个问题。 我也想使用jQuery而不是代码中提供的JavaScript。请帮助我......

Answer 1

一般同级组合子选择器与我们刚才看到的相邻同级组合子选择器非常相似。不同之处在于被选中的元素不需要立即成功获得第一个元素，但可以出现在它之后的任何地方。

阅读以下内容：http://css-tricks.com/child-and-sibling-selectors/

此外，这篇文章不应该用JavaScript标记。这是一个纯CSS问题。

Answer 2

~或tilde是一般的兄弟选择器。它将两个选择器分开，并且仅当第二个元素以第一个元素开头时才匹配第二个元素，并且它们共享一个共同的父元素。

以下是有关这个小矮人的信息......

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

为什么特殊符号喜欢〜用在css中

2 个答案: