目录
-
通配符选择器
-
ID选择器
-
类选择器
-
ID选择器跟类选择器的区别
-
复合选择器
5.1 标签指定式选择器(即…又…)
5.2 后代选择器(包含选择器)(重点)
5.3 并集选择器(常用)
5.4 子代选择器
5.5 交集选择器 -
属性选择器
-
通配符选择器
通配符选择器用“*”表示,它是所有选择器中作用最广的,能匹配页面中所有的元素,基本语法如下:
*{
代码块
}
通配符选择器的穿透力很强,优先级高于继承的样式,会覆盖继承的样式,一般不用
- ID选择器
HTML标签中ID的属性值在一个页面中必须是唯一的
在目标标签中设置一个ID属性值
在style标签中以
#属性值{
}
格式进行样式设置
效果:可以使同种标签进行不同的样式设置
ID选择器命名规范:
1)只可出现字母,下划线跟数字(且字母大小写严格区分)
2)只允许字母开头
3)不建议太长
4)不允许出现标签名
- 类选择器
.类名{
}
引用方式:在标签中用class来引用
类可以有多个:两类用空格分开
<p class="wab demo">信息与通信工程学院</p>
- ID选择器跟类选择器的区别
1,相同的class属性可以在HTML中出现多次。ID属性值在页面中只能出现一次
2,一个class的属性可以有多个值,也就是说一个标签可有多个类
建议尽量使用类选择器,使用ID时候情况,当确实能唯一确定当前页面中标签只出现一次,这时可以使用ID选择器。
如果不能保证相同作用的标签在页面中只出现一次,那么这时就选择使用类选择器。
- 复合选择器
5.1 标签指定式选择器(即…又…)
标签指定式选择器又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或ID选择器,两个选择器之间不能有空格,如:h3.special或p#one
5.2 后代选择器(包含选择器)(重点)
作用范围:所有后代
可层级多个,一般不要超过三重
后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代
/* 首先先找到所有的 .box类对应的标签,然后找到该标签的所有li后代标签 */
.box li{
属性
}
div li span{
属性
}
#one li{
属性
}
5.3 并集选择器(常用)
并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器,class选择器,ID选择器等),都可以作为并集选择器的一部分,如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的css样式
h1{ color: red;}
h2{ color: red;}
p{ color: red;}
h1, h2, p { 跟上面效果相同(逗号加空格)
color: red;
}
5.4 子代选择器
子代选择器,是让css智能选择儿子辈的元素
例如:
h1 > strong { Color: red; }
解读为:选择器h1>strong 可以解释为“选择作为h1元素子元素的多有strong元素”
尖括号和选择器之间可以有空格也可以没有,无限制
建议:选择器和尖括号间有空格
5.5 交集选择器
注意:中间没有连接符,但是如果有标签选择器,标签选择器一定要写在最前边
交集选择器:
语法:
选择器1选择器2选择器3+..... {
属性名:属性值;
} */
/* 既是p又有类one */
p.one {
color: pink;
}
- 属性选择器
通过标签内的属性来筛选需要控制的标签
一:是否有某属性
h1[id] {
color: red;
}
二:是否有某属性,且该属性值为指定值
input[type="text"] {
background-color:chartreuse;
}
三:是否有指定多个某些属性
h1[id][class] {
font-size: 17px;
}
补充:
E[attr]:只要这个元素存在attr这个属性
E[attr=“val”]:元素中attr的值必须是val
E[attr^=“val”]:attr属性值中是以val开头的
E[attr$=“val”]:attr属性值中是以val结尾的
E[attr*=“val”]:attr属性值中存在val属性的
例子:
/* type^="val":表示type属性值以val开头 */
li[type^="meat"]{
}
/* type$="val":表示type属性值是以val结尾的 */
li[type$="hot"]{
}
/* type*="val":表示type属性值中只要有val这个值就行 */
li[type*="very"]{
}
以上。