CSS 基本选择器

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
属性选择器可以根据元素的属性及属性值来选择元素。

三种基本的选择器类型:标签名选择器、类选择器、ID选择器

注意:在标签内写入style=" "的方式,应该是CSS的一种引入方式,而不是选择器,因为根本就没有用到选择器。

1:标签名选择器
一个HTML文档中有许多标签,例如p标签,h1标签等。若要使文档中的所有p标签都使用同一个CSS样式,就应使用标签选择器。

html {color:black;}
h1 {color:blue;}
p2{color:silver;}

即直接使用HTML标签作为选择器。


2:类选择器
使用标签选择器可以为整个HTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中,HTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。

测试代码

.test {color:red;border:1px blue solid;}

在html文档里,我们在要控制样式的标签的开标签(非成对标签如input直接放在标签里)里加入 class="xxx",在页面对应的css文件里,用.xxx就可以指向这个标签,从而对这个标签进行控制,我们称这种通过定义类(class)来找到标签的方式为 :类选择器。

这种定义class 的方式是前端开发最常用的选择器,有几个突出的特点:可以给不同的标签设置同一个类,从而用一条CSS命令控制几个标签,减少大量代码,是页面修改简单,易维护,易改版;其次,后台工作人员机会不会用到有关class的相关设置,不需要跟后台人员之间进行交互;再者,可以通过js等动态改变标签的Classname,从而改变整个标签的样式,使前端动态效果实现起来更为容易。


3:ID选择器
ID选择器和类选择器相似,不同的是,ID选择器不能复用。在一个XHTML文档中,一个ID选择器只能把其CSS样式指定给一个标签。

测试代码

#test {color:red;border:1px blue solid;}

有 ID 的 HTML元素可以被JavaScript来操纵.再就是ID也是后台开发人员会经常用的,所以前端开发人员应该尽量少的使用。



Weiter lernen
||
CSS中CLASS与ID实例
我在浏览器下浏览,内容背景将是白色
我在浏览器下浏览,内容背景将是红色
einreichen Code zurücksetzen
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!