blocks|key|2132926|text|Q.“不要得到‘内容包装器.col1，..content包装器.col2'"|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2132927|A.Content是一个包含子类col1和col2的类。|2132928|Q.“col1和col2继承了内容包装器的智慧和填充”吗？|2132929|A.不是的。除非指定为inherit或auto，否则不会|CODE|2132930|Q.“你会在内容包装器中再次覆盖这些值吗？”|2132931|A.这完全取决于您的需求，但是如果您希望它成为自动的或继承自父的，只需将它们添加到.content-wrapper+.col1,+.content-wrapper+.col2下，其值为auto或inherit。|2132932|希望这能有所帮助。|2132933|entityMap^0|0|12|0|0|0|R|0|B|7|J|4|0|0|M|0|15|1A|2K|4|2P|7|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|11|8|@$9|12|A|13|B|L]|$9|14|A|15|B|L]]|D|@]|E|$]]|$1|M|3|N|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|19|8|@$9|1A|A|1B|B|L]|$9|1C|A|1D|B|L]|$9|1E|A|1F|B|L]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1G|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|T|$]]

Q. " don't get what '.content-wrapper .col1, .content-wrapper .col2'"

A . Content-wrapper is a class with its children col1 and col2.

Q. "Do col1 and col2 inherith the witdth and padding from content-wrapper"

A . No. It does not unless specified as <code>inherit</code> or <code>auto</code>

Q. "En are you gonna overwrite those values again in content-wrapper"

A . That purely depends on your requirements, but if you want it to make it auto or inherit from the parent, just add them under <code>.content-wrapper .col1, .content-wrapper .col2</code> with values as <code>auto</code> or <code>inherit</code>.

Hope this helps.

