ไม่: ตัวเลือกลูกคนแรก

ฉันมีdivแท็กที่มีหลายulแท็ก

ฉันสามารถตั้งค่าคุณสมบัติ CSS สำหรับulแท็กแรกเท่านั้น:

div ul:first-child {
    background-color: #900;
}

อย่างไรก็ตามความพยายามของฉันต่อไปนี้ในการตั้งค่าคุณสมบัติ CSS สำหรับแต่ละulแท็กยกเว้นแท็กแรกไม่ทำงาน:

div ul:not:first-child {
    background-color: #900;
}

div ul:not(:first-child) {
    background-color: #900;
}

div ul:first-child:after {
    background-color: #900;
}

ฉันจะเขียนใน CSS: "แต่ละองค์ประกอบยกเว้นองค์ประกอบแรก" ได้อย่างไร

หนึ่งในรุ่นที่คุณโพสต์งานได้จริงสำหรับเบราว์เซอร์ที่ทันสมัย (ที่CSS เตอร์ระดับ 3ได้รับการสนับสนุน ):

div ul:not(:first-child) {
    background-color: #900;
}

หากคุณต้องการสนับสนุนเบราว์เซอร์รุ่นเก่าหรือหากคุณถูกจำกัด โดยข้อ จำกัด:notของตัวเลือก(จะยอมรับเฉพาะตัวเลือกอย่างง่ายเป็นอาร์กิวเมนต์) ดังนั้นคุณสามารถใช้เทคนิคอื่น:

กำหนดกฎที่มีขอบเขตมากกว่าสิ่งที่คุณตั้งใจและจากนั้น "เพิกถอน" แบบมีเงื่อนไขโดย จำกัด ขอบเขตของสิ่งที่คุณต้องการ:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

เมื่อ จำกัด ขอบเขตให้ใช้ค่าเริ่มต้นสำหรับแต่ละแอตทริบิวต์ CSS ที่คุณกำลังตั้งค่า

โซลูชัน CSS2 นี้ (" ulหลังจากนี้อีกครั้งul") ก็ใช้ได้เหมือนกันและได้รับการสนับสนุนจากเบราว์เซอร์เพิ่มเติม

div ul + ul {
  background-color: #900;
}

ซึ่งแตกต่าง:notและ:nth-siblingการเลือกพี่น้องที่อยู่ติดกันได้รับการสนับสนุนโดย IE7 +

ถ้าคุณมีJavaScriptเปลี่ยนแปลงคุณสมบัติเหล่านี้หลังจากที่โหลดหน้าเว็บที่คุณควรจะดูที่บางส่วนข้อบกพร่องที่รู้จักกันดีในIE7และIE8การใช้งานนี้ ดูลิงค์นี้

สำหรับหน้าเว็บคงที่ใด ๆ สิ่งนี้ควรจะทำงานได้อย่างสมบูรณ์

เนื่องจากIE6-8:notไม่เป็นที่ยอมรับฉันขอแนะนำให้คุณทำสิ่งนี้:

div ul:nth-child(n+2) {
    background-color: #900;
}

เพื่อให้คุณเลือกทุกulในองค์ประกอบหลักของมันยกเว้นคนแรก

อ้างถึงคริส Coyer ของ"ที่มีประโยชน์: ที่ n-เด็กสูตร"บทความมากขึ้นตัวอย่างnth-child

div li~li {
    color: red;
}

รองรับ IE7

not(:first-child)ดูเหมือนจะไม่ทำงานอีกต่อไป อย่างน้อยด้วย Chrome และ Firefox เวอร์ชันที่ใหม่กว่า

ลองทำสิ่งนี้แทน:

ul:not(:first-of-type) {}

คุณสามารถใช้ตัวเลือกใดก็ได้ด้วย not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

ฉันไม่มีโชคกับสิ่งที่กล่าวมา

นี่เป็นสิ่งเดียวที่ทำงานได้จริงสำหรับฉัน

ul:not(:first-of-type) {}

สิ่งนี้ใช้ได้กับฉันเมื่อฉันพยายามให้ปุ่มแรกปรากฏบนหน้าเว็บโดยไม่ได้รับผลกระทบจากตัวเลือกระยะขอบซ้าย

นี่เป็นตัวเลือกที่ฉันลองก่อน แต่มันไม่ได้ผล

ul:not(:first-child)

คุณสามารถใช้ตัวเลือกของคุณด้วย:notร้องเหมือนคุณสามารถใช้ตัวเลือกใด ๆ ภายใน:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

คุณสามารถใช้:notโดยไม่มีตัวเลือกพาเรนต์เช่นกัน

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

ตัวอย่างเพิ่มเติม

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

อย่างที่ฉันใช้ul:not(:first-child)เป็นทางออกที่สมบูรณ์แบบ

div ul:not(:first-child) {
    background-color: #900;
}

เหตุใดจึงสมบูรณ์แบบเพราะโดยการใช้ul:not(:first-child)เราสามารถใช้ CSS กับองค์ประกอบภายใน ชอบli, img, span, aแท็กเป็นต้น

แต่เมื่อใช้โซลูชันอื่น ๆ :

div ul + ul {
  background-color: #900;
}

และ

div li~li {
    color: red;
}

และ

ul:not(:first-of-type) {}

และ

div ul:nth-child(n+2) {
    background-color: #900;
}

สิ่งเหล่านี้ จำกัด CSS ระดับ ul เท่านั้น สมมติว่าเราไม่สามารถใช้ CSS ในliฐานะ `div ul + ul li '

สำหรับองค์ประกอบระดับภายในโซลูชันแรกทำงานได้อย่างสมบูรณ์แบบ

div ul:not(:first-child) li{
        background-color: #900;
    }

และอื่น ๆ ...