在这里向大家介绍一些选择器:
1.css基本选择器
2.css属性选择器
3.css包含选择器
4.css伪元素选择器
1.css基本选择器
选择器:是对HTML标签设置样式
- 标签元素选择器
用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
其基本语法格式如下:标签名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- ID选择器
id选择器使用“#”进行标识,后面紧跟id名.
其基本语法格式如下:#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
需要在html标签上,添加属性id=“选择器名”, 配合ID选择器进行使用 - class选择器,类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名
其基本语法格式如下:.类名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
需要在html标签上,添加属性class=“选择器名”, 配合class选择器进行使用
注意事项:
尽量不要使用ID选择器,如果需要使用ID选择器. 要保证:ID的属性值具有唯一性
当使用ID选择器和class选择器, 对同一个标签设置相同属性时, ID选择器 优先级高于 class选择器。
2.css属性选择器
属性选择器,在标签后面使用中括号标记
其基本语法格式如下:标签名[标签属性=’标签属性值’] {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
3.css包含选择器
包含选择器,两个标签之间使用空格,给指定父标签的后代标签设置样式,可以方便在区域内编写样式。
其基本语法格式如下:父标签 后代标签{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
4.css伪元素选择器
CSS 伪元素用于将特殊的效果添加到某些选择器。
如: 超链接的不同状态都可以指定不同的效果.
- 四个状态: 没点过,点过,鼠标悬浮,激活
- 样式: 固定顺序 l-v-h-a
a:link{color: #333333; text-decoration: none;}/**/
a:visited{color: #333333;text-decoration: none;}/已点过/
a:hover{color: red;text-decoration: none;}/鼠标悬浮/
a:active{color: green;text-decoration: none;}/点击/