css选择器全解

时间:2021-11-26 20:41:20
/* 选择器 选择器总是从左至右解析,不要私自添加()优先运算 */
h2{ /* 标签选择 */
}

p,h1{ /* 使用逗号实现元素合集 */
}

div h1,div h2{ /* 使用空格实现后代元素(子元素和子孙元素)查询,表示div的后代元素h1,h1和div的合集,在从合集中查找后代元素h2,最后查询到的为h2列表 */
background-color: #2b542c;
}

p>h1{ /* >表示直接子元素 */
}

p+h1{ /* +表示紧接在后面的同胞元素,选择h1元素 */
}

html>body table+ul{ /* 在html元素中查询直接子元素body,在body中查询后代元素table,在table元素后面查询同胞元素ul,即在最后选择的为ul列表 */
}

body *{ /* *通配符选择器,匹配所有元素,表示匹配body的所有后代元素 */
}

p.class1.class2{ /* .表示class类选择器,p为标签,连在一块写,表示多重筛选,一个元素可以有多个样式 */
}

#id1{ /* #id选择器,一个元素只能有一个id,所有元素的id不能相同 */
}

/* 属性选择器 */
p[attribute1][attribute2]{ /* [] 属性选择器,表示具有某种属性的所有元素,多个参数表示同时具有多个属性,class也可以作为一个属性筛选 */
}

a[href="http://www.123.com"]{ /* =具有某个属性,且属性值等于指定值的所有元素 */
}

div[class~="class1"]{ /* ~=具有某个属性,且属性值包含指定值的所有元素 */
}

input[title^="title1"]{ /* ^=指定属性的值以指定字符串开头 */
}

input[title$="title1"]{ /* $=指定属性的值以指定字符串结尾 */
}

input[title*="title1"]{ /* *=指定属性的值包含指定字符串 */
}

input[title|="title1"]{ /* |=指定属性的值等于title1或者以title1-开头 */
}



/* 伪类选择器 :表示伪类 */
a:link{ /* link表示未访问过的超链接 */
}

a:visited{ /* visited表示已访问过的超链接 */
}

input:focus{ /* focus表示当前拥有焦点的元素 */
}

div:hover{ /* hover表示鼠标指针停留的元素 */
}

a:active{ /* active表示被用户输入激活的元素 */
}

div:first-child{ /* first-child表示第一个元素,此句表示第一个div元素 */
}

div :first-child{ /* 空格表示后代元素,此句表示div元素的第一个后代元素 */
}

/* 伪元素选择器 */
p:first-letter{ /* first-letter行内元素首字母 */
}

p:first-line{ /* first-line行内元素首行 */
}

p:before{ /* before元素前插入内容 */
content:"AAAAAAAAAAA";
color: #2b542c;
}

p:after{ /* after在元素后插入内容 */
content: "AAAAAAAAAAAA";
color: #2b542c;
}