前端布局必须了解的css选择器

时间 2020-05-09

标签前端布局必须了解 css 选择器栏目 CSS 繁體版

原文原文链接

前言

有时候我在想，咱们前端写页面比较花时间，能不能减小这部分时间呢？固然你会说“你傻啊，不是有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>
复制代码

[attribute]工具

[foo]{
    background-color:red;
}
复制代码

选择全部带 foo 属性的元素布局

[attribute=value]

选择 attribute=value 的全部元素。post

[foo=abc]{
    background-color:red;
}
复制代码

[attribute~=value]

选择 attribute 属性包含单词 value 的全部元素。优化

[foo~=abc]{
    background-color:red;
}
复制代码

[attribute^=value]

选择其 attribute 属性值以 value 开头的全部元素。相似正则的 ^,以什么开始ui

[foo^=abc]{
    background-color:red;
}
复制代码

[attribute$=value]

选择其 attribute 属性值以 value 结束的全部元素。相似正则的 $,以什么结束spa

[foo$=abc]{
    background-color:red;
}
复制代码

[attribute*=value]

选择其 attribute 属性中包含 value 子串的每一个元素。

[foo*=abc]{
    background-color:red;
}
复制代码

[attribute|=value]

选择 attribute 属性值以 value 开头的全部元素。

[foo|=abc]{
    background-color:red;
}
复制代码

文档结构选择器

示例html

<ul>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
</ul>
复制代码

后代选择器 element element

选择 element 元素内部的全部 element 元素。

ul li{
    border: 1px solid red;
}
复制代码

子选择器 element>element

选择父元素为 element 元素的全部 element 元素。

ul>li>p{
   border: 1px solid red;
}
复制代码

相邻兄弟选择器 element+element

选择紧接在 element元素以后的 element 元素。

示例html

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
复制代码

h1+p{
    color:red;
}
复制代码

通常兄弟选择器 element1~element2

选择前面有 element1 元素的每一个 elem 元素。

示例html

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
复制代码

h1~p{
   border: 1px solid red;
}
复制代码

伪类选择器

:root 文档根元素伪类

:root{
    background-color:red;
}
复制代码

:nth-child(n) 孩子选择器

示例html

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>
复制代码

div :nth-child(1){
    color:red;
}
复制代码

:nth-of-type(n) 同类型的第n个元素

div p:nth-of-type(2){
    color: red;
}
复制代码

element:first-child

选择属于父元素element的第一个子元素。等同 :nth-child(1)

element:last-child

选择属于父元素element的最后一个子元素。

element:first-of-type

同类型的第一个子元素

element:last-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>h1</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::after

在每一个element元素的内容以后插入内容。咱们可能更多的是用来清除浮动或验证表单提示等其它

::selection

选择被用户选取的元素部分。

参考文献

W3C

结语

有时候，咱们须要提升本身的效率，咱们须要更多的时间去专一咱们的业务，而不该该由于CSS方面的不懂而致使咱们的停步不前，浪费咱们大把时间，so，以此篇温习或是巩固。

同时，若是你有更好的点子，欢迎留言

文中如有不许确或错误的地方，欢迎指出

往期文章：

前端代码优化实用篇

前端开发中实用的工具方法

前端 Promise 常见的应用场景