पाठ-संरेखण को ओवरराइड करने में असमर्थ: टेक्स्ट-संरेखण के साथ औचित्य: सरल HTML

Question

में छोड़ा गया है मेरे पास text-align: left के साथ एक अजीब समस्या है जिसके बाद तत्व को एक उचित संपत्ति विरासत में मिली है। मैंने भी महत्वपूर्ण कीवर्ड का उपयोग करने की कोशिश की और यह अभी भी काम नहीं कर रहा है। अजीब बात यह है कि, यदि मैं क्रोम में डेवलपर मोड का उपयोग करता हूं, तो यह कहता हैtext-align: left सक्रिय है, text-align: justify निष्क्रिय है, लेकिन यह बायां संरेखण प्रस्तुत नहीं कर रहा है।

यहाँ मेरी कोड है: https://jsfiddle.net/h0vx9sLc/3/ ("ठीक" के साथ अद्यतन फिडल)

body { width: 100px; } 
 
p:nth-child(1) { } 
 
p:nth-child(2) { text-align: justify; } 
 
p>span { text-align: left !important; }

<p> 
 
    <span>Testing Blah Blah Blah Blah Blah</span> 
 
</p> 
 
<p> 
 
    <span>Testing Blah Blah Blah Blah Blah</span> 
 
</p>

सीएसएस प्राथमिकता के आधार पर वहाँ वास्तव में कोई मौका नहीं justify संपत्ति left तुलना में एक उच्च प्राथमिकता है है । मैंने क्रोम, फ़ायरफ़ॉक्स और आईई में इसका परीक्षण किया और सभी एक ही काम कर रहे हैं।

यहां क्रोम का स्क्रीन शॉट दावा है कि बाएं संपत्ति सक्रिय है, लेकिन ऐसा नहीं है।

Answer 1

ठीक है, इस सीएसएस का एक बहुत विचित्र संपत्ति है।

मैं यह पता लगा इस सवाल की मदद से: text-align justify, cannot override

जाहिर है एक इनलाइन तत्व पर ध्यान नहीं देता पाठ के अनुरूप सीएसएस, लेकिन यह उन्हें विरासत में कर सकते हैं। तो मेरा स्पैन औचित्य प्राप्त कर रहा था, लेकिन सीएसएस प्रतिपादन InNORES एक इनलाइन तत्व के पाठ-संरेखण सीएसएस IGNORES।

इसे ठीक करने के लिए, मैं अपने अवधि में display: inline-block; जोड़ता हूं। वास्तव में, वास्तव में विचित्र। मुझे यकीन नहीं है कि क्रोम डेवलपर समस्या का क्या करना है। मुझे लगता है कि यह तकनीकी रूप से एक बग होना चाहिए?

Answer 2

justify मूल्य को ओवरराइड करने के लिए आप class जोड़ सकते हैं या क्या मुझे कुछ याद आया है?

अद्यतन:<span> रों इनलाइन तत्व हैं और text-alignब्लॉक पाठ की पर लागू होता है। तो तुम display:block<span> रों पर या inline-block लागू करने या उसे class, एक id, या <p> रों को एक इनलाइन शैली आवेदन करना होगा।

body { 
 
    width: 100px; 
 
} 
 
p~p { 
 
    text-align: justify; 
 
} 
 
p>span { 
 
    text-align: left !important; 
 
} 
 
.left { 
 
    text-align: left !important; 
 
}

<p class="left"> 
 
    <span>Testing Blah Blah Blah Blah Blah</span> 
 
</p> 
 
<p class="left"> 
 
    <span>Testing Blah Blah Blah Blah Blah</span> 
 
</p>

Answer 3

आपका चयनकर्ता आप बंद फेंक रहा है मुझे लगता है कि। teachbrij.com से निम्नलिखित अच्छी तरह से समझाएं।

~ साइन इन करें:

यह सामान्य भाई Combinator और निकटस्थ भाई Combinator के समान है। अंतर यह है कि दूसरे चयनकर्ता को तुरंत पहले साधन का पालन नहीं करना पड़ता है, यह पूर्व चयनकर्ता द्वारा पहले किए गए सभी तत्वों का चयन करेगा।

यहां W3 रूंडउन है।वही जानकारी ...

मैंने आपके अपडेट किए गए fiddle को संलग्न किया है जिसमें मैंने बाएं औचित्य को हटा दिया है। आप देखेंगे कि

align: left 

सेट के बाद भी कई सारे स्पैन फेंक दिए गए हैं।

निश्चित रूप से दिलचस्प प्रश्न। उम्मीद है की यह मदद करेगा।