一、属性选择器
Element[attr]只使用属性名，但没有确定任何属性值
p[cxy]{background: red;color: white;}Element[type="text"]指定属性名，并指定了该属性的属性值
p[cxy=html]{background: red;color: white;}p[cxy='css']{background: red;color: white;}Element[attr~="value"]指定属性名，属性值是一个列表，并且以空格隔开，其中列表中包含了一个value词
<p cxy='html test'>html</p>// 包含有html的元素p[cxy~=html]{color: yellow;}// p[cxy=html]{color: yellow;} 这是获取不到对应元素的Element[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
<p cxy='javascript'>javascript</p><p cxy='jquery'>jquery</p>
// 以j开头的元素
p[cxy^=j]{ color: yellow; }Element[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
// 以s结尾的元素p[cxy$=s]{ color: blue; }Element[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
// 只要是包含css的元素p[cxy*=css]{ color: black; }Element[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
// 以'z-'开头的属性，或属性为'z'的元素
p[cxy|=z]{ color: black;}案例: 百度文库
二、结构性伪类选择器
Element:nth-child(n) 表示Element父元素中的第n个字节点
p:nth-child(odd){background:red} // 匹配奇数行p:nth-child(even){background:red} // 匹配偶数行p:nth-child(2n){background:red} // 偶数p:nth-child(1){ background: red;} // 第一元素p:nth-child(1){ background: red;}指找p标签父级下的第一个子元素，并且这个元素是p标签
<body> <p> 1、星期一 </p> <!-- p:nth-child(1) --> <h1> 测试 </h1> <!-- h1:nth-child(2) --></body>
Element:nth-last-child(n) 表示Element父元素中的第n个字节点，从后向前计算
p:nth-last-child(1){ background: red;} // 最后一个元素Element:nth-of-type(n) 表示Element父元素中类型为Element的第n个字节点
p:nth-of-type(2){background: red;} // 找p标签父级下的第二个pElement:nth-last-of-type(n)表示Element父元素中的第n个字节点，且类型为Element，从后向前计算
p:nth-last-of-type(2){background: red;} // 找p标签父级下的倒数第二个pElement:first-child 表示Element元素中的第一个子节点
h1:first-child{ background: red;} // 等同于p:nth-child(1)Element:last-child 表示Element元素中的最后一个子节点
h1: last-child{ background: red;} // 等同于p:nth-last-child(1)Element:first-of-type 表示Element父元素中的第一个子节点且节点类型是Element的
h1:first-of-type{background: red;} // 等同于nth-of-type(1)Element:last-of-type 表示Element父元素中的最后一个子节点且节点类型是Element的
h1:last-of-type{background: red;} // 等同于nth-last-of-type(1)三、伪类选择器
E:target 表示当前的URL片段的元素类型，这个元素必须是E
// http://127.0.0.1:8020/test.html#view1div:target{ display: block; } // url中的hash值E:disabled 表示不可点击的表单控件
input: disabled{color: red;}E:enabled 表示可点击的表单控件
input: enabled{color: gray;}E:checked 表示已选中的checkbox或radio
input:checked{ width: 50px; height: 50px; }案例: 改变单选框/复选框样式
E:first-line 表示E元素中的第一行
p:first-line{ color: red; }E:first-letter 表示E元素中的第一个字符
p:first-letter{font-size: 30px;}E::selection表示E元素在用户选中文字时
p::selection{ background: red;color: white; }E::before 生成内容在E元素前
p:before{ content: '你是谁啊?'; display: block;}E::after 生成内容在E元素后
p: after{ content: '你是谁啊?'; display: block;}E:not(s) 表示E元素中，s元素不被匹配
// p元素中，元素名为.view2的不被匹配到p:not(.view2){ color: blue;}E~F表示E元素毗邻的F元素(即E元素之后的)
p~h1{ background: red;} // p后面的h1元素才生效Content 属性
p: after{ content: '你是谁啊?'; }四、子元素选择器
不希望选择任意后代，缩小范围，只选择某个元素的子元素，即可以使用子元素选择器；
E1 > E2 表示E1的子元素中所有的E2
// 即h1子元素的所有strong
h1 > strong {color:red;}五、相邻兄弟选择器
E1 + E2 表示E1元素后面的E2(E1和E2父元素一致)
h1 + p {margin-top:50px;}
作者：EndEvent
链接：https://www.jianshu.com/p/d6e056bcb0a3
共同学习，写下你的评论
评论加载中...
作者其他优质文章
