css选择符有哪些?css基本的选择符包括通配选择符、类型选择符、属性选择符、id选择符、类选择符、包含选择符和子对象选择符,还有一个特别的是选择符混用,接下来我们就分别的来看一看这几种选择符。
一.通配选择符(Universal Selector):
语法:*
说明:1.*表示通配符,表示所有的
2.格式:*{样式列表}
3.用于整个页面或网站字体、边距、背景等
例子:除了规定p标签内包含的元素使用p大括号内指定的样式,其它的都使用*大括号内指定的样式。
立即学习“前端免费学习笔记(深入)”;
通配选择符 普通文本段落文本
span内联文本div文本div子div元素中的文本div中段落文本
div中span内联文本
输出如下:

二. 类型选择符(Type Selectors):
语法:E1
说明:1.类型选择符用于设定特定HTML元素样式
2.元素名称不区分大小写
3.格式:HTML元素名{样式列表}
例子:p指定了大括号内的样式,那么下面标签类型为p的都是用它的样式;同理下面的p也是。
类型选择符 类型选择符
类型选择符
输出如下:

三.属性选择符(Attribute Selectors):
语法:1. E1[attr]
2. E1[attr=value]
3. E1[attr~=value]
4. E1[attr|=value]
说明:用于定义特定属性值的HTML元素样式.
例子:我们看到下面的例子里面第一个属性为type的,那么下面属性为type的就使用它指定的样式,同理button,有的人就问了,在button的前面不是也有type类型的吗,在这种情况下,取后面的标签样式,等同于覆盖了同括号内前面的type,后来者居上。
属性选择符
输出如下:

四.包含选择符(Descendant Selectors):
语法:E1 E2
说明:1.用于子元素对父元素样式的扩展
2. 格式:父选择符子选择符{样式列表}
3.注意HTML元素包含关系
例子:包含选择符简单,如下面的span是包含在p内的,但是span里面的元素选择的就是p p span 指定的样式,p里面的元素选择的就是p p 指定的元素,这就是就近原则:
包含选择符 包含选择符
包含选择符 包含选择符
输出如下:

五.子对象选择符(Child Selectors):
语法:E1>E2
说明:1.用于子对象元素对父对象元素样式扩展
2. 格式:父对象选择符>子对象HTML元素名称{样式列表}
3.注意和包含选择符的区别
4.使用情况较少,通常可以用包含选择符取代
例子:子对象选择符其实和原本标签使用顺序没有什么变化,如
- ,,,
子对象选择符 水果列表
- 香蕉
- 苹果
- 桃子
| 单元格一 | 单元格一 |
- 足球
- 全世界第一大球类运动
- 篮球
- 全世界第二大球类运动
- 排球
- 全世界第三大球类运动