在css中line-hight是啥意思
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在css中line-hight是啥意思相关的知识,希望对你有一定的参考价值。
是 line-height 吧。代表行高 。。比如 下面的代码显示 4行数字
这里 每行占有的高度 就是 line-height 你试试
<p>333<br />333<br />333<br />444</p> 参考技术A line-height,代表行高,可以写数字px, 也可以写百分比。%
一般是,16px -20px; 或,120%-140% 参考技术B line-height: 是行间距的
“+”(加号)CSS 选择器是啥意思?
【中文标题】“+”(加号)CSS 选择器是啥意思?【英文标题】:What does the "+" (plus sign) CSS selector mean?“+”(加号)CSS 选择器是什么意思? 【发布时间】:2010-11-11 12:06:39 【问题描述】:例如:
p + p
/* Some declarations */
我不知道+
是什么意思。这与只为p
定义样式而不使用+ p
有什么区别?
【问题讨论】:
在实践中,这对于在相同类型的列表元素之间应用边距或填充非常有用,因此第一个或最后一个元素不需要特殊情况。 【参考方案1】:请参阅 W3.org 上的 adjacent selectors。
在这种情况下,选择器意味着样式仅适用于紧跟另一个段落的段落。
一个普通的p
选择器会将样式应用于页面中的每个段落。
这仅适用于 IE7 或更高版本。在 IE6 中,该样式不会应用于任何元素。顺便说一句,这也适用于 >
组合器。
另请参阅 Microsoft 对 CSS compatibility in Internet Explorer 的概述。
【讨论】:
我发现隐藏时不折叠元素很有用。因此,更合适的隐藏方法是使用visibility : hidden/visible
而不是display : none/block
。见this reference。
p + p 和 p > p 有什么区别
@MuhammadRizwan p > p
表示嵌套的p
,e.i.位于另一个 p
正下方的任何 p
,例如 <p><p>This paragraph</p></p>
。【参考方案2】:
这是相邻兄弟选择器。
来自Splash of Style blog.
要定义一个 CSS 相邻选择器, 使用加号。
h1+p color:blue;
上面的 CSS 代码将格式化 任何 h1 标题之后(不在内部)的第一段 蓝色。
h1>p
选择作为h1
元素的直接(第一代)子(内部)的任何p
元素。
h1>p
匹配 <h1>
<p></p>
</h1>
(<p>
内 <h1>
)
h1+p
将选择第一个p
元素作为h1
元素的兄弟(在dom 的同一级别)。
h1+p
匹配 <h1></h1>
<p><p/>
(<p>
在 <h1>
旁边/之后)
【讨论】:
我对@987654341@ 和greater sign
感到困惑。如果我使用h1>p
而不是h1+p
,它会给我同样的结果吗?你能解释一下它们之间有什么不同吗?
在您的示例中,h1>p
选择任何p
元素,它是h1
元素的直接(第一代)子元素。 h1+p
将选择第一个 p
元素作为 h1
元素的兄弟(在 dom 的同一级别)。 h1>p
匹配 <h1><p><p></h1>
, h1+p
匹配 <h1></h1><p><p/>
@MatthewVines 你应该将 h1>p 和 h1+p 添加到你的答案中
所以基本上在你的例子中它会匹配 之后的第一个
,但是如果它在
之前它也会匹配相同的
吗?还是只是在之后?
<p>
是 invalid 作为 <h1>
的子级,但可以理解。【参考方案3】:
+
符号表示选择“相邻兄弟”
例如,此样式将从第二个<p>
开始应用:
p + p
font-weight: bold;
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
示例
看到这个 JSFiddle 你就会明白了:http://jsfiddle.net/7c05m7tv/ (另一个 JSFiddle:http://jsfiddle.net/7c05m7tv/70/)
浏览器支持
所有现代浏览器都支持相邻兄弟选择器。
了解详情
http://css-tricks.com/almanac/selectors/a/adjacent-sibling/ http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors【讨论】:
【参考方案4】:"+" 是相邻兄弟选择器。它将直接在 p 之后选择任何 p(不是孩子或父母,而是兄弟姐妹)。
【讨论】:
【参考方案5】:+
选择器称为 Adjacent Sibling Selector
。
例如,选择器 p + p
,选择紧跟在 p
元素之后的 p
元素
它可以被认为是一个looking outside
选择器,用于检查紧随其后的元素。
这里有一个示例 sn-p 让事情更清楚:
body
font-family: Tahoma;
font-size: 12px;
p + p
margin-left: 10px;
<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>
由于我们是同一个主题,值得一提的是另一个选择器,~
选择器,即General Sibling Selector
例如,p ~ p
选择 p
之后的所有 p
并不重要,但 p
应该具有相同的父级。
这是使用相同标记时的样子:
body
font-family: Tahoma;
font-size: 12px;
p ~ p
margin-left: 10px;
<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>
请注意,最后一个 p
在此示例中也匹配。
【讨论】:
【参考方案6】:+
选择器以后面的一个元素为目标。在类似的注释中,~
选择器以后面的所有元素为目标。如果你感到困惑,这里有一个图表:
【讨论】:
迄今为止的最佳答案。主要是因为它有一只鸡。 那么#chicken > box
呢?
那么@HaveProblemsEveryday 如果鸡吃了一个盒子,它会瞄准本来会被鸡吃掉的盒子。【参考方案7】:
+
表示相对选择器之一。以下是所有相对选择器的列表:
div p
- 选中 <div>
元素内的所有 <p>
元素。
div > p
- 选择直接父级为<div>
的所有<p>
元素。它也可以向后工作 (p < div
)
div + p
- 紧跟在<div>
元素之后的所有<p>
元素都被选中。
div ~ p
- 所有前面有<div>
元素的<p>
元素都被选中。
Here is some more about selectors.
【讨论】:
最后一个选择器错误。 According to MDN: 通用兄弟组合符 (~) 分隔两个选择器,并且仅当第二个元素跟在第一个元素之后(尽管不一定立即)匹配第二个元素,并且它们都是同一个父元素的子元素【参考方案8】:它将匹配任何紧邻元素“p”的元素p
。见:http://www.w3.org/TR/CSS2/selector.html
【讨论】:
【参考方案9】:它选择下一个段落并将段落的开头从左侧缩进,就像在 Microsoft Word 中一样。
【讨论】:
【参考方案10】:p+p
//styling the code
p+p
simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.
<div>
<input type="text" placeholder="something">
<p>This is first paragraph</p>
<button>Button </button>
<p> This is second paragraph</p>
<p>This is third paragraph</p>
</div>
Styling part
<style type="text/css">
p+p
color: red;
font-weight: bolder;
</style>
It will style all sibling paragraph with red color.
最终输出如下所示
【讨论】:
【参考方案11】:加号 (+) 将选择第一个直接元素。当您使用 + 选择器时,您必须提供两个参数。通过示例将更加清楚: 这里 div 和 span 是参数,所以在这种情况下,只有 div 之后的第一个 span 才会被设置样式。
div+ span
color: green;
padding :100px;
<div>The top or first element </div>
<span >this is span immediately after div, this will be selected</span>
<span>This will not be selected</span>
上述样式仅适用于 div 之后的第一个 span。需要注意的是,不会选择第二个跨度。
【讨论】:
【参考方案12】:p 选择此页面中的所有段落 p+p 选择 p 之后的第一个 p 。我的意思是这只是选择一个 p(不是全部)
【讨论】:
【参考方案13】:这意味着它匹配每个紧邻的p
元素
www.snoopcode.com/css/examples/css-adjacent-sibling-selector
【讨论】:
以上是关于在css中line-hight是啥意思的主要内容,如果未能解决你的问题,请参考以下文章