css选择器
元素选择器
1.通配符选择器*
通配符选择器用来匹配到所有的元素
一般用法:用来清除元素默认的内外边距,使得样式统一
* {
padding:0;
margin:0;
}
2. 标签选择器
标签选择器就是用来匹配到相对应的html标签
比如:选中所有标签为p的元素,把其文字的样式修改为粉色pink
p {
color:pink;
}
3.类选择器
选中类名为指定类名的所有元素
比如:选中类名为box的元素,将其背景色修改为pink
.box {
background-color:pink; /*注意其写法为 .类名*/
}
4. id 选择器
选中id名为指定id名的元素,其中idzhi3就和人的身份证号码一样,都是唯一的,不能重复
比如:选中id值为tags的元素,将其字体颜色修改为pink
#tags {
color:pink; /* 注意id选择器的用法为 #id值 要和类选择器的.进行区分*/
}
关系选择器
1.包含选择器
使用空格分隔元素名称,选择元素内部的元素(不论是子元素还是孙子元素)
比如:选择div里面所有p元素,将其里面的字体设置为pink
div p {
color:pink;
}
2.子选择器
使用 > 分隔元素名称,选择元素内部的第一层元素(仅选择子元素)
比如:选择div里面的第一层p元素(子元素),将其里面的字体设置为pink
div > p {
color:pink;
}
3.相邻选择器
使用 + 分隔元素名称,选择第一个元素之后紧跟的那一个元素,两者是并列的关系
比如:选择div下面的第一个p元素,将其字体颜色设置为pink
div + p {
color:pink;
}
4.兄弟选择器
使用 ~ 分隔元素名称,选择ele1之后的全部ele2,注意两者是并列关系,并且拥有同一个父元素,ele2不一定需要紧跟在ele1后面
比如:选择div的兄弟元素p,并将其字体颜色设置为pink
div ~ p {
color:pink;
}
属性选择器
1.选择带有指定属性的选择器[attr]
比如:选择带有name属性的input框,将其背景色改为pink
input[name] {
background:pink
}
2.选择带有指定属性和值的选择器[type=value]
比如:选择出所有type=radio的input框,将其背景色修改为pink
input[type=radio] {
background:pink;
}
3.选择属性值中包含指定单词的元素[type~=value]
比如:选择出所有类名带有yellow的div,并将其背景色修改为yellow
div[class~=yellow] {
background:yellow;
}
4.选择属性值中带有指定值开头的元素[type^=first]
比如:选择出所有类名以first开头的div,并将其背景色设置为pink
div[class^=first] {
background:pink;
}
5.玄色属性值中带有