div+css网页布局设计新开端(2)

黄舟
Freigeben: 2016-12-29 14:13:23
Original
1258 Leute haben es durchsucht

下面介绍css里的选择器
啥为选择器?看下面就明白

     
这是一个div
Nach dem Login kopieren

其中大括号前的div就是html标签选择器,意思就是说html里所有div标签都采用此样式

     
这是一个div
Nach dem Login kopieren


这里多加几个div你会发现都是同一样式
这种标签选择器只能是html标签才能生效

下面介绍ID选择器

   
这是一个div
Nach dem Login kopieren

这玩意一看就明白,用id选择器前面加#

然后是类选择器

     
这是一个div
Nach dem Login kopieren

也是一看就明白 类选择器前面加.

下面说说它们的区别
id顾名思义就是唯一标识,一个标签只能用一次,他的优先级要比类选择器要高
而类选择器在一个标签里可以用多个

     
这是一个div
这是一个div
Nach dem Login kopieren


     
这是一个div
这是一个div
Nach dem Login kopieren

是一样的

另外说一句,css样式块,也就是这个

.a{ border:solid 1px; width:100px; height:100px; background:red }
Nach dem Login kopieren

最后一个可以省略分号,但最好加上

     
这是一个div
Nach dem Login kopieren

由于id选择器优先级高,它会采用id选择器的背景颜色
优先级比较
id选择器》类选择器》标签选择器

但是类选择器可以在一个标签使用多个,这是id选择器做不到的

     
这是一个div
Nach dem Login kopieren

class="a b" 注意要空格

这是一个div
这样是无效的

如果两个类选择器内容冲突怎么办?

     
这是一个div
Nach dem Login kopieren

注意就背景颜色不一样
它会采用样式表里最靠后的,也就是谁在谁后面就采用那个,答案是绿色
跟这个class="a b" 前后关系无关

以上就是div+css网页布局设计新开端(2)的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!