Rumah hujung hadapan web tutorial css 属性选择器和伪类选择器的使用方法

属性选择器和伪类选择器的使用方法

Nov 24, 2017 am 10:00 AM
Cara menggunakan harta benda pemilih

今天我们来给大家说一下属性选择器和伪类选择器的使用方法和相关的联系以及区别,下面给大家举一个小列子。

属性选择器:

 [attr~="value"]   单词             单词空格单词   单词必须value有效

[attr|="value"]   value打头  或者  value-单词

注意:

属性选择 都是用则很难规则表达式来判别 选择元素,效率要高一些

伪类选择器:

:before

:after

:lang(val)   val/val-单词

:nth-child(n) n从1开始算起  odd基数 even偶数

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--
<p>aaaaaaa</p>
<p>aaaaaaa</p>
<p>aaaaaaa</p>
--->
<div>
       <p>aaa</p>
       <p>aaa</p>
       <p>aaa</p>
       <p>aaa</p>
</div>
</body>
</html>
Css部分:
@charset "utf-8";
/* CSS Document */
/*
p:before{
       content:"ccc"; 
}
 
p:lang(en){
       border:1px solid #ff0000;  
}
p:nth-child(even){
       background:#F00; 
}
*/
p:nth-of-type(3){  /* p标记的父元素 下的 第3个p元素*/
       background:#F00; 
}
Salin selepas log masuk

相关阅读:

怎样隐藏溢出DIV的内容

CSS布局有哪些技巧

CSS里字体样式怎么设置

Atas ialah kandungan terperinci 属性选择器和伪类选择器的使用方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menggunakan alat pembaikan DirectX? Penggunaan terperinci alat pembaikan DirectX Bagaimana untuk menggunakan alat pembaikan DirectX? Penggunaan terperinci alat pembaikan DirectX Mar 15, 2024 am 08:31 AM

Alat pembaikan DirectX ialah alat sistem profesional Fungsi utamanya adalah untuk mengesan status DirectX sistem semasa Jika keabnormalan ditemui, ia boleh dibaiki secara langsung. Mungkin terdapat ramai pengguna yang tidak tahu cara menggunakan alat pembaikan DirectX Mari kita lihat tutorial terperinci di bawah. 1. Gunakan perisian alat pembaikan untuk melakukan pengesanan pembaikan. 2. Jika ia menggesa bahawa terdapat masalah tidak normal dalam komponen C++ selepas pembaikan selesai, sila klik butang Batal dan kemudian klik bar menu Alat. 3. Klik butang Pilihan, pilih sambungan, dan klik butang Mulakan Sambungan. 4. Selepas pengembangan selesai, mengesan semula dan membaikinya. 5. Jika masalah masih tidak diselesaikan selepas operasi alat pembaikan selesai, anda boleh cuba menyahpasang dan memasang semula program yang melaporkan ralat.

Cara menggunakan Baidu Netdisk-Cara menggunakan Baidu Netdisk Cara menggunakan Baidu Netdisk-Cara menggunakan Baidu Netdisk Mar 04, 2024 pm 09:28 PM

Ramai rakan masih tidak tahu cara menggunakan Baidu Netdisk, jadi editor akan menerangkan cara menggunakan Baidu Netdisk di bawah Jika anda memerlukan, cepat dan lihat. Langkah 1: Log masuk terus selepas memasang Baidu Netdisk (seperti yang ditunjukkan dalam gambar Langkah 2: Kemudian pilih "Perkongsian Saya" dan "Senarai Pemindahan" mengikut arahan halaman (seperti yang ditunjukkan dalam gambar); Perkongsian Rakan", anda boleh berkongsi gambar dan fail terus dengan rakan (seperti yang ditunjukkan dalam gambar); Langkah 4: Kemudian pilih "Kongsi" dan kemudian pilih fail komputer atau fail cakera rangkaian (seperti yang ditunjukkan dalam gambar); Langkah Kelima 1: Kemudian anda boleh mencari rakan (seperti yang ditunjukkan dalam gambar) Langkah 6: Anda juga boleh mencari fungsi yang anda perlukan dalam "Function Treasure Box" (seperti yang ditunjukkan dalam gambar). Perkara di atas adalah pendapat editor

Apakah alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Apakah alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Bagaimana untuk menggunakan alat pengaktifan KMS? Mar 18, 2024 am 11:07 AM

Alat Pengaktifan KMS ialah alat perisian yang digunakan untuk mengaktifkan produk Microsoft Windows dan Office. KMS ialah singkatan kepada KeyManagementService, iaitu perkhidmatan pengurusan utama. Alat pengaktifan KMS mensimulasikan fungsi pelayan KMS supaya komputer boleh menyambung ke pelayan KMS maya untuk mengaktifkan produk Windows dan Office. Alat pengaktifan KMS bersaiz kecil dan berkuasa dalam fungsi Ia boleh diaktifkan secara kekal dengan satu klik Ia boleh mengaktifkan mana-mana versi sistem tetingkap dan mana-mana versi perisian Office tanpa disambungkan ke Internet dan alat pengaktifan Windows yang kerap dikemas kini Hari ini saya akan memperkenalkannya Biar saya memperkenalkan kepada anda kerja pengaktifan kms

Cara menggabungkan sel menggunakan kekunci pintasan Cara menggabungkan sel menggunakan kekunci pintasan Feb 26, 2024 am 10:27 AM

Cara menggunakan kekunci pintasan untuk menggabungkan sel Dalam kerja harian, kita selalunya perlu mengedit dan memformat jadual. Menggabungkan sel ialah operasi biasa yang boleh menggabungkan berbilang sel bersebelahan ke dalam satu sel untuk meningkatkan keindahan jadual dan kesan paparan maklumat. Dalam perisian hamparan arus perdana seperti Microsoft Excel dan Helaian Google, operasi penggabungan sel adalah sangat mudah dan boleh dicapai melalui kekunci pintasan. Berikut akan memperkenalkan penggunaan kekunci pintasan untuk menggabungkan sel dalam kedua-dua perisian ini. wujud

Cara menggunakan potplayer-Cara menggunakan potplayer Cara menggunakan potplayer-Cara menggunakan potplayer Mar 04, 2024 pm 06:10 PM

Potplayer ialah pemain media yang sangat berkuasa, tetapi ramai rakan masih tidak tahu cara menggunakan potplayer Hari ini saya akan memperkenalkan cara menggunakan potplayer secara terperinci, dengan harapan dapat membantu semua orang. 1. Kekunci pintasan PotPlayer Kekunci pintasan biasa untuk pemain PotPlayer adalah seperti berikut: (1) Main/jeda: ruang (2) Kelantangan: roda tetikus, kekunci anak panah atas dan bawah (3) ke hadapan/belakang: anak panah kiri dan kanan. kekunci (4) penanda halaman: P- Tambah penanda halaman, H-Lihat penanda halaman (5) Skrin penuh/pulihkan: Masukkan (6) Kelajuan: C-pecut, 7) Bingkai sebelumnya/seterusnya: D/

Apakah PyCharm? Pengenalan fungsi dan penerangan terperinci tentang penggunaan Apakah PyCharm? Pengenalan fungsi dan penerangan terperinci tentang penggunaan Feb 20, 2024 am 09:21 AM

PyCharm ialah persekitaran pembangunan bersepadu (IDE) Python profesional yang dibangunkan oleh JetBrains Ia menyediakan pembangun Python dengan fungsi dan alatan yang berkuasa, menjadikan penulisan kod Python lebih cekap dan mudah. PyCharm menyokong berbilang sistem pengendalian, termasuk Windows, macOS dan Linux, dan juga menyokong berbilang versi Python, dan menyediakan pelbagai fungsi pemalam dan sambungan untuk memudahkan pembangun menyesuaikan persekitaran IDE mengikut keperluan mereka sendiri. P

Cara menggunakan alat pengaktifan Xiaoma win7 - Cara menggunakan alat pengaktifan Xiaoma win7 Cara menggunakan alat pengaktifan Xiaoma win7 - Cara menggunakan alat pengaktifan Xiaoma win7 Mar 04, 2024 pm 06:16 PM

Saya percaya bahawa ramai pengguna menggunakan alat pengaktifan Xiaoma win7, tetapi adakah anda tahu cara menggunakan alat pengaktifan Xiaoma win7 Kemudian, editor akan membawakan kepada anda cara menggunakan alat pengaktifan Xiaoma win7 Bagi mereka yang berminat dengan ini? sila ke artikel berikut Jom lihat. Langkah pertama ialah pergi ke "Komputer Saya" selepas memasang semula sistem, klik "System Properties" di menu atas, dan semak status pengaktifan Windows. Dalam langkah kedua, klik untuk memuat turun alat pengaktifan win7 dalam talian dan klik untuk membukanya (terdapat banyak sumber tersedia di mana-mana). Langkah ketiga ialah membuka alat pengaktifan Xiaoma dan klik "Aktifkan Windows secara kekal". Langkah keempat ialah menunggu proses pengaktifan selesai pengaktifan. Langkah 5: Semak status pengaktifan Windows sekali lagi dan ketahui bahawa sistem telah diaktifkan.

Cara menggunakan pautan magnet - Cara menggunakan pautan magnet Cara menggunakan pautan magnet - Cara menggunakan pautan magnet Mar 04, 2024 pm 04:37 PM

Adakah anda juga menggunakan perisian pautan magnet? Tetapi adakah anda tahu cara menggunakan pautan magnet Berikut adalah kaedah menggunakan pautan magnet yang dibawa oleh editor yang berminat boleh datang dan lihat di bawah. Kaedah pertama adalah agak mudah Jika [PC] menggunakan pautan magnet untuk memuat turun, mula-mula buka Thunder. Kemudian, salin pautan magnet secara terus Pautan akan dikesan secara automatik dalam Thunder, dan tetingkap muat turun akan muncul Hanya klik untuk mengesahkan muat turun untuk memulakan proses muat turun. Nota: Sesetengah versi lama Xunlei tidak dapat mengesan pautan magnet yang anda salin secara automatik untuk menggunakannya, anda perlu mengemas kini kepada versi terkini Xunlei.

See all articles