详解CSS各种选择器和import导入样式表还有一些伪类选择器
(一)CSS选择器:
1.标签选择器:通过HTML的标签名直接选择该标签
2.类选择器:通过.选择器的名称{} 来对添加了class属性的标签进行选中
3.ID选择器:通过#选择器的名称{} 来对添加了ID属性的标签进行选择,ID是在HTML文档中唯一的
4.通用选择器:通过*{}来选择HTML文档中所有的标签
5.后代选择器: 选择器1(空格)选择器2 来选择一个标签中对应的所有子标签
6.子代选择器: 选择器1>选择器2 来选择一个标签中直接一代的子标签,对更深一层的不起作用
7.交集选择器:选择器1(中间没有空格)选择器2 例如#li.li{} 选择一个ID=li并且class=li的标签
8.并集选择器:选择器1,选择器2 例如:#li.li{} 选择ID=li或者class=li的标签
(二)选择器的优先级:
1.当作用于同一层的标签,比如都直接作用于标签li:ID选择器>类选择器>标签选择器>通用选择器
2.最内侧的选择器比外层的优先:div ul li>#ul li标签在ul最内侧,所有能覆盖外层ID选择器的样式
3.当作用于同一层,而且最后一层选择器一样,那么哪个精准哪个的优先级就高:div ul li>div li
4.当优先级完全相同的时候,现在后面的样式会覆盖前面的样式
补充:5.优先级的算法:style = 1000(行内样式表) id = 100(id选择器) class = 10(类选择器) element = 1(标签选择器) 用法:前提是作用在同一层:比如 #ul li{} 和ul #li{} 2者的优先级哪个高呢,#ul li{}优先级用数值表示为101(100+1),后者的优先级数值为101(1+100),所以优先级一样高,前提是2个选择器必须作用于同一层
(三)三种方式链接样式表以import导入样式表
1.行内样式表:写在HTML标签里面,通过style属性,优先级最高,但是把HTML代码和CSS代码糅合在一块,不符合CSS的标准“内容和样式相分离”,而且不利用后期的维护
2.内部样式表:写在head的子标签style中,在一定程度上实现了内容与样式分离,但是无法实现样式复用 引用方式:
3.外部样式表:实现了内容与样式的分离,方便后期的维护与复用,符合W3C的标准,优先级最低 引用:在head标签中通过
4.import导入样式表:在内部样式表style中,通过@import url(CSS资源地址)来导入CSS样式表
注意:内部样式表和import导入的区别:
1)link标签是html的标签,而import不是
2)link可以链接各种资源,而import只能导入CSS样式表
3)link标签相当于在hmtl代码和css样式中起到桥梁作用,链接css代码,而import是导入css样式表,会在文档加载时,导入CSS文件到HMTL中
4)link方式是在文档边加载时,边链接CSS样式,而import是在html文档中完之后,在导入css样式
终上所述:选择link标签链接好
(四)伪类选择器:
选择器名称:伪类{},伪类标签标签的一个状态,比如:a:link{}:标签a标签为方位是的样式;a:hover{}:当鼠标放在a标签时显示的样式;a:active{}:当鼠标在a标签按下时显示的样式;a:visited{}:当a标签访问后时显示的样式;也可以:a:first-chird{}表示a标签有父容器,而且是父容器下第一个子标签a被选中
更多详解CSS各种选择器和import导入样式表还有一些伪类选择器相关文章请关注PHP中文网!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau

Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum

Tidak kira tahap tahap anda sebagai pemaju, tugas yang kami selesaikan -sama ada besar atau kecil -membuat kesan besar dalam pertumbuhan peribadi dan profesional kami.

Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.

Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.

Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.

Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
