::องค์ประกอบหลอกอักษรตัวแรกไม่ทำงานใน Firefox

ฉันไม่สามารถเข้าใจสิ่งนี้ได้ตลอดชีวิตของฉัน ฉันแค่ต้องการจัดสไตล์เครื่องหมายดอลลาร์ให้เป็นสีอื่น และฉันต้องการหลีกเลี่ยงการใช้องค์ประกอบอื่นรอบๆ เครื่องหมายดอลลาร์

<ul>
    <li><strong>John Dow</strong> <div>$5,849,487<sup>84</sup></div></li>
    <li><strong>David Jones</strong> <div>$5,498,364<sup>01</sup></div></li>
    <li><strong>Susie Smith</strong> <div>$5,098,276<sup>35</sup></div></li>
</ul>

และ CSS นี้:

li::first-letter {
    color: blue;
}
li div::first-letter {
    color: red;
}​​

สีฟ้าได้ผล สีแดงไม่ได้ผล

http://jsfiddle.net/ryanwheale/KUzUp/


css firefox pseudo-element
person Ryan Wheale    schedule 05.10.2012    source แหล่งที่มา

คำตอบ (3)


arrow_upward
7
arrow_downward

ดูเหมือนว่าจะเป็นเพราะอักขระ $ ไม่ถูกตีความว่าเป็นอักขระตัวอักษรโดย Firefox ขึ้นอยู่กับการค้นพบว่าการแทนที่ $ ด้วยอักขระตัวอักษร (A, B, C...) ทำให้การสาธิตทำงาน:

<ul>
    <li><strong>David Wilcox</strong> <div>A$5,849,487<sup>84</sup></div></li>
    <li><strong>David Cowee</strong> <div>B$5,498,364<sup>01</sup></div></li>
    <li><strong>D.J. Johnson</strong> <div>C$5,098,276<sup>35</sup></div></li>
</ul>​

การสาธิต JS Fiddle

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

li div::before {
    content: '$';
    color: red;
}

ด้วย HTML:

<ul>
    <li><strong>David Wilcox</strong> 
        <div>5,849,487<sup>84</sup>
        </div>
    </li>
    <!-- siblings removed for brevity -->
</ul>

การสาธิต JS Fiddle

person David says reinstate Monica    schedule 05.10.2012
comment
ขอบคุณสำหรับการสาธิต แต่ @StephanNeubert เอาชนะคุณได้ - person Ryan Wheale; 06.10.2012
comment
วางเมาส์เหนือข้อความ '...นาทีที่ผ่านมา' และคุณจะเห็นการประทับเวลาในคำแนะนำเครื่องมือที่แสดงเวลาที่แน่นอนในการโพสต์คำตอบ เราอยู่ใกล้พอในเวลาเดียวกับที่ไม่ได้สร้างความแตกต่าง แต่ฉันคิดว่าเร็วกว่าเล็กน้อย =) แต่ขอย้ำว่า 'ใกล้พอที่จะไม่สร้างความแตกต่าง' - person David says reinstate Monica; 06.10.2012
comment
ขออภัย ฉันควรจะชัดเจนกว่านี้ โพสต์ของ Stephan ปรากฏก่อน (ไม่แน่ใจว่าทำไม) แต่แน่นอนว่าเขาไม่ใช่คนแรกที่โพสต์ เนื่องจากฉันให้คะแนนแก่คำตอบแรก ฉันจึงมอบหมายคะแนนให้กับคุณใหม่ตามหน้าที่ ขอขอบคุณสำหรับการชี้แจง. - person Ryan Wheale; 06.10.2012
comment
จริงๆ แล้วไม่สำคัญว่าใคร คนแรก สำคัญ แต่สิ่งสำคัญคือ 'ใครช่วยคุณได้มากที่สุด' เห็นได้ชัดว่าฉันชื่นชมตัวแทนแน่นอน! - person David says reinstate Monica; 06.10.2012
comment
สำหรับคำตอบที่เป็นประโยชน์พอๆ กันนั้น ขึ้นอยู่กับว่าใครเป็นคนแรกในความคิดของฉัน - person Ryan Wheale; 11.10.2012

arrow_upward
3
arrow_downward

ทุกอย่างทำงานตามที่ควรจะเป็น: ::first-letter เลือกตัวอักษรตัวแรก แต่ "$" ไม่ใช่ตัวอักษร แต่เป็นอักขระพิเศษ

person Stefan Neubert    schedule 05.10.2012
comment
ว้าว... ฉันไม่เคยเดาเลยว่ามันจะเป็นจริงขนาดนี้ - person Ryan Wheale; 06.10.2012
comment
สำหรับสิ่งที่คุ้มค่า สเป็คของสิ่งนี้บอกว่า: Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included. เครื่องหมายดอลลาร์อยู่ในคลาส Sc ใน Unicode ซึ่งก็คือ อย่างที่สเตฟานพูด อักขระพิเศษ หากคุณมีเครื่องหมายคำพูด พฤติกรรมจะแตกต่างออกไป... - person Boris Zbarsky; 06.10.2012

arrow_upward
1
arrow_downward

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

<li><strong>David Wilcox</strong> <div class="money">5,849,487<sup>84</sup></div></li>

นำ $ ตามตัวอักษรออกมาแล้วใส่ลงในเนื้อหา :before เช่น:

.money:before {
    content: '$';
    ...
}

ตอนนี้คุณสามารถจัดสไตล์ได้ตามต้องการ

person tuff    schedule 05.10.2012
comment
หากคุณสามารถแก้ไขเนื้อหาได้ ทำไมไม่ใส่ “$” ใน span แทน แทนที่จะทำให้รูปลักษณ์ภายนอกขึ้นอยู่กับ CSS - person Jukka K. Korpela; 06.10.2012
comment
คุณหมายถึงเนื้อหานั้นขึ้นอยู่กับ CSS (เนื่องจากจะมีลักษณะที่ปรากฏไม่ว่าในกรณีใด)? ไม่มีเหตุผลที่ชัดเจนอย่างยิ่ง ยกเว้นว่า :before จะต้องมีมาร์กอัปน้อยกว่า และหากเนื้อหาของ .money ได้รับการเติมข้อมูลโดยทางโปรแกรม ก็จะทำให้สามารถส่งผ่านข้อมูลที่สะอาดยิ่งขึ้นได้ - person tuff; 06.10.2012
comment
ฉันเห็นด้วยกับ Jukka: ฉันจะหลีกเลี่ยงการเพิ่มเนื้อหาผ่าน css ทุกครั้งที่ทำได้ นั่นคือจุดแยกเนื้อหาและการนำเสนอ - person Stefan Neubert; 06.10.2012
comment
ขอบคุณสำหรับข้อเสนอแนะ ชั้นเรียนนั้นไม่จำเป็นด้วยซ้ำเนื่องจากฉันได้กำหนดเป้าหมายไปที่ DIV ในตัวอย่างดั้งเดิมของฉันแล้ว น่าเสียดายที่ลูกค้าจ่ายเงินสำหรับการรองรับ IE7 (ซึ่งเป็นส่วนเสริมในปัจจุบัน) นอกจากนี้ ฉันจะติดต่อกับผู้แก้ไขเนื้อหา... และฉันไม่ต้องการอธิบายว่าเครื่องหมายดอลลาร์ปรากฏขึ้นอย่างน่าอัศจรรย์อย่างไร ถ้าเป็นเว็บไซต์ของฉัน นี่คงจะเป็นชัยชนะ - person Ryan Wheale; 06.10.2012