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

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

Moderator: mindphp

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

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

Postby thatsawan » 21/03/2015 6:47 pm

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: 233
Joined: 22/02/2011 11:48 am

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

Postby jataz2 » 24/12/2015 2:01 pm

ดูโครงสร้าง 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 ต่างกันยังไง

Postby Benzgino » 13/06/2016 1:51 pm

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


Return to “HTML CSS”

Who is online

Users browsing this forum: No registered users and 12 guests