1.元素选择器、id选择器、类选择器
/* css代码 */
/* 元素选择器 */
p {
color: red;
}
/* id选择器 */
#id1 {
color: yellow;
}
/* 类选择器 */
.class1 {
color: brown;
}
2.选择器分组(并集选择器)、复合选择器(交集选择器)
并集选择器 使用“,”隔开。
交集选择器 第一个必须为标签选择器,第二个为类选择器或id选择器,中间不能有空格。
/* 选择器分组 id为id1或者class为class1的元素 */
#id1,.class1 {
color: red;
}
/* 复合选择器 span元素并且class为class1的元素 */
span.class1{
background-color: yellow;
}
3.后代元素选择器、子元素选择器、兄弟选择器
- 父元素:直接包含子元素的元素;
- 子元素:直接被父元素包含的元素;
- 祖先元素:直接或间接包含后代元素的元素;后代元素:直接或间接被祖先元素包含的元素。
/* 后代元素选择器 选择div标签后代元素为span的元素 */
div span{
color: red;
}
/* 子元素选择器 选择div标签子元素为span的元素 */
div > span{
color: yellow;
}
/* 兄弟选择器 选择在span元素后第一个p元素 */
span + p {
color: red;
}
/* 兄弟选择器 选择在span元素后所有p元素 */
span ~ p {
color: red;
}
4.属性选择器
/* 属性选择器 p元素包含title属性的元素 */
p[title]{
background-color: yellow;
}
/* 属性选择器 p元素包含title属性值为hello的元素 */
p[title="hello"]{
background-color: yellow;
}
/* 属性选择器 p元素包含title属性包含独立的单词hello的元素 */
p[title~="hello"]{
background-color: yellow;
}
/* 属性选择器 p元素包含title属性前几个字母是he的元素 */
p[title^="he"]{
background-color: yellow;
}
/* 属性选择器 p元素包含title属性后几个字母是llo的元素 */
p[title$="llo"]{
background-color: yellow;
}
/* 属性选择器 p元素包含title属性包含字母是ll的元素 */
p[title*="ll"]{
background-color: yellow;
}
5.伪类和伪元素选择器
伪类选择器:相当于在元素上添加类选择器,使用:表示
伪元素选择器:相当于添加新的元素,使用::表示
/*
* 伪类选择器
* :link 表示没访问过的链接
* :visited 表示访问过的链接,由于涉及到用户的隐私问题,智能设置字体的颜色
* :hover 表示鼠标移入的状态
* :active 超链接被激活的状态
*/
a:link{
color: yellowgreen;
}
a:visited{
color: red;
}
a:hover{
color: skyblue;
}
a:active{
color: black;
}
/* p元素是父元素的第一个元素 */
p:first-child{
color: red;
}
/* p元素其父元素的最后一个元素 */
p:last-child{
color: red;
}
/* p元素其父元素的唯一子元素 */
p:only-child{
color: red;
}
/* p元素其父元素的第二个子元素 */
p:nth-child(2){
color: red;
}
/* p元素其父元素的倒数第二个子元素 */
p:nth-last-child(2){
color: red;
}
/* p元素其父元素的第一个元素p元素 */
p:first-of-type{
color: red;
}
/* p元素其父元素的最后一个p元素 */
p:last-of-type{
color: red;
}
/* p元素其父元素的唯一p元素 */
p:only-of-type{
color: red;
}
/* p元素其父元素的第二个p元素 */
p:nth-of-type(2){
color: red;
}
/* p元素其父元素的倒数第二个p元素 */
p:nth-last-of-type(2){
color: red;
}
/*
* 伪元素选择器
* 相当于p标签的第一个字母用标签包着
*/
p::first-letter{
color:blue;
}
/*
* 选择p内容第一行
*/
p::first-line{
color: red;
}
p::before{
content: "before内容";
}
/*
* 相当于p标签的最后添加一个新标签
*/
p::after{
content: "after内容";
}
6.选择器优先级
内联样式 > id选择器 > 类选择器 > 元素选择器
!import表示该样式优先级最高
p{
background-color: gray !important;
}