Pertanyaan Cara CSS: pilih elemen berdasarkan HTML bagian dalam [duplikat]


Pertanyaan ini sudah memiliki jawaban di sini:

<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

Saya ingin memberi style hanya yang kedua (innerHTML2) menggunakan pemilih CSS, berdasarkan pada HTML bagian dalam. Apakah ini mungkin? Saya sudah mencoba menggunakan a[value=innerHTML2] tetapi tampaknya tidak berhasil.


32
2018-01-27 01:00


asal


Jawaban:


Ini tidak mungkin menggunakan CSS. Anda dapat, bagaimanapun, melakukannya dengan menggunakan jQuery. Ada yang bagus posting blog di atasnya Anda bisa membaca.


27
2018-01-27 01:02



Menggunakan CSS, Anda tidak dapat mendeteksi konten tag anchor.

[value=] akan merujuk ke atribut pada tag

<a href="" value="blah"> innerHTML2 </a>

Tidak sangat berguna karena atribut nilai tidak valid pada HTML a menandai

Jika memungkinkan, singkirkan kelas itu a menandai. Karena itu kemungkinan besar tidak mungkin (karena Anda sudah melakukannya) Anda dapat menggunakan jQuery untuk menambahkan kelas pada tag itu. Coba sesuatu seperti ini:

   <script type="text/javascript">
        $(function(){ $('a:contains(innerHTML2)').addClass('anchortwo'); });
    </script>

Dan kemudian gunakan .anchortwo sebagai pemilih kelas Anda.


11
2018-01-27 01:14



Saat ini tidak mungkin untuk semua browser dengan css, tetapi dengan javascript Anda dapat melakukan ini

Diperbarui dengan kode kerja. Tautan JSFiddle di bawah ini:

HTML awal per @whamsicore:

<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

JavaScript:

var myEles = document.getElementsByTagName('a');
for(var i=0; i<myEles.length; i++){
    if(myEles[i].innerHTML == ' innerHTML2 '){
         console.log('gotcha'); 

         //use javascript to style
         myEles[i].setAttribute('class', "gotcha");
    }
}

CSS untuk styling:

/* make this look a bit more visible */
a{
  display: block;
}

.gotcha{
  color: red;
}

https://jsfiddle.net/kjy112/81qqxj23/


10
2018-01-27 01:14



Anda dapat menggunakan properti css nth-child untuk mengakses elemen apa saja dan melakukan perubahan apa pun. Saya menggunakannya di situs web yang saya buat untuk membuat logo lebih kecil atau lebih besar berdasarkan lebar layar.


0
2018-01-27 20:33



Menggunakan pup, alat baris perintah untuk memproses HTML menggunakan pemilih CSS, dapat Anda gunakan a:contains("innerHTML1").

Sebagai contoh:

$ echo '<a href="example1.com"> innerHTML1 </a>' | pup 'a:contains("innerHTML1")' text{}
 innerHTML1 

0
2017-07-08 01:32



<style>
a[data-content]::before {
  content: attr(data-content);
}
a[data-content="innerHTML2"] {
  color: green;
}
</style>
<a href="example1.com" data-content="innerHTML1">&nbsp;</a>
<a href="example2.com" data-content="innerHTML2">&nbsp;</a>
<a href="example3.com" data-content="innerHTML3">&nbsp;</a>

-1
2017-11-27 09:52



Ini cukup sederhana dengan pemilih nth-child.

<style>
a:nth-child(2) {
  color: green;
}
</style>
<a href="example1.com"> innerHTML1 </a>
<a href="example2.com"> innerHTML2 </a>
<a href="example3.com"> innerHTML3 </a>

Edit: Inilah sumber yang saya temukan di sini. Periksa di sini untuk kompatibilitas browser. Sumber: http://reference.sitepoint.com/css/pseudoclass-nthchild


-7
2018-01-27 01:08