选择器
作用:选择页面上的某一个或者某一类元素
基本选择器
- 标签选择器
- 类选择器
- id选择器
标签选择器
作用:会选择到页面上所有的这个标签的元素
语法:
h1{
color: #a13d30;
background:#3cbda5;
}
类选择器
.a{
color: #311111;
}
<h1 class="a">xxx</h1>
<p class="a">sss</p>
注意:类选择器可以复用
id选择器
例如:
/**用法
#id名称{}
*/
#a{
color: #ff008a;
}
<h1 id="a">标题</h1>
注意:id必须保证全局唯一,不能出现第二个地方使用同一个id
优先级
id选择器>类选择器>标签选择器
注意:不遵循就近原则,与CSS导入方式不同。
高级选择器
层次选择器
后代选择器
应用于在某个元素的后面的所有
例如:
body p{
background: red;
}
子选择器
应用于某个元素后面,只有一代
body>p{
background: red;
}
相邻兄弟选择器
应用于同辈,只有下一个生效
.active + p{
background: red;
}
/*
以下这种写法好像没有效果
body + p{
background: red;
}
*/
<p class="active">p1</p>
<p>p2</p>
结果:p2所在一行呈现红色,p1不变色。
通用选择器
应用于当前元素向下(不包括自身)所有相同元素
.active ~ p{
background: red;
}
结构伪类选择器
举例:
/*ul的第一个li*/
ul li:first-child{
background: green;
}
/*ul的最后一个li*/
ul li:last-child{
background: red;
}
/*定位到父元素下第一个元素,
且是p的子元素才有效,其余类似*/
p:nth-child(1){
background: red;
}
/*选中父元素下的第二个p元素*/
p:nth-of-type(2){
background: red;
}
/*鼠标移上去就会有颜色覆盖*/
p:hover{
background: mediumvioletred;
}
属性选择器(常用)
使用方法(以标签a举例):
- a中包含某属性的所有
a[属性名]{}
- a中包含某属性为某属性值的所有(属性值可以使用正则表达式)
/*a中某属性值与所需绝对相等*/
a[属性名 = 属性值]{}
/*
a中某属性的属性值包含所需属性值的所有
这里属性名和*=之间可以不加空格,所以属性名不能有"*"
*/
a[属性名 *= 属性值]{}
其他正则表达式:
- ^= 以这个开头
- $= 以这个结尾
举例:
/*a中有id的所有*/
a[id]{
background: blue;
}
/*a中存在属性id="first"的所有元素*/
a[id=first]{
background: red;
}
/*
这里id=first和id="first"经测试后结果相同,
应该都可以用
*/