可能重复:
CSS规则中的">"是什么意思?
什么是>符号CSS是什么意思?我在我的Wordpress博客主题中注意到它,并想知道它在做什么.
#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #efefef;
}
#access li:hover > a,
#access a:focus {
background: #f9f9f9; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
background: -o-linear-gradient(#f9f9f9, #e5e5e5);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
color: #373737;
}
#access ul li:hover > ul {
display: block;
}
Run Code Online (Sandbox Code Playgroud) 我有一些CSS代码:
.welcome div {
font-size: 20px;
}
Run Code Online (Sandbox Code Playgroud)
我做了我想做的事,但也写得像
.welcome > div {
font-size: 20px;
}
Run Code Online (Sandbox Code Playgroud)
会做同样的事情.
是否有任何理由使用其中一个或者他们只是两种不同的方式来做同样的事情?
今天,经过四个小时的调试,我很难学到了这个规则:
如果父级的z-index值为任何值,则无论您如何更改子级的CSS,父级元素都永远无法覆盖(堆叠在其子级元素之上)
我如何通过逻辑理解这种行为?规范在哪里覆盖?
代码(也在CodePen中):
.container {
width: 600px;
height: 600px;
background-color: salmon;
position: relative;
z-index: 99;
margin-top: 20px;
padding-top: 10px;
}
h1 {
background-color: pink;
position: relative;
z-index: -1;
font-family: monospace;
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<h1>1. I can never be covered by parent if my z-index is positive.</h1>
<h1>2. Even when my z-index is nagative, I still can never be covered if my parent has any z-index at all.</h1>
</div>Run Code Online (Sandbox Code Playgroud)
可以说我有以下HTML
<div id="div1">
....
<span class="innercontents">...</span>
....
</div>
Run Code Online (Sandbox Code Playgroud)
我可以只选择父ID的子项吗?
我能做点什么吗?
#div1 span
{
...
}
Run Code Online (Sandbox Code Playgroud)
谢谢你的帮助.
对不起任何困惑.我应该更清楚.在上面的例子中,我想只选择那个特定的标签
我有以下HTML代码:
<div class="class1">
<input type="text">
<input type="text">
<div class="class2">
<input type="text">
<input type="text">
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我希望所有输入字段都有左边距:10px;
我知道我可以做到以下几点:
.class1 > input {margin-left:10px}
.class1 > .class2 > input {margin-left:10px}
Run Code Online (Sandbox Code Playgroud)
但我想知道我是否可以用一行CSS做到这一点
.class1 >>> input {margin-left:10px}
//>>> meaning "has .class1 in his familly tree"
Run Code Online (Sandbox Code Playgroud) div > p {
background-color: yellow;
}
Run Code Online (Sandbox Code Playgroud)
似乎没有任何不同的评价
div p {
background-color: yellow;
}
Run Code Online (Sandbox Code Playgroud)
但是我会不知道会有什么影响吗?似乎使用>更合适的风格,至少.
我见过两个例子,
.someclass> .inner {...}
和
.someclass .inner {...}
以同样的方式工作.他们之间有什么区别我没有看到吗?
这些似乎做了同样的事情.我从来不知道有什么区别.
<style>
#a > b > i{
color: blue;
}
#b b i{
color: red;
}
</style>
<div id="a">
<b><i>text</i></b>
</div>
<div id="b">
<b><i>text</i></b>
</div>
Run Code Online (Sandbox Code Playgroud) 我正在看一些css代码,我不明白这一行.代码有一个名为shape的div,它包含六个其他div,每个div包含一个图像.
以下代码选择哪些图像?正如我所说div形状包含其他六个div,那么为什么下面的代码只选择一个图像?
#shape > div{
}
Run Code Online (Sandbox Code Playgroud) 我找到了两个选择器
div p
Run Code Online (Sandbox Code Playgroud)
和
div>p
Run Code Online (Sandbox Code Playgroud)
这两个css选择器之间的确切区别是什么?