html - 我可以使用 inline-css 制作可扩展的内容吗？

Question

我正在 asp.net 店面的登陆页面上工作，我想添加可扩展的内容。我被告知我应该为此使用内联样式 - 而不是内部样式表，并且因为 css 中有伪样式，所以当我内联它时我无法扩展我的内容。

关于如何创建具有内联样式的可扩展内容，是否有任何选项？

/* Accordian Items */
.collapse {
	text-align:left;
}

.collapse > * + *{
  display:none;
  
 }
.collapse > *{
  cursor:pointer;
  }
  
.collapse:focus{
  outline:none;
}
.collapse:focus > * + *{
  display:block; 
}

.accordian-cta {
	width:20%;
	float: right;
	vertical-align:middle;
	text-align:right;
}

.accordian-title {
	width:100%;
	max-width:1000px;
	
	text-indent:10px;
	margin-bottom:10px;
	color:rgb(71,70,70);
	font-size:1.17em;
	font-family:arial, verdana, sans-serif;
	font-weight:bold;
	padding:5px;

<div class="collapse" tabindex="3">
     <div class="accordian-title">Click to expand<div class="accordian-cta">+&nbsp;</div> </div>
     <div class="accordian-text">
     [EXPANDED CONTENT HERE]

     
     </div>
  </div>

Answer 1

您不能使用内联 css，但恕我直言，以这种方式限制您的代码毫无意义。这是纯 css 中的另一个示例，使用类型为复选框的输入:

#expand {
  display: none;
}
#toggle:checked ~ #expand {
  display: block;
}

<input id="toggle" type="checkbox" checked>
<label for="toggle">Hide/Show</label>
<p id="expand">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>

它与您的代码不同，在失去焦点时不切换内容，这对用户来说更“稳定”。

您可以添加更多 css 以在高度上进行过渡，而不是粗暴的“显示/不显示”，或者以更时尚的方式设置复选框样式，例如 here .

关于 css 选择器的更多信息 here .