热搜：前端 nest neovim nvim

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

lxf2023-05-03 00:46:27

前言

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

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

[attribute]

[foo]{
    background-color:red;
}

选择所有带 foo 属性的元素

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

[attribute=value]

选择 attribute=value 的所有元素。

[foo=abc]{
    background-color:red;
}

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

[attribute~=value]

选择 attribute 属性包含单词 value 的所有元素。

[foo~=abc]{
    background-color:red;
}

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

[attribute^=value]

选择其 attribute 属性值以 value 开头的所有元素。类似正则的 ^,以什么开始

[foo^=abc]{
    background-color:red;
}

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

[attribute$=value]

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

[foo$=abc]{
    background-color:red;
}

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

[attribute*=value]

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

[foo*=abc]{
    background-color:red;
}

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

[attribute|=value]

选择 attribute 属性值以 value 开头的所有元素。

[foo|=abc]{
    background-color:red;
}

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

文档结构选择器

示例html

<ul>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
    <li>
        <h1>h1</h1>
        <p>p1</p>
    </li>
</ul>

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

后代选择器 element element

选择 element 元素内部的所有 element 元素。

ul li{
    border: 1px solid red;
}

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

子选择器 element>element

选择父元素为 element 元素的所有 element 子元素。

 ul>li>p{
   border: 1px solid red;
}

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

相邻兄弟选择器 element+element

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

示例html

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

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

h1+p{
    color:red;
}

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

一般兄弟选择器 element1~element2

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

示例html

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

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

 h1~p{
   border: 1px solid red;
}

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

伪类选择器

:root 文档根元素伪类

:root{
    background-color:red;
}

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

示例html

<div>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</div>

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

div :nth-child(1){
    color:red;
}

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

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

div p:nth-of-type(2){
    color: red;
}

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

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

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。 除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。 在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

相关专题