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

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

User avatar
thatsawan
PHP VIP Members
PHP VIP Members
Posts: 26707
Joined: 31/03/2014 10:02 am
Contact:

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

Post by thatsawan »

Code: Select all

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


.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
  margin-left: 10px;
}
ต่างกันยังไงกับเขียนเเบบนี้

Code: Select all

.search-box a.button {
	border-left-width: 0;
	border-radius: 0 4px 4px 0;
	font-size: 0;
	margin: 0;
	padding: 2px 5px 2px 3px;
}
User avatar
jataz2
PHP Super Member
PHP Super Member
Posts: 249
Joined: 22/02/2011 11:48 am

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

Post by jataz2 »

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

Code: Select all

<div id="a">
       <div id="b">
           <div id="c">
           </div>
      </div>
      <div id="d"></div>
 </div>
ถ้าใช้ css อันนี้

Code: Select all

#a div{
   background: red;
}
ผลลัพท์คือ #b #c และ #d จะมีสีเเดง


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

Code: Select all

#a > div{
 background: red;
}
เฉพาะ #b กับ #d เท่านั้นที่สีแดง ส่วน #c จะไม่

สรุปความหมายของ #a > div { xxxx:xxxx} หมายถึง เฉพาะ child ชั้นเเรกสุดเท่านั้นที่ css จะส่งผล ตัว child ย่อยๆ ลึกเข้าไป css ไม่มีผลครับ
Benzgino
PHP Newbie
PHP Newbie
Posts: 2
Joined: 13/06/2016 11:52 am

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

Post by Benzgino »

สรุปได้เข้าใจมากๆครับ
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “HTML CSS”

Who is online

Users browsing this forum: Google Adsense [Bot] and 8 guests