基本选择器有三种:标签选择器、class选择器、id选择器。
标签选择器
p{ color:red; }
什么是标签选择器?
根据指定标签名称,在当前界面中找到所有该名称的标签,并设置属性。
注意点
标签选择器选中的是当前界面所有同名标签,不能单独选中
只要是HTML中的标签都可以作为标签选择器
id选择器
#id{ color:red; }
什么是id选择器?
根据指定标签的id,在当前界面中找到该id的标签,并设置属性
注意点
每个HTML标签都有id属性
同一个界面中id是唯一的,不能重复
编写id选择器必须要在id前面加上一个#号
id的名称有一定的规范,只能由字母数字和下划线组成
id的名称不能够以数字开头
id的名称不能与HTML标签同名
如果仅仅是为了设置样式,我们不会使用id,因为前段开发中id是留给js使用的
class选择器
.class{ color:red; }
什么是class选择器?
根据指定标签的class,在当前界面中找到该class的标签,并设置属性
注意点
每个HTML标签都有class属性
同一个界面中class属性是可以重复
编写class选择器必须要在class名称前面加上一个.号
class的名称有一定的规范,只能由字母数字和下划线组成
class的名称不能够以数字开头
class的名称不能与HTML标签同名
class就是专门给某一类标签设置样式的
一个标签可以同时绑定多个class属性
<p class="p1 p2 p3">Test paragraph</p>
,这样就绑定了三个类属性
类选择器实践,通过对不同类的组合来实现不同的效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>class选择器</title> <style> .red{ color: #FF0000; } .underline{ text-decoration: underline; } .bigsize{ font-size: 30px;; } </style> </head> <body> <p class="bigsize red">第一段文字</p> <p class="underline bigsize">第二段文字</p> <p class="red underline">第三段文字</p> </body> </html>
基本选择器的优先级
style > id选择器 > class选择器 > 标签选择器
更多CSS相关知识,可访问 CSS教程 !!
以上就是css基本选择器是哪三种?的详细内容,更多请关注易知道|edz.cc其它相关文章!