Cho trhthong hỏi cái này tí: Về các loại Selector!

**trhthong** · 31-03-2008 08:27

Đọc thử về Selector của CSS2, nhưng không hiểu rõ lắm. Các Pro chỉ giúp hen:

Đầu tiên là cái Child-of Selector, được nói là:

Child-of selector

E > F: selects any element F that is a child of E

For instance, these slides are in XHTML, and each slide is just a <div>.

I used to have for each slide

<div class="slide">

but now I can save typing, and have an unadorned <div>. Where I used to have the CSS rule:

div.slide {...}

I now have:

body>div {...}

which only selects divs which are a (direct) child of <body>

đoạn này, tớ không hiểu lắm ở câu: but now I can save typing, and have an unadorned <div>. Where I used to have the CSS rule:...

Đoạn thứ hai:

Alternative for child-of

Note that the rule

body div

also selects divs that are a child of <body>, but at any level, not just direct children. So if my slides themselves contain <div>s (which they do) then those divs would be selected too.

Another option I could have used was:

body div {... rules intended for slides... }
body div div {... rules to undo the above rules ... }

but it is nicer not to have to 'undo' presentation caused by other rules if you can avoid it.

Đọc xong đoạn này, tớ hiểu đại khái là: Child-of Selector chỉ chọn những phần tử con trực tiếp của phần tử cha (which only selects divs which are a (direct) child of <body>). Còn cách dùng bộ chọn kiểu body div{...} thì chọn tất tần tật những phần tử con của phần tử body.

Nhưng xuống đoạn dưới này:

First-child selector

E:first-child: selects any E that is the first child of its parent

So for instance, the following only selects paragraphs that are the first child of their parent:

p:first-child

Note that this slide does not have such a paragraph. The first child is a heading, so the above rule wouldn't apply to any paragraph here.

Usually though you want to be more specific. For instance, to select the first slide of this set:

body > :first-child

which selects any element that is a direct child of <body> that is also a first-child of its parent. Since there is only one of those, the first child of the body, it selects that.

vẫn là which selects any element that is a direct child of <body>
Vậy không lẽ cái Child-of Selector và cái First Child Selector giống nhau à?
Vui lòng giải thích dùm mình ý nghĩa của những bộ chọn trên nghen! Thanks very much!

**Spirit** · 31-03-2008 08:38

child of selector ở phía trên là nó giải thích 1 số cách để chọn các class hay id theo dạng cấu trúc có liên quan, thường gọi là cha con. Hay cách anh gọi là phần tử con.

Nó chỉ đơn giản là anh rút gọn và làm đẹp khi viết CSS.

Thay vì phải viết dài body > id > class > sth thì có thể chỉ cần viết tắt sth.class hoặc id sth.class. Cái đó là do thói quen mỗi ng` thôi, theo em ko quan trọng lắm.

Đó cũng giải thích cái công nghệ anh gọi là 4 div ở topic bên kia.

Còn cái First Child thì khác, first child nó chỉ có tác dụng ở code có tag đầu tiên mà anh qui định.

Ví dụ anh có 4 cái dòng:

<div class="ddth">
<p> abc abc abc </p>
<p> abc abc abc </p>
<p> abc abc abc </p>
<p> abc abc abc </p>
</div>

.ddth p {
text-transform: capitalize;
}

.ddth p:first-child {
text-transform: uppercase;
}

Thì kết quả là dòng đầu tiên sẽ là ABC ABC ABC, còn lại thì ra kết quả là Abc abc abc

**phongjalvn** · 31-03-2008 08:51

Giải thích như vậy cũng mù mờ lắm, để thử cái này của mình nhé

( Không biết bạn đã xem qua bài tut của mình chưa nhỉ, thôi post qua đây nhé

)

Tiện đây giải thích điểm khác nhau của cả 3 thứ : descendant selector, child selector và first-child selector

Đầu tiên mình có code HTML :

Code:

<p class="my-class">p.my-class</p> 
<div id="my-id"> 
<ol> 
<li>div ol li</li> 
<li>div ol li</li> 
<li> 
<p class="my-class">div ol li p.my-class </p> 
</li> 
</ol> 
</div>

Tiếp theo mình có code CSS như sau :

Code:

/* Group Selectors */ 
p,ol,li { border:1px solid black; padding-left:10px; font-family:monospace; 
margin:10px; margin-left:0px; } 
ol { margin-left:0px; padding-left:40px; margin-top:20px; } 
/* Position Selectors */ 
div *.my-class { font-size:1.2em; font-weight:bold; }  /* Descendant  Selector */ 
#my-id   p { background-color:gold; } /* Descendant Selector */ 
#my-id > * { border:3px solid black; } /* Child Selector */ 
li:first-child { font-weight:bold; color:red; }        /* First-child Selector */ 
li + li { font-style:italic; color:blue; }             /* Sibling     Selector */

Ở VD này, mình minh họa cho cả bài viết, tuy nhiên ở đây ta sẽ chỉ chú ý đến 4 dòng cuối của CSS.

Đầu tiên là :

Code:

#my-id   p { background-color:gold; } /* Descendant Selector */

Cái này thì dễ hiểu, nó sẽ chọn toàn bộ các tag <p> có trong #my-id
Kế tiếp ta có :

Code:

#my-id > * { border:3px solid black; } /* Child Selector */

Cái này hay đây, bác thử chạy thực nghiệm xem kết quả nhé.
Ta chọn tất cả child của #my-id, khi đó, sẽ chỉ có duy nhất tag ol được chọn, vì theo cấu trúc trên, rõ ràng chỉ có ol là cấp con trực tiếp của #my-id .

Các tag li, và p là con, cháu của tag ol hoàn toàn không được trọn ( Nếu ở đây ta viết #my-id * thì cả ol, li, p sẽ đều được chọn)
Kế đến là :

Code:

li:first-child { font-weight:bold; color:red; }        /* First-child Selector */

Đoạn này nói nôm na là nó sẽ chọn tag li đầu tiên, thế thôi

( Bác xem thử http://jt-vn.com/blog/wp-content/css.../example2.html nhá )
Bonus:

Code:

li + li { font-style:italic; color:blue; }             /* Sibling     Selector */

Hà hà, cái này hay nè, nó chọn tag li nào mà trước nó ( ngang cấp nhá) là 1 tag li

, kết quả ta sẽ có tag li từ thứ 2 trở đi được chọn
Tham khảo thêm tại đây nhé http://www.jt-vn.com/blog/index.php/cssxhtml/23/

Chủ đề: Cho trhthong hỏi cái này tí: Về các loại Selector!

Hỗ trợ

Rate This Thread

Cho trhthong hỏi cái này tí: Về các loại Selector!

Bookmarks

Bookmarks

Quy định