सीएसएस का उपयोग करना: पहले और: इनलाइन सीएसएस के साथ छद्म तत्वों के बाद?

Question

मैं इनलाइन सीएसएस (यानी में सीएसएस के साथ एक HTML ईमेल हस्ताक्षर बना रही हूँ styleविशेषताएँ), और मैं के रूप में है कि क्या यह उपयोग करने के लिए संभव है करने के लिए उत्सुक हूँ :beforeऔर :afterछद्म तत्वों।

यदि हां, तो मैं इनलाइन सीएसएस के साथ कुछ इस तरह कैसे लागू करूंगा?

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }

Comments

आप इन-लाइन शैलियों का उपयोग छद्म-वर्गों या छद्म-तत्वों को लक्षित करने के लिए नहीं कर सकते।

— डेविड का कहना है कि

इनलाइन शैलियों के साथ सीएसएस छद्म वर्गों के

— Champ

@ चेम्प: एक ही प्रश्न नहीं है, क्योंकि छद्म तत्व और छद्म वर्ग एक ही बात नहीं हैं। मैंने अपने स्वयं के उत्तर के बारे में विस्तार से लिखा।

— BoltClock

Answer 1

आप छद्म तत्वों के लिए इनलाइन शैलियों को निर्दिष्ट नहीं कर सकते।

ऐसा इसलिए है क्योंकि छद्म-तत्व, जैसे कि छद्म वर्ग ( इस अन्य प्रश्न के लिए मेरा उत्तर देखें ), को सीएसएस में परिभाषित किया गया है चयनकर्ताओं का उपयोग दस्तावेज़ के पेड़ के सार के रूप में किया जाता है जिसे HTML में व्यक्त नहीं किया जा सकता है। styleदूसरी ओर एक इनलाइन विशेषता, एक विशेष तत्व के लिए HTML में निर्दिष्ट है।

चूंकि इनलाइन शैलियाँ केवल HTML में हो सकती हैं, वे केवल उन HTML तत्व पर लागू होंगी, जिन्हें वे परिभाषित करते हैं, और किसी भी छद्म तत्व के लिए नहीं जो इसे उत्पन्न करता है।

एक अलग रूप में के रूप में, छद्म तत्वों और इस पहलू में छद्म वर्गों के बीच मुख्य अंतर यह है कि गुण है कि डिफ़ॉल्ट रूप से विरासत में मिला रहे है जाएगा प्राप्त की जा द्वारा :beforeऔर :after, पैदा तत्व से जबकि छद्म वर्ग शैलियों बस सब पर लागू नहीं है। आपके मामले में, उदाहरण के लिए, यदि आप text-align: justifyकिसी tdतत्व के लिए इनलाइन शैली विशेषता रखते हैं , तो यह विरासत में मिलेगा td:after। चेतावनी यह है कि आप td:afterइनलाइन शैली विशेषता के साथ घोषणा नहीं कर सकते हैं ; आपको इसे स्टाइलशीट में करना होगा।

Answer 2

जैसा कि ऊपर उल्लेख किया गया है: सीएसएस छद्म वर्ग / -सेमेंट इनलाइन को कॉल करना संभव नहीं है। मैंने अब क्या किया है: अपने तत्व को एक विशिष्ट पहचानकर्ता दें, f.ex. एक आईडी या एक अद्वितीय वर्ग। और एक फिटिंग <style>तत्व लिखें

<style>#id29:before { content: "*";}</style>
<article id="id29">
  <!-- something -->
</article>

fugly, लेकिन क्या इनलाइन css isnt ..?

Comments

यह इनलाइन सीएसएस नहीं है। इनलाइन सीएसएस को स्टाइल की आवश्यकता होती है = "" विशेषता को अलग-अलग एचटीएमएल तत्वों को पारित किया जाना चाहिए। सामान्य रूप से Gmail में CSS स्वरूपित भेजने के लिए आवश्यक है, जो <style> टैग में कुछ भी स्ट्रिप्स करता है। एक स्वचालक के लिए यहाँ देखें ( zurb.com/ink/inliner.php )

— kez

मुझे लगता है कि यह निकटतम है जो आप इनलाइन छद्म तत्वों को प्राप्त कर सकते हैं। अभी तक बेहतर है, नई scopedशैलियों और :rootpsuedo- वर्ग का उपयोग करें (यह बहुत अच्छा है) <article><style scoped>:root:before { content: "*";}</style><!-- something --></article>:।

— बेन जे।

सुधार: :scopeछद्म वर्ग का उपयोग करें :<article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>

— बेन जे।

यह सामान बहुत नया है, शायद लागू नहीं किया गया है, और संभवतः बदल जाएगा। यह वर्तमान HTML कल्पना ( scopeडी शैलियों) और सीएसएस कल्पना ( :scope) में है । मुझे और अधिक स्पष्ट होना चाहिए था।

— बेन जे

<Style> ... </ style> टैग का उपयोग करके आंतरिक या एम्बेडेड CSS, NOT इनलाइन CSS कहा जाता है।

— जेम्स एंडरसन जूनियर

Answer 3

आप इनलाइन में डेटा का उपयोग कर सकते हैं

 <style>   
 td { text-align: justify; }
 td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>

<table><tr><td data-content="post"></td></tr></table>

Comments

यह छद्म तत्व के लिए data-contentविशेषता को प्रिंट करता है content। इनलाइन CSS के साथ छद्म तत्वों को बनाने से इसका कोई लेना-देना नहीं है।

— निल्स कास्पर्सन

मैं इनलाइन सीएसएस में छद्म चयनकर्ताओं को लागू करने के तरीके की तलाश में यहां आया था और इस उत्तर ने मुझे उसी चीज को प्राप्त करने का एक और तरीका दिखाया। बड़ी संख्या में संभव विकल्पों पर आधारित सामग्री गतिशील रूप से बनाई गई थी और इसलिए हर संभव परिणाम के लिए अलग-अलग CSS चयनकर्ताओं के ढेर लिखना व्यावहारिक नहीं था।

— wunth

यह वास्तव में किसी को सामग्री के बाद गतिशील सामग्री जोड़ने के लिए एक बहुत अच्छा जवाब है। हो सकता है कि इस मुद्दे से संबंधित न हों, लेकिन Google के माध्यम से इस समाधान को खोजते समय यह प्रश्न प्रदर्शित किया जा रहा है।

— Aleks

प्रलेखन देखें ।

— user4642212

Answer 4

नहीं, आप इन-सीएसएस में छद्म वर्ग या छद्म तत्वों को लक्षित नहीं कर सकते जैसा कि डेविड थॉमस ने कहा। अधिक विवरण के लिए बोल्टस्कॉक द्वारा छद्म वर्गों के बारे में यह उत्तर देखें

नहीं। शैली की विशेषता केवल दिए गए HTML तत्व के लिए शैली गुणों को परिभाषित करती है। छद्म वर्ग चयनकर्ताओं के परिवार के सदस्य हैं, जो विशेषता में नहीं होते हैं .....

हम छद्म तत्वों के लिए भी उपयोग लिख सकते हैं

नहीं। शैली की विशेषता केवल दिए गए HTML तत्व के लिए शैली गुणों को परिभाषित करती है। छद्म वर्ग और छद्म तत्व चयनकर्ताओं के परिवार के सदस्य हैं, जो कि विशेषता में नहीं होते हैं इसलिए आप उन्हें इनलाइन नहीं कर सकते हैं।

Comments

सवाल पर मेरा जवाब और मेरी टिप्पणी देखें।

— BoltClock

हाँ समान नहीं हैं। लेकिन इसके पीछे कारण यह है कि इनलाइन का उपयोग नहीं किया जा सकता है?

— Champ

उत्तर समान हैं, लेकिन प्रश्न बहुत अलग हैं।

— BoltClock

Answer 5

आप इनलाइन css में छद्म तत्व नहीं बना सकते हैं।

हालाँकि, यदि आप एक स्टाइलशीट में एक छद्म तत्व बना सकते हैं, तो इसके इनलाइन शैली को इसके मूल तत्व में सेट करके इनलाइन स्टाइल करने का एक तरीका है, और फिर इस तरह से छद्म तत्व को स्टाइल करने के लिए इनहेरिट कीवर्ड का उपयोग करना है:

<parent style="background-image:url(path/to/file); background-size:0px;"></p>

<style> 
   parent:before{
      content:'';
      background-image:inherit;
      (other)
   }
</style>

कभी-कभी यह काम आ सकता है।

Answer 6

हां यह संभव है , बस उस तत्व के लिए इनलाइन शैलियों को जोड़ें, जिसे आप पहले या बाद में जोड़ रहे हैं, उदाहरण के लिए

 <style>
     .horizontalProgress:after { width: 45%; }
 </style><!-- Change Value from Here -->

 <div class="horizontalProgress"></div>

Comments

यह एक इनलाइन स्टाइलशीट है। इनलाइन सीएसएस नहीं।

— एस्गर

इस तथ्य के अलावा कि यह वास्तविक प्रश्न को हल नहीं करता है, यह कोड गलत है, ::afterऔर ::beforeछद्म तत्वों को content: valueअन्यथा इसकी आवश्यकता होती है, content:noneजिसके परिणामस्वरूप मूल रूप से कुछ भी नहीं होता है।

— zer00ne

<Style> ... </ style> टैग का उपयोग करके आंतरिक या एम्बेडेड CSS, NOT इनलाइन CSS कहा जाता है।

— जेम्स एंडरसन जूनियर

Answer 7

जैसा कि पहले उल्लेख किया गया है, आप छद्म वर्गों को स्टाइल करने के लिए इनलाइन तत्वों का उपयोग नहीं कर सकते हैं । छद्म वर्गों के पहले और बाद में तत्वों के राज्य हैं, वास्तविक तत्व नहीं। आप संभवतः इसके लिए केवल जावास्क्रिप्ट का उपयोग कर सकते हैं।

Comments

वे छद्म- तत्व हैं जो राज्य नहीं हैं।

— user4642212

Answer 8

यदि आपका HTML पर नियंत्रण है तो आप एक छद्म के बजाय एक वास्तविक तत्व जोड़ सकते हैं। : पहले और: छद्म तत्वों को खुले टैग के ठीक बाद या निकट टैग से ठीक पहले प्रदान किया जाता है। इस सीएसएस के लिए इनलाइन बराबर

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }

कुछ इस तरह होगा:

<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>

याद रखो; इनलाइन सीएसएस के साथ तत्वों के पहले और बाद में आपका "वास्तविक" आपके पृष्ठों के आकार को बहुत बढ़ाएगा और पृष्ठ लोड अनुकूलन को अनदेखा करेगा जो बाहरी सीएसएस और छद्म तत्व संभव बनाते हैं।

Answer 9

आप उपयोग कर सकते हैं

parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");

सीएसएस में

el:after{
  ....
  padding-top:var(--padding-top, 0px);
}