ตัวเลือก CSS3: ประเภทแรกที่มีชื่อคลาสหรือไม่

เป็นไปได้ไหมที่จะใช้ตัวเลือก CSS3 :first-of-typeเพื่อเลือกองค์ประกอบแรกที่มีชื่อคลาสที่กำหนด ฉันไม่ประสบความสำเร็จในการทดสอบดังนั้นฉันจึงคิดว่าไม่

รหัส ( http://jsfiddle.net/YWY4L/ ):

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

ไม่มันเป็นไปไม่ได้ที่จะใช้เพียงตัวเลือกเดียว :first-of-typeหลอกชั้นเลือกองค์ประกอบแรกของประเภท ( div, pฯลฯ ) การใช้ตัวเลือกคลาส (หรือตัวเลือกประเภท) กับคลาสหลอกนั้นหมายถึงการเลือกองค์ประกอบหากมีคลาสที่กำหนด (หรือเป็นประเภทที่กำหนด) และเป็นประเภทแรกในหมู่พี่น้อง

น่าเสียดายที่ CSS ไม่ได้ให้:first-of-classตัวเลือกที่เลือกเฉพาะการเกิดขึ้นครั้งแรกของคลาส คุณสามารถใช้สิ่งนี้:

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default, or inherited from parent div */; }

คำอธิบายและภาพประกอบสำหรับการแก้ปัญหาจะได้รับที่นี่และที่นี่

ร่าง CSS Selectors ระดับที่ 4 เสนอให้เพิ่มof <other-selector>ไวยากรณ์ในตัวเลือก:nth-child สิ่งนี้จะช่วยให้คุณเลือกเด็กคนที่n ที่ตรงกับตัวเลือกอื่น ๆ

:nth-child(1 of p.myclass) 

แบบร่างก่อนหน้าใช้คลาสหลอกใหม่:nth-match()ดังนั้นคุณอาจเห็นไวยากรณ์นั้นในการสนทนาของคุณลักษณะ:

:nth-match(1 of p.myclass)

นี้ได้ถูกนำมาใช้ใน WebKitและจึงสามารถใช้ได้ใน Safari แต่ที่ปรากฏเป็นเบราว์เซอร์เท่านั้นที่สนับสนุน มีการยื่นตั๋วเพื่อใช้งานBlink (Chrome) , Gecko (Firefox)และคำขอให้นำไปใช้ใน Edgeแต่ไม่มีความคืบหน้าใด ๆ

สิ่งนี้ไม่สามารถใช้ตัวเลือก CSS3 : first-of-typeเพื่อเลือกองค์ประกอบแรกที่มีชื่อคลาสที่กำหนด

อย่างไรก็ตามถ้าองค์ประกอบเป้าหมายมีพี่น้ององค์ประกอบก่อนหน้านี้คุณสามารถรวมการเนรมิต CSS หลอกคลาสและตัวเลือกพี่น้องที่อยู่ติดกันเพื่อจับคู่องค์ประกอบที่ไม่มีองค์ประกอบก่อนหน้าทันทีที่มีชื่อคลาสเดียวกัน:

:not(.myclass1) + .myclass1

ตัวอย่างรหัสการทำงานแบบเต็ม:

p:first-of-type {color:blue}
p:not(.myclass1) + .myclass1 { color: red }
p:not(.myclass2) + .myclass2 { color: green }

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

ฉันพบวิธีแก้ปัญหาสำหรับการอ้างอิงของคุณ จากกลุ่ม div บางกลุ่มให้เลือกจากกลุ่มของสองกลุ่มเดียวกัน divs กลุ่มแรก

p[class*="myclass"]:not(:last-of-type) {color:red}
p[class*="myclass"]:last-of-type {color:green}

BTW ฉันไม่รู้ว่าทำไม:last-of-typeทำงาน แต่:first-of-typeไม่ทำงาน

การทดลองของฉันกับ jsfiddle ... https://jsfiddle.net/aspanoz/m1sg4496/

นี่เป็นเธรดเก่า แต่ฉันกำลังตอบกลับเนื่องจากยังคงปรากฏในรายการผลการค้นหาสูง หลังจากที่อนาคตได้มาถึงคุณสามารถใช้: nth-child pseudo-selector

p:nth-child(1) { color: blue; }
p.myclass1:nth-child(1) { color: red; }
p.myclass2:nth-child(1) { color: green; }

The: nth-child pseudo-selector นั้นทรงพลัง - วงเล็บยอมรับสูตรและตัวเลข

เพิ่มเติมได้ที่นี่: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

ในฐานะที่เป็นโซลูชันสำรองคุณสามารถห่อคลาสของคุณในองค์ประกอบหลักได้ดังนี้

<div>
    <div>This text should appear as normal</div>
    <p>This text should be blue.</p>
    <div>
        <!-- first-child / first-of-type starts from here -->
        <p class="myclass1">This text should appear red.</p>
        <p class="myclass2">This text should appear green.</p>
    </div>
</div>

ไม่แน่ใจว่าจะอธิบายเรื่องนี้อย่างไร แต่ฉันพบสิ่งที่คล้ายกันในวันนี้ ไม่สามารถตั้งค่า.user:first-of-type{}ในขณะที่.user:last-of-type{}ทำงานได้ดี นี่คือการแก้ไขหลังจากที่ฉันห่อไว้ใน div โดยไม่มีคลาสหรือสไตล์:

https://codepen.io/adrianTNT/pen/WgEpbE

<style>
.user{
  display:block;
  background-color:#FFCC00;
}

.user:first-of-type{
  background-color:#FF0000;
}
</style>

<p>Not working while this P additional tag exists</p>

<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>

<p>Working while inside a div:</p>

<div>
<p class="user">A</p>
<p class="user">B</p>
<p class="user">C</p>
</div>

คุณสามารถทำได้โดยเลือกองค์ประกอบของคลาสที่เป็นพี่น้องของคลาสเดียวกันและกลับด้านซึ่งจะเลือกสวยมากทุกองค์ประกอบในหน้าดังนั้นคุณต้องเลือกคลาสอีกครั้ง

เช่น:

<style>
    :not(.bar ~ .bar).bar {
        color: red;
    }
<div>
    <div class="foo"></div>
    <div class="bar"></div> <!-- Only this will be selected -->
    <div class="foo"></div>
    <div class="bar"></div>
    <div class="foo"></div>
    <div class="bar"></div>
</div>

ใช้:firstงานได้ง่ายสำหรับฉันทำไมยังไม่ได้กล่าวถึงนี้