blocks|key|2101830|text|内容包装器是一个div，宽度为600+is。没有任何东西传递给子元素clo1和col2。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2101831|这里没有过路。|2101832|你可以写|2101833|.content-wrapper+.col1,+.content-wrapper+.col2+{+|code-block|syntax|javascript|2101834|亦如|2101835|.col1,+.col2+{+|2101836|任何事情都不会改变，除非在内容包装器之外有第二组.col1和.col2。|2101837|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

.content-wrapper is a div and has width 600px. nothing is passed down to the child elements clo1 and col2

there is no passing on here.

You could write 

<pre><code>.content-wrapper .col1, .content-wrapper .col2 { 
</code></pre>

also as

<pre><code>.col1, .col2 { 
</code></pre>

and nothing would change, except if you had a second set of .col1 and .col2 outside of the .content-wrapper.

blocks|key|2101867|text|我建议你阅读有关CSS的教程。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2101868|内容包装器.col1+{}规则是在类名为col1的任何元素上指定规则，并且它的父元素以类名作为内容包装器。除非其他规则将填充添加到col1中，否则它将不会获得与内容包装器关联的填充。|2101869|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I suggest you read tutorials on CSS.

The .content-wrapper .col1 { } rule is specifying rules on any element with class name as col1 and who has some parent element which has class name as content-wrapper. Unless some other rule adds padding to col1, it will not get the padding that was associated with content-wrapper.

blocks|key|2101907|text|内容包装器.col1，..content+.col2‘是一个html元素的选择器，其中包含类col1或col2+(其子)一个元素的.(这是父元素)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2101908|父级中的子程序不会继承父级的宽度。如果are块元素，则不会比父元素宽。|2101909|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

'.content-wrapper .col1, .content-wrapper .col2' is a selector for an html element with class col1 or col2 inside (child of) an element with class .content-wrapper (thats the parent).

The childs inside the parent don't inherit the width of the parent. If the are block elements, the won't be wider than the parent.

blocks|key|2101961|text|col1和col2|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2101962|.content-wrapper+.col1,+.content-wrapper+.col2+{++
display:+inline-block;++
vertical-align:+top;++
border:+1px+solid+#464646;++
background-color:+#ffffff;++|code-block|syntax|javascript|2101963|}|2101964|将继承填充值，但不继承|2101965|.content-wrapper+{++
width:+600px;++
padding:+10px;++|2101966|2101967|但是密码|2101968|.content-wrapper+.col1+{++
width:+295px;++
height:+250px;++
}+|2101969|只覆盖.col1上设置的宽度值，而不覆盖.col2上设置的宽度值。|2101970|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|M|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|11|8|@]|9|@]|A|$]]|$1|P|3|Q|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|R|3|S|5|6|7|13|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

col1 and col2 call on 

<pre><code>.content-wrapper .col1, .content-wrapper .col2 { 
display: inline-block; 
vertical-align: top; 
border: 1px solid #464646; 
background-color: #ffffff; 
</code></pre>

} 

will inherit the padding values but not the width from 

<pre><code>.content-wrapper { 
width: 600px; 
padding: 10px; 
</code></pre>

} 

but the code 

<pre><code>.content-wrapper .col1 { 
width: 295px; 
height: 250px; 
} 
</code></pre>

will only overwrite the width value set on .col1 and not on .col2

blocks|key|2101996|text|这意味着具有类col1+(.col1)的对象位于DOM树中具有类内容包装器(.content)的对象下面。这意味着，包含在.+contained+.col1+{}中的CSS仅应用于.col1包含在..col1中的对象，即使类.col1的对象出现在其他地方。内容包装器.col2也是如此，逗号表示它们是不同的对象，但是样式化适用于这两种对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2101997|第二个内容包装器.col1是分开的，因为编写代码的人只想要宽度和高度应用于..content包装器.col1，而不是..content+.col2。|2101998|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

What this means is that an object with the class col1 (.col1) is somewhere underneath an object with the class content-wrapper (.content-wrapper) in the DOM tree. This means that the CSS contained in .content-wrapper .col1 {} is only applied to objects with class col1 contained within .content-wrapper, even if objects with the class .col1 appear elsewhere. Same applies for .content-wrapper .col2 and a comma denotes that they are different objects, however the styling applies to both.

The second .content-wrapper .col1 is separate because whoever wrote the code only wanted the width and height to apply to .content-wrapper .col1 and not .content-wrapper .col2

blocks|key|2133093|text|.content-wrapper+.col1,+.content-wrapper+.col2{}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2133094|只是css选择器，它们的意思是：“我要对.中的.col1和.col2元素进行样式化，所以请选择它们”。|unstyled|2133095|它们不会继承父元素的宽度，除非您指定了“宽度:继承”，但是，它们与父元素的宽度自然是相同的，但仅仅因为列通常是块元素，这意味着它们将展开直到可以(直到它们与父元素一样宽)。这里的情况不是这样的，因为它们是“内联块”元素，因此它们的宽度将达到所需的范围。|2133096|最后一部分，|2133097|.content-wrapper+.col1+{}|2133098|只需选择col1元素并将其宽度和高度更改为固定值|2133099|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|M|3|N|5|F|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|F|7|W|8|@]|9|@]|A|$]]]|P|$]]

<pre><code>.content-wrapper .col1, .content-wrapper .col2{}
</code></pre>

are just css selectors and they mean: "I'm going to style the .col1 and the .col2 elements that are inside the .content-wrapper, so please select them".

They don't inherit the width of the parent, unless you specify "width: inherit;", however, naturally they would be the same with of the parent but just because usually columns are block elements, and this means they will expand until they can (until they're as wide as the parent). This is not the case here because they are "inline-block" elements and thus will be just as wide as they need to.

The final part,

<pre><code>.content-wrapper .col1 {}
</code></pre>

is just selecting the col1 element and changing it's width and height to a fixed value

Can someone explain the code beneath?

I don't get what <code>.content-wrapper .col1, .content-wrapper .col2</code> means.

Do col1 and col2 inherit the width and padding from <code>.content-wrapper</code>?
And are you gonna overwrite those values again in <code>.content-wrapper</code>?

<pre><code>.content-wrapper {
 width: 600px;
 padding: 10px;
}
.content-wrapper .col1, .content-wrapper .col2 {
 display: inline-block;
 vertical-align: top;
 border: 1px solid #464646;
 background-color: #ffffff;
}
.content-wrapper .col1 {
 width: 295px;
 height: 250px;
}
</code></pre>

HTML CSS Classes

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

有人能解释一下下面的代码吗？我不明白.content-wrapper .col1, .content-wrapper .col2的意思。col1和col2继承.content-wrapper的宽度和填充吗？你会在.content-wrapper中再次覆盖这些值吗？.content-wrapper {    width: 600px;    padding: 10px;}.content-wrapp

问HTML CSS类
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML CSS类EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML CSS类
EN