เครื่องหมาย > กับ + ใน CSS ต่างกันยังไง

[thatsawan]

โค้ด: เลือกทั้งหมด

.controls > .radio:first-child,
.controls > .checkbox:first-child {
  padding-top: 5px;
}


.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
  margin-left: 10px;
}

ต่างกันยังไงกับเขียนเเบบนี้

โค้ด: เลือกทั้งหมด

.search-box a.button {
	border-left-width: 0;
	border-radius: 0 4px 4px 0;
	font-size: 0;
	margin: 0;
	padding: 2px 5px 2px 3px;
}

[jataz2]

ดูโครงสร้าง html ตัวอย่างครับ

โค้ด: เลือกทั้งหมด

<div id="a">
       <div id="b">
           <div id="c">
           </div>
      </div>
      <div id="d"></div>
 </div>

ถ้าใช้ css อันนี้

โค้ด: เลือกทั้งหมด

#a div{
   background: red;
}

ผลลัพท์คือ #b #c และ #d จะมีสีเเดง


ถ้าใช้ css ที่มี >

โค้ด: เลือกทั้งหมด

#a > div{
 background: red;
}

เฉพาะ #b กับ #d เท่านั้นที่สีแดง ส่วน #c จะไม่

สรุปความหมายของ #a > div { xxxx:xxxx} หมายถึง เฉพาะ child ชั้นเเรกสุดเท่านั้นที่ css จะส่งผล ตัว child ย่อยๆ ลึกเข้าไป css ไม่มีผลครับ

[Benzgino]

สรุปได้เข้าใจมากๆครับ