为何.sisa span{}不生效而.sisa,span{}生效？CSS选择器疑问

嘿，咱们一步一步拆解这个问题：

首先得明确两个选择器的本质区别：

• .sisa span{}：你理解的完全没错，这个选择器确实是选中类名为sisa的元素下的所有<span>子元素，选择器本身是完全有效的。
• .sisa,span{}：这个是同时选中类名为sisa的元素，以及页面上所有的<span>元素，是两个独立选择器的组合写法。

那为什么前者没效果，后者却有效果？问题出在你设置的text-align:center属性上！

核心原因：text-align的作用对象 #

text-align是一个块级元素专属的属性，它的作用是控制块级元素内部的行内元素（比如<span>、纯文本）的水平对齐方式。而<span>本身是行内元素，给行内元素设置text-align:center不会产生任何视觉效果——因为行内元素的宽度就是自身内容的宽度，没有“容器空间”来对齐内部内容。

当你用.sisa,span{}时，实际上是给类为sisa的<div>（块级元素）加上了text-align:center，这个div作为容器，里面的<span>自然就被居中了，你看到的效果其实是div的属性起了作用，不是span的。

解决方案 #

你有两种方式达到让span居中的效果：

方案1：给父容器（.sisa）设置text-align

这是最常用的方式，直接把对齐样式加到块级的div上：

<!DOCTYPE html> 
<html> 
<head> 
<title> html5</title> 
<meta charset="UTF-8"/> 
<style> 
div.sisa{ 
  width: 515px; 
  height: 230px; 
  border: 1px solid #73AD21; 
  background-color: #adfab7; 
  text-align:center; /* 把对齐样式移到父容器 */
} 
/* 这里可以删掉.sisa span的样式，或者保留用于设置span的其他样式（比如颜色、字号） */
</style> 
</head> 
<body> 
<form > 
<div class="sisa"> 
<span>Esim. postinumero tai kunta </span> 
</div> 
</form> 
</body> 
</html>

方案2：把<span>转为块级元素

如果你一定要给<span>设置text-align，可以把它改成块级元素，这样它就有了容器空间来对齐内容：

<!DOCTYPE html> 
<html> 
<head> 
<title> html5</title> 
<meta charset="UTF-8"/> 
<style> 
div.sisa{ 
  width: 515px; 
  height: 230px; 
  border: 1px solid #73AD21; 
  background-color: #adfab7; 
} 
.sisa span{ 
  text-align:center; 
  display:block; /* 将span转为块级元素 */
  /* 可选：如果需要span宽度和父容器一致，还可以加width:100% */
} 
</style> 
</head> 
<body> 
<form > 
<div class="sisa"> 
<span>Esim. postinumero tai kunta </span> 
</div> 
</form> 
</body> 
</html>

这样两种方式都能实现你想要的居中效果啦～

内容的提问来源于stack exchange，提问作者waleedd32