css - क्या कुछ पाठ वाले तत्वों के लिए कोई सीएसएस चयनकर्ता है?





css-selectors (12)


आप डेटा विशेषता के रूप में सामग्री सेट कर सकते हैं और फिर विशेषता चयनकर्ताओं का उपयोग कर सकते हैं

/* Select every cell containing word "male" */
td[data-content="male"] {
  color: red;
}

/* Select every cell starting on "p" case insensitive */
td[data-content^="p" i] {
  color: blue;
}

/* Select every cell containing "4" */
td[data-content*="4"] {
  color: green;
}
<table>
  <tr>
    <td data-content="Peter">Peter</td>
    <td data-content="male">male</td>
    <td data-content="34">34</td>
  </tr>
  <tr>
    <td data-conten="Susanne">Susanne</td>
    <td data-content="female">female</td>
    <td data-content="14">14</td>
  </tr>
</table>

आप इस डेटा-सामग्री विशेषताओं को आसानी से सेट करने के लिए jQuery का भी उपयोग कर सकते हैं

$(function(){
  $("td").each(function(){
    var $this = $(this);
    $this.attr("data-content", $this.text());
  });
});

मैं निम्न तालिका के लिए एक सीएसएस चयनकर्ता की तलाश में हूं:

Peter    | male    | 34
Susanne  | female  | 12

क्या "पुरुष" वाले सभी टीडी से मेल खाने के लिए कोई चयनकर्ता है?




आपको male - female मूल्य वाले data-gender नामक पंक्तियों में डेटा विशेषता जोड़नी होगी और विशेषता चयनकर्ता का उपयोग करना होगा:

HTML:

<td data-gender="male">...</td>

सीएसएस:

td[data-gender="male"] { ... }



JQuery का उपयोग करना:

$('td:contains("male")')



वास्तव में यह एक बहुत ही वैचारिक आधार है कि इसे लागू क्यों नहीं किया गया है। यह मूल रूप से 3 पहलुओं का संयोजन है:

  1. तत्व की टेक्स्ट सामग्री प्रभावी रूप से उस तत्व का बच्चा है
  2. आप सीधे टेक्स्ट सामग्री को लक्षित नहीं कर सकते हैं
  3. सीएसएस चयनकर्ताओं के साथ आरोही की अनुमति नहीं देता है

इन 3ों का एक साथ मतलब है कि जब तक आपके पास टेक्स्ट सामग्री हो, तब तक आप उस तत्व में वापस नहीं जा सकते हैं, और आप वर्तमान पाठ को स्टाइल नहीं कर सकते हैं। यह संभवतः महत्वपूर्ण है क्योंकि अवरोही केवल संदर्भ और सैक्स शैली पार्सिंग के एकवचन ट्रैकिंग की अनुमति देता है। बढ़ते या अन्य अक्षरों को शामिल करने वाले अन्य चयनकर्ताओं को अधिक जटिल ट्रैवर्सल या इसी तरह के समाधान की आवश्यकता होती है जो सीओएम के डीओएम के अनुप्रयोग को बहुत जटिल बनाती हैं।




मैं डेटा विशेषता (वायगर का उत्तर) से सहमत हूं कि इसे कैसे संभाला जाना चाहिए, लेकिन, सीएसएस नियमों की तरह:

td.male { color: blue; }
td.female { color: pink; }

अक्सर स्थापित करने के लिए बहुत आसान हो सकता है, विशेष रूप से क्लाइंट-साइड libs जैसे angularjs के साथ जो सरल हो सकता है:

<td class="{{person.gender}}">

बस सुनिश्चित करें कि सामग्री केवल एक शब्द है! या आप विभिन्न सीएसएस वर्ग नामों के साथ मानचित्र भी मानचित्रण कर सकते हैं:

<td ng-class="{'masculine': person.isMale(), 'feminine': person.isFemale()}">

पूर्णता के लिए, यहां डेटा विशेषता दृष्टिकोण है:

<td data-gender="{{person.gender}}">



चूंकि सीएसएस में इस सुविधा की कमी है, इसलिए आपको सामग्री द्वारा शैली कोशिकाओं में जावास्क्रिप्ट का उपयोग करना होगा। उदाहरण के लिए xpath के साथ है

var elms = document.evaluate( "//td[contains(., 'male')]" ,node, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null )

फिर परिणाम का उपयोग करें:

for ( var i=0 ; i < elms.snapshotLength; i++ ){
   elms.snapshotItem(i).style.background = "pink";
}

https://jsfiddle.net/gaby_de_wilde/o7bka7Ls/9/




जो लोग सेलेनियम सीएसएस पाठ चयन करना चाहते हैं, उनके लिए यह स्क्रिप्ट कुछ उपयोग हो सकती है।

यह चाल उस तत्व के माता-पिता का चयन करना है जिसे आप ढूंढ रहे हैं, और तब उस बच्चे की खोज करें जिसमें टेक्स्ट है:

public static IWebElement FindByText(this IWebDriver driver, string text)
{
    var list = driver.FindElement(By.CssSelector("#RiskAddressList"));
    var element = ((IJavaScriptExecutor)driver).ExecuteScript(string.Format(" var x = $(arguments[0]).find(\":contains('{0}')\"); return x;", text), list);
    return ((System.Collections.ObjectModel.ReadOnlyCollection<IWebElement>)element)[0];
}

यदि मेरे मामले में हमेशा एक तत्व है, तो यह पहले तत्व को वापस कर देगा यदि एक से अधिक तत्व हैं।







अगर मैं विनिर्देश सही ढंग से पढ़ता हूं, नहीं।

आप तत्व पर मिलान कर सकते हैं, तत्व में एक विशेषता का नाम, और किसी तत्व में नामांकित विशेषता का मान। हालांकि, तत्व के भीतर सामग्री से मेल खाने के लिए मुझे कुछ भी दिखाई नहीं देता है।




मुझे डर है कि यह संभव नहीं है, क्योंकि सामग्री कोई विशेषता नहीं है और न ही यह एक छद्म वर्ग के माध्यम से सुलभ है। CSS3 चयनकर्ताओं की पूरी सूची CSS3 विनिर्देश में पाई जा सकती है।




यदि आप Chimp / Webdriver.io का उपयोग कर रहे हैं, तो वे सीएसएस स्पेक की तुलना में बहुत अधिक सीएसएस चयनकर्ताओं का समर्थन करते हैं

यह, उदाहरण के लिए, पहले एंकर पर क्लिक करेगा जिसमें "खराब भालू" शब्द शामिल हैं:

browser.click("a*=Bad Bear");



एचटीएमएल 5 / CSS3 कक्षाओं और आईडी के लिए संख्याओं के साथ शुरू कर सकते हैं।





css css-selectors