阅读 14708

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

前言

有时候我在想,我们前端写页面比较花时间,能不能减少这部分时间呢?当然你会说“你傻啊,不是有UI库嘛!”,但是别忘了,不是每个项目都有可用的UI库,同时使用别人的UI库,并不能百分比能够解决你所有的问题,如果我们对CSS选择器了解的更多一些,或许就可以少写很多JavaScript代码,比如:鼠标的移入移出效果,选项卡的背景图切换,图片的渐隐渐显等等,我们需要掌握这些(包括不常用的)CSS选择器,无论我们在前端布局UI,还是替代javaScript写效果,都能大大的提升我们的效率。

CSS选取器分类

通配符选择器

*{
    margin:0;
    padding:0;
}
复制代码

元素(标签)选择器

p{
    color:red;
}
复制代码

类选择器

.warning{
    color:red;
}
复制代码

ID选择器

#warning{
    color:red;
}
复制代码

优先级

!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符

属性选取器

示例html

<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 的所有元素。

[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

[attribute$=value]

选择其 attribute 属性值以 value 结束的所有元素。类似正则的 $,以什么结束

[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 元素的每个 elem 元素。

示例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: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 常见的应用场景

文章分类
前端
文章标签