一、全局选择器
可以和任何元素匹配,优先级最低,一般做样式初始化
二、元素选择器
元素选择器:就是对已选中的HTML元素符号设置CSS样式(例如:b、div、p、a、ul、li、body、img等元素符号)。
标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”
参考代码片段:
div{
width:80px;
height:90px;
}
元素选择器是指用 HTML标签名作为选择器,按 标签名称分类,为页面中某一类标签指定统一的CSS样式。
温馨提示:
1.所有的标签都可以是选择器
2.无论这个标签藏得多深,一定能够被选择上
3.选择的所有,而不是一个
-
三、class选择器
-
class选择器(类型选择器):是最常见和易于理解的。该选择器通过绑定HTML元素上已设置的class标签进行设置对应的CSS样式。
以 .(class选择符前缀)加上对应的class名称组合成选择器的元素符号。
例如,要选择页面上class属性为hello的元素:
class属性的特点
1.类选择器可以被多种标签使用
2.类名不能以数字开头,可以由下划线、字母、数字组成
3.同一个标签可以使用多个类选择器。用空格隔开
四、id选择器
id选择器
:该选择器通过绑定HTML元素上已设置的唯一 id
标签进行设置对应的CSS样式。
id选择器
可以为标有特定id
的HTML元素指定特定的样式
。
HTML元素
以id属性来设置id选择器
,CSS
中id选择器以"#"
来定义。
因为HTML页面中id标签的唯一性(不允许同时存在两个相同的id),所以id选择器的复用性相对较低,因此较为建议使用class选择器
参考代码片段:
#hello{
width:80px;
height:90px;
}
注意:
- id 属性在文档内必须是
唯一
的。-
不要
使用数字
开头的 id 属性!在某些浏览器中可能出问题。
五、后代选择器
后代选择器
: 选中某个父级下对应的所有子级
,并针对该子级设置CSS样式。
后代标签
只要是当前标签里面的任意一个标签
都行不一定非要亲儿子
- 后代选择器设置的CSS样式
不会影响
到父级。 - 父级和子级之间需要用
空格隔开
。 - 后代选择器可以存在
多层级父级
,并不局限在单一父子级之间,层级越深所设置的CSS样式优先级越高。实例:
语法解释:
在
后代选择器
中,规则左边的选择器一端包括两个或多个用空格分隔
的选择器。选择器之间的空格是一种结合符
(combinator)。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”,但是要求必须从右向左
读选择器。
六、子元素选择器
子元素选择器
: 子元素选择器与后代选择器较为类似。相对于后代选择器,子元素选择器所涉及的范围会更小。
-
后代选择器
可以跨层级影响,而子元素选择器
要求父元素和子元素一定为上下级
关系,中间如果隔着其他元素则会失效。 - 父元素和子元素之间需要用
>
(子结合符)
隔开。
七、相邻选择器
如果需要选择紧接
在另一个元素后
的元素,而且二者有相同
的父元素
,可以使用相邻兄弟选择器
(Adjacent sibling selector)。
相邻选择器
: 选中对应元素的下一个兄弟元素。
- 所涉及的相邻兄弟元素必须是该元素的
同级元素
。 - 所涉及的相邻兄弟元素必须是
相邻兄弟元素
,中间若有其他元素隔开也将导致失效。 - 元素A和对应的相邻兄弟元素之间需要用
+
隔开。
八、属性选择器
属性选择器
: 检索HTML页面中符合所设置的属性
条件的元素
。根据元素的属性
和属性值
来匹配元素
。
属性选择器
:通过[ ]
设置被选元素的属性条件。其中包含属性名称
,后跟可选条件
以匹配属性的值。
属性选择器
分两类:
- 存在和值属性选择器 (匹配精确的属性值)
1. [attr]: 包含attr
属性的所有元素
2. [attr=val]:选择属性attr
被赋值为val
的所有元素
3. [attr~=vall]:仅选择
属性attr
中,属性值包含val
的所有元素
- 子串值属性选择器 (伪正则选择器)
1. [attr|=val]:选择attr属性的值是val
或值以val-开头
的元素
2. [attr^=val]:选择attr属性的值以val开头(包括val
)的元素
3. [attr$=val]:选择attr属性的值以val结尾(包括val)
元素
4. [attr*=val]:选择attr属性的值中包含字符串val
的元素
属性选择器的使用方式比较多样性,大家可以在代码试运行小题中尽情体验。
1、属性选择器的基础用法
存在和值属性选择器
:可以匹配精确的属性值
参考代码片段:
1. 设置页面上所有含有id属性的div元素
div[id]{
color:red;
}
2. 设置页面上所有含有href属性并且属性值为https://www.woaixuexi.cn的a元素
a[href="https://www.woaixuexi.cn"]{
color:red;
}
3.设置页面上所有含有class属性并且属性值的词列表的某个词等于woaixuexi的div元素。(适用于针对设置了多个class名称的元素使用)
div[class~="woaixuexi"]{
color:red;
}
2、属性选择器的进阶用法
除了基础的属性选择器外,接下来将给大家介绍一些特殊的属性选择器用法。
子串值属性选择器
: 伪正则选择器
参考代码片段:
设置页面上所有含有class属性并且属性值中以woaixuexi开头的div元素
div[class^="woaixuexi"]{
color:red;
}
设置页面上所有含有class属性并且属性值中以woaixuexi结尾的div元素
div[class$="woaixuexi"]{
color:red;
}
设置页面上所有含有class属性并且属性值中包含woaixuexi的div元素
div[class*="woaixuexi"]{
color:red;
}
设置页面上所有含有class属性并且属性值等于woaixuexi或者以woaixuexi开头的div元素
div[class|="woaixuexi"]{
color:red;
}
九、选择器优先级
优先级从高到低:行内样式>ID选择器>类选择器>元素选择器
十、选择器分组
选择器分组
:当需要多个元素同时使用同一套CSS样式时,可以使用选择器分组,这样可以避免为每个元素单独设置样式而造成不必要的冗余。
选择器分组
通过 , (逗号)
将需要复用同一套样式的多个元素进行分隔。
参考代码片段:
/***选择器分组写法***/
a,p,div{
color:red;
}
/***原始写法***/
a{color:red}
p{color:red}
div{color:red}
注意:两种写法,同样实现了,将 a元素,p元素和div元素的CSS样式进行更改,但是用原始写法,代码就很冗余,用选择器分组写法明显简洁许多,所以推荐使用
选择器分组写法
。