前言
有时候我在想，咱们前端写页面比较花时间，能不能尽量的减小部分时间呢？固然你会说“你傻啊，不是有UI库嘛！”，可是别忘了，不是每一个项目都有可用的UI库，同时使用别人的UI库，并不能百分百可以解决你全部的问题，若是咱们对CSS选择器了解的更多一些，或许就能够少写不少JavaScript代码，好比：鼠标的移入移出效果，选项卡的背景图切换，图片的渐隐渐显等等，咱们须要掌握这些(包括不经常使用的)CSS选择器，不管咱们在前端布局UI，仍是替代javaScript写效果,都能大大的提高咱们的效率。css
CSS选择器分类
通配符选择器
*{
margin:0;
padding:0;
}
复制代码
元素（标签）选择器
p{ color:red; } 复制代码
类选择器
.warning{ color:red; } 复制代码
ID选择器
#warning{ color:red; } 复制代码
优先级html
!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符前端
属性选择器
示例htmljava
<ul> <li foo>1</li> <li foo="abc">2</li> <li foo="abc efj">3</li> <li foo="abcefj">4</li> <li foo="efjabc">5</li> <li foo="ab">6</li> </ul> 复制代码
html
[attribute]工具
[foo]{ background-color:red; } 复制代码
选择全部带
foo属性的元素布局
view
[attribute=value]
选择 attribute=value 的全部元素。post
[foo=abc]{ background-color:red; } 复制代码
view
[attribute~=value]
选择 attribute 属性包含单词 value 的全部元素。优化
[foo~=abc]{ background-color:red; } 复制代码
view
[attribute^=value]
选择其 attribute 属性值以 value 开头的全部元素。相似正则的
^,以什么开始ui
[foo^=abc]{ background-color:red; } 复制代码
view
[attribute$=value]
选择其 attribute 属性值以 value 开头的全部元素。相似正则的
$,以什么结束url
[foo$=abc]{ background-color:red; } 复制代码
view
[attribute*=value]
选择其 attribute 属性中包含
value子串的每一个元素。
[foo*=abc]{ background-color:red; } 复制代码
view
[attribute|=value]
选择
attribute属性值以value开头的全部元素。
[foo|=abc]{ background-color:red; } 复制代码
view
文档结构选择器
示例html
<ul> <li> <h1>h1</h1> <p>p1</p> </li> <li> <h1>h1</h1> <p>p1</p> </li> </ul> 复制代码
html
后代选择器 element element
选择 element 元素内部的全部 element 元素。
ul li{ border: 1px solid red; } 复制代码
html
子选择器 element>element
选择父元素为 element 元素的全部 element 元素。
ul>li>p{ border: 1px solid red; } 复制代码
html
相邻兄弟选择器 element+element
选择紧接在 element元素以后的 element 元素。
示例html
<div> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> </div> 复制代码
html
h1+p{ color:red; } 复制代码
html
通常兄弟选择器 element1~element2
选择前面有 element1 元素的每一个 element2 元素。
示例html
<div> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> </div> 复制代码
html
h1~p{ border: 1px solid red; } 复制代码
html
伪类选择器
:root 文档根元素伪类
:root{ background-color:red; } 复制代码
:nth-child(n) 孩子选择器
示例html
<div> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> </div> 复制代码
html
div :nth-child(1){ color:red; } 复制代码
html
:nth-of-type(n) 同类型的第n个元素
div p:nth-of-type(2){ color: red; } 复制代码
html
element:first-child
选择属于父元素element的第一个子元素。 等同 :nth-child(1)
element:last-child
选择属于父元素element的最后一个子元素。
element:first-of-type
同类型的第一个子元素
element:first-of-type
同类型的最后一个子元素
element:only-child
选择了父元素 element 惟一的子元素
示例html
<div> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> </div> <div> <h1>h2</h1> </div> 复制代码
div :only-child{ color: red; } 复制代码
最终生效的元素的 div标签下面只有一个元素的 h1 ,即 内容 h2 变成红色，符合条件的都会改变
:empty 没有子元素
<!DOCTYPE html> <html> <head> <style> p:empty { width:100px; height:20px; background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p>第一个段落。</p> <p></p> <p>第三个段落。</p> <p>第四个段落。</p> <p>第五个段落。</p> </body> </html> 复制代码
生效的是 <p></p>,没有子元素
:nth-last-child(n) 倒数第n个子元素
<!DOCTYPE html> <html> <head> <style> div :nth-last-child(1){ color:red; } </style> </head> <body> <div> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <p>第四个段落。</p> <p>第五个段落。</p> </div> </body> </html> 复制代码
父元素div的倒数第一个元素 被选中
element:nth-last-of-type(n)
同类型的倒数第n个子元素
<!DOCTYPE html> <html> <head> <style> div p:nth-last-of-type(2){ color:red; } </style> </head> <body> <div> <h1>h11</h1> <p>第一个段落。</p> <p>第二个段落。</p> <p>第三个段落。</p> <h1>h11</h1> <p>第四个段落。</p> <p>第五个段落。</p> <h1>h11</h1> </div> </body> </html> 复制代码
<p>第四个段落。</p>处于同类型 p标签 倒数第2个
div p:nth-last-of-type(2n+1){ color:red; } 复制代码
2n+1(odd):奇数、2n(even)：偶数
element:last-of-type
同类型的倒数第一个子元素
element::first-of-type
同类型的第一个子元素
element::only-of-type
父元素里惟一同类型子元素
<!DOCTYPE html> <html> <head> <style> div h1:only-of-type{ color: red; } </style> </head> <body> <div> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> <h1>h2</h1> </div> <div> <h1>h2</h1> </div> </body> </html> 复制代码
<h1>h2</h1>符合，被选中
a:link
没有访问过的状态
a:active
连接正在被点击
a:hover
选择鼠标指针位于其上的连接。
a:visited
选择全部已被访问的连接。
:focus
:focus 选择器用于选取得到焦点的元素。
提示：接收键盘事件或其余用户输入的元素都容许 :focus 选择器。
:enabled / :disabled
选择每一个启用的
input元素 / 选择每一个禁用的input元素
:checked
选择每一个被选中的
input元素。自定义开关能够用这个实现
:not(selector)
选择非 selector 元素的每一个元素。（反向选择）
伪元素选择器
element::first-line
<!DOCTYPE html> <html> <head> <style> p:first-line{ background-color:yellow; } </style> </head> <body> <h1>WWF's Mission Statement</h1> <p>To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.</p> </body> </html> 复制代码
p 元素的第一行发生改变
element::first-letter
<!DOCTYPE html> <html> <head> <style> h1:first-letter{ color:yellow; } </style> </head> <body> <h1>WWF's Mission Statement</h1> </body> </html> 复制代码
直接第一个字符变黄，若是JavaScript作的话，须要获取字符串，再获取第一个字符，再改变其颜色
element::before
在每一个 element 元素的内容以前插入内容。咱们更多的多是当初一个div来用
element::before
在每一个element元素的内容以后插入内容。咱们可能更多的是用来清楚浮动或验证表单提示等其它
::selection
选择被用户选取的元素部分。
参考文献
结语
有时候，咱们须要提升本身的效率，咱们须要更多的时间去专一咱们的业务，而不该该由于CSS方面的不懂而致使咱们的停步不前，浪费咱们大把时间，so，以此为习，巩固或是强化。
同时，若是你有更好的点子，欢迎留言
文中如有不许确或错误的地方，欢迎指出
往期文章 ：