Adakah pemilih dalam css termasuk pemilih tag hiperteks?

Tidak termasuk. Pemilih CSS termasuk: 1. Pemilih teg, yang mencari elemen HTML tertentu melalui nama elemen halaman HTML 2. Pemilih kelas, yang mencari elemen HTML tertentu melalui nilai atribut kelas elemen HTML; yang Cari elemen HTML tertentu melalui nilai atribut id elemen HTML 4. Pemilih kad bebas "*" boleh merujuk kepada semua jenis elemen teg, termasuk elemen tersuai 5. Pemilih atribut menggunakan nama atribut sedia ada; Elemen HTML atau nilai atribut untuk mencari elemen HTML tertentu.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Pemilih CSS tidak termasuk "pemilih teg hiperteks", tetapi termasuk pemilih kelas, pemilih teg, pemilih ID, pemilih atribut, pemilih kelas pseudo, dsb.

Apakah itu pemilih css?

Gaya ialah unit sintaks terkecil CSS Pernyataan (peraturan), seperti yang ditunjukkan di bawah.

1.Pemilih

Pemilih terdiri daripada id, atribut kelas atau nama elemen itu sendiri bagi elemen HTML dan beberapa Khas simbol digunakan untuk menentukan elemen HTML untuk menentukan gaya Sebagai contoh, pemilih p bermaksud untuk menentukan gaya untuk semua teg

>

Mungkin terdapat satu atau banyak pengisytiharan ini memberitahu penyemak imbas cara untuk memaparkan objek yang ditentukan oleh pemilih. Semua pengisytiharan diletakkan dalam sepasang pendakap kerinting , serta-merta mengikut pemilih.

Perisytiharan mesti mengandungi dua bahagian: atribut dan nilai atribut, dan menggunakan koma bertitik untuk menandakan pengakhiran pengisytiharan boleh diabaikan untuk pengisytiharan terakhir dalam gaya.

{ }

Atribut: Nama gaya yang anda ingin tetapkan untuk elemen HTML, yang terdiri daripada satu siri kata kunci, seperti warna, jidar, fon, dll., dalam CSS Menyediakan banyak atribut, anda boleh melihatnya melalui laman web rasmi W3C;

• Nilai: terdiri daripada nilai berangka dan unit atau kata kunci, digunakan untuk mengawal kesan paparan atribut tertentu, seperti nilai bagi atribut warna Ia boleh menjadi merah atau #F1F1F1 dsb.

• Apakah pemilih css?

Kami bermula dengan struktur Html

Pemilih yang biasa digunakan dalam css ialah:

<div id="box">
    <div class="one">
        <p class="one_1">
        </p >
        <p class="one_1">
        </p >
    </div>
    <div class="two"></div>
    <div class="two"></div>
    <div class="two"></div>
</div>

pemilih id (# kotak), pilih elemen dengan id kotak

• pemilih kelas (.one), pilih semua elemen dengan nama kelas satu

• Pemilih teg (div), memilih semua elemen dengan div teg

• Pemilih turunan (#box div), memilih semua elemen div dengan id di dalam elemen kotak

• Pemilih anak (.one>one_1), memilih semua elemen .one_1 yang elemen induknya ialah .one

• Pemilih adik beradik bersebelahan (.one .two), pilih semua .dua elemen

• sejurus selepas .satu pemilih kumpulan (div, p), memilih semua elemen

• Terdapat. juga beberapa pemilih yang kurang kerap digunakan:

Pemilih kelas pseudo

Pemilih elemen pseudo

:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素

Pemilih atribut

:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容

• Pemilih baharu dalam CSS3 adalah seperti berikut:

[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素

Pemilih hierarki (p~ul), memilih setiap elemen ul

• Pemilih kelas pseudo

Pemilih atribut

:first-of-type 表示一组同级元素中其类型的第一个元素
:last-of-type 表示一组同级元素中其类型的最后一个元素
:only-of-type 表示没有同类型兄弟元素的元素
:only-child 表示没有任何兄弟的元素
:nth-child(n) 根据元素在一组同级中的位置匹配元素
:nth-last-of-type(n) 匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从末尾开始计数
:last-child 表示一组兄弟元素中的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择可用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择与 <selector> 不匹配的所有元素

pemilih asas css dan keutamaan

[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素

cs pemilih asas

Nama pemilih

Penerangan Pemilih jenis/elemen juga dikenali sebagai pemilih jenis , pemilih asas ini mencari elemen HTML tertentu melalui nama elemen halaman HTML. Jika pemilih jenis digunakan secara bersendirian, ia akan mencari semua elemen dengan nama elemen ini dalam halaman HTML semasa. Pemilih kelas mencari elemen HTML tertentu melalui nilai atribut kelas elemen HTML. Penggunaan pemilih asas ini adalah dalam bentuk . serupa dengan pemilih kelas, kedua-duanya sepadan dengan elemen HTML berdasarkan atribut tertentu Pemilih kelas sepadan dengan pemilih kelas, manakala Pemilih ID sepadan dengan atribut id . Perlu diingat bahawa atribut ID adalah satu-satunya yang tidak boleh diulang dalam keseluruhan halaman.

	pemilih id .类名
	Pemilih Universal/Pemilih Wildcard	是一个星号（*），这个选择器是一个特殊的标签选择器，它可以指代所有类型的标签元素，包括自定义元素，以及<script>、<style>、<title>等元素，但是不包括伪元素。</script>
属性选择器	是通过HTML元素已经存在属性名或属性值来定位具体HTML元素，在官方文档中类选择器和ID选择器都属于属性选择器，因为本质上类选择器是HTML元素中class的属性值，ID选择器是 HTML 元素中id的属性值。

优先级

相信大家对CSS选择器的优先级都不陌生：

内联 > ID选择器 > 类选择器 > 标签选择器

到具体的计算层面，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

• 如果存在内联样式，那么 A = 1, 否则 A = 0

• B的值等于 ID选择器出现的次数

• C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数

• D 的值等于 标签选择器 和 伪元素 出现的总次数

这里举个例子：

#nav-global > ul > li > a.nav-link

套用上面的算法，依次求出 A B C D 的值：

• 因为没有内联样式 ，所以 A = 0

• ID选择器总共出现了1次， B = 1

• 类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1

• 标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3

上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)

知道了优先级是如何计算之后，就来看看比较规则：

• 从左往右依次进行比较 ，较大者优先级更高

• 如果相等，则继续往右移动一位进行比较

• 如果4位全部相等，则后面的会覆盖前面的

经过上面的优先级计算规则，我们知道内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!important

下面我们来看一个实例

nbsp;html>


    <meta>
    <title>这是一个demo</title>
    <style>
        #myid{color:red;}
        .myclass1{color:yellow;}
        h1,p {color:green;}

    </style>

    
        <h1 id="这是一个标题-请查看优先级">这是一个标题，请查看优先级</h1>
        <p>这是一个段落，请查看优先级</p>
    

我们可以看到因为标签

有行内样式，所以它显示为了蓝色；

而标签

虽然定义了三种css样式，但是由于id选择器的优先级最高，所以显示为了红色

（学习视频分享：web前端）

Atas ialah kandungan terperinci Adakah pemilih dalam css termasuk pemilih tag hiperteks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!