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

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

Moderator: mindphp

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 16893
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

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

โพสต์โดย thatsawan » 21/03/2015 6:47 pm

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

.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
PHP Super Member
PHP Super Member
โพสต์: 225
ลงทะเบียนเมื่อ: 22/02/2011 11:48 am

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

โพสต์โดย jataz2 » 24/12/2015 2:01 pm

ดูโครงสร้าง 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
PHP Newbie
PHP Newbie
โพสต์: 2
ลงทะเบียนเมื่อ: 13/06/2016 11:52 am

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

โพสต์โดย Benzgino » 13/06/2016 1:51 pm

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


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 9 และ บุคคลทั่วไป 0 ท่าน