概述
目录
CSS选择器:一.标签选择器:
二.通配符选择器:
三.类选择器
四.id选择器
五.属性选择器
六.并集选择器
七.后代选择器
八.子代选择器
九.伪类选择器
十.兄弟选择器
CSS选择器:
一.标签选择器:
标签选择器也称为类型选择器,她直接使用元素的标签名当做选择器,将选择页面上所有该种标签。
语法:
标签名{
属性:属性值;
.......
}
作用:标签选择器可以吧某一种标签全部选择出来,比如所以的<div>标签和所有的<span>标签
优点:能快速为页面中同类型的标签统一设置样式
缺点:不能设计差异化样式,只能选择全部的当前标签
二.通配符选择器:
在CSS中,通配符选择器使用“ * ”定义,它表示选取页面中所有元素
语法:
* {
属性:属性值
}
三.类选择器
类名为HTML元素的class属性值,大多数HTML元素都可以定义class属性
语法:
. 类名 {
属性: 属性值
}
优点:可以为元素对象定义单独或相同的样式,而且多个标记可以使用同一个类名,
可以实现为不同类型的标记指定相同的样式
四.id选择器
id选择器使用“ # ”进行标识,后面紧跟id名
语法:
# id名{
属性:属性值
}
id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素
五.属性选择器
属性选择器可以为拥有指定属性的HTML元素设置样式,而不仅限于class和id属性
语法:
[标签名称]{
属性:属性值
}
六.并集选择器
并集选择器是同时匹配多个选择器,取多个选择器的并集,选择器之间用逗号隔开
语法:
标签名称1,标签名称2 {
属性:属性值
}
七.后代选择器
后代选择器也叫包含选择器,用来选择特定元素的后代
语法:
div p { color: red; }
八.子代选择器
子代选择器使用“ > ”表示,表示匹配第二个选择器,且为第一个选择器的元素的后代
语法:
标签名称1>标签名称2 {
属性:属性值
}
注意:
1.只会查找子代
2.子元素选择器可以用其他的id和class选择器来进行查找
3.子元素选择器也可以通过“ > ”符号一直延续下去
九.伪类选择器
CSS提供了五种基本伪类选择器,分别对应HTML标记的五种状态。
伪类选择器 | 作用 | 应用对象 |
---|---|---|
:hover | 定义标记在鼠标悬停(划过)时的样式 | 所有显示标记 |
:link | 定义标记在超链接状态下的样式 | a标签 |
:focus | 定义标记在获取焦点时的样式 | a标签(IE浏览器不支持) |
:visited | 定义标记被访问过后的样式 | a标签 |
:active | 定义标记在选定时刻下的样式 | a标签 |
十.兄弟选择器
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
相邻兄弟选择器使用+号表示,如p+a{ },表示匹配紧跟第一个选择器并匹配第二个选择器的元素,如紧跟p元素后的a的元素。
最后
以上就是典雅吐司为你收集整理的2022-8-23 第七小组 学习日记 (day47)CSS选择器CSS选择器: 一.标签选择器:二.通配符选择器:三.类选择器四.id选择器五.属性选择器 六.并集选择器 七.后代选择器八.子代选择器九.伪类选择器十.兄弟选择器 的全部内容,希望文章能够帮你解决2022-8-23 第七小组 学习日记 (day47)CSS选择器CSS选择器: 一.标签选择器:二.通配符选择器:三.类选择器四.id选择器五.属性选择器 六.并集选择器 七.后代选择器八.子代选择器九.伪类选择器十.兄弟选择器 所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复