万博体育最新资讯

UX和所有东西网络

组合器的力量

CSS 使用CSS很容易只使用基本的选择器。是的,你可以只使用那些代码,但是如果你知道一些更高级的代码,你会写出更好、更高效的代码。在本文中,我将向您展示CSS组合器的强大功能,它是一个工具包,允许您组合基本的选择器来创建更强大的CSS选择器。

一个基本的HTML

为了便于解释,我将使用一个简单的HTML结构来说明每个选择器是如何工作的。它相当简单,只包含几个基本元素:


          

大标题

第1段

第二款

第1段内分区

第2段

这是一个简单的结构,但对我们的目的很有用。

DOM

当我试图理解不同的CSS选择器如何工作时,我经常发现将HTML看作一个树结构是很有用的。事实上,HTML在浏览器中形成一个名为dom的树结构,它是文档对象模型.

上面的HTML结构可以这样可视化:

基本的DOM树

正如你所看到的,有些元素位于其他元素的下方,有些元素并排排列在一起。<它实际上就像一个家族树,元素之间的关系实际上被称为类似父类的东西,的孩子,兄弟姐妹和后代。

概述最基本的CSS选择器

为了涵盖我们的基础,我将简要介绍四个最基本的选择器。如果你对这些已经很熟悉了,可以直接跳到关于选择符的部分.

  • 通用选择器
  • 元素类型选择器
  • 类选择器
  • ID选择器

通用选择器

通用选择器是一个星号(*)并应用于DOM中的所有元素。当您想要针对几个不同的元素类型时,它很有用。

*{空白:0;}

这个选择器会影响dom树中的所有元素:

应用了通用选择器的dom树

这个选择器的一个明显的用例是创建一个简单的CSS重置。您可以将这个选择器放在CSS的顶部,并将所有HTML元素的所有属性设置为默认值。

元素选择器

P利润:0 0 1百万;}
应用元素选择器的受影响元素

类选择器

.第一个颜色:ff0080;}
应用了类选择器的受影响元素

ID选择器

由于HTML文档中只能有一个特定的ID,ID选择器总是针对单个元素。它使用hash(#),可能是这样的。

#包装器{宽度:980px;保证金:0自动;}
应用ID选择器的受影响元素

到目前为止没有什么意外。你可能已经熟悉了这些选择器,简单地回顾一下,让我们继续讨论更多没有说服力的事情,也就是CSS组合器。

组合器

组合器与基本选择器一起使用。顾名思义,它们使您能够以不同的方式组合其他选择器,这样您就不必在您想要目标的每个元素上都有一个类或ID。

那么为什么这样做很好呢?保持HTML和CSS尽可能的分离是很有用的。HTML中额外属性的数量越少越好。它不仅可以减小页面大小,而且使维护更加容易。

要进一步了解保持HTML和CSS尽可能分开的好处,读这篇文章关注点分离http://codecraftingblueprints.com/post/15732181414/separ- of-concern探索更大的deatail的好处。

现在,让我们继续讨论组合器。

CSS组合子

CSS中有四种不同的组合器,它们各自都有自己独特的优势:

  • 后代选择器
  • 子选择器
  • 相邻的同级选择器
  • 通用同级选择器

后代选择器

后代选择器只是两个或多个选择器,彼此之后,用空格分隔。例如,如果您只想针对

元素的内部

你可以写:

.事实P颜色:ff0080;}

仅使用此代码

位于元素下方的元素类=“事实”是针对性的。

应用了后代选择器的受影响元素

子选择器

子选择器比前一个选择器更具体一些。它看起来几乎相同,但在两个选择器之间添加了一个大于字符(>)。这样做可以确保只有位于第一个选择器正下方的级别上的元素才是目标。

#包装> p{颜色:#ff0080;}

现在只有

紧接下方的元素

受到影响。

应用了相邻子选择器的受影响元素

这对于处理深度嵌套结构非常有用,因为您希望样式仅针对一个级别。

一个常见的用例是当设置下拉菜单的样式时。它们通常由嵌套列表(

    )您希望列表具有不同的样式,具体取决于它们显示的级别。

    相邻的同级选择器

    形容词同级选择器只针对紧跟在元素后面的元素在同一水平上在DOM树中。它通过在第一个选择器和第二个选择器之间插入一个加号(+)来使用。

    h1 + p{颜色:#ff0080;}

    现在只有

    直接在。之后

    受到影响。

    受影响的元素,并应用相邻的同级选择器

    相邻的同级选择器的一个常见用例是,希望文章中的第一个段落的文本大于其余段落的文本。您当然可以添加一个类,比如中国当代但是最好不要在HTML中添加额外的属性。你可以这样写:

    P字体大小:16px;h1 + p {font-size: 24px;字体粗细:粗体;}

    通用同级选择器

    一般的同级选择器针对的是同级元素,但与相邻的同级选择器不同,目标元素不必立即出现在第一个元素之后。它是使用两个选择器之间的波浪号(~)构造的。

    h1 ~ p{颜色:#ff0080;}

    现在两个

    元素受影响,因为它们都位于相同的级别

    .

    应用了常规同级选择器的受影响元素

    请注意,受影响的元素需要出现在目标元素之后。如果我们有下面的HTML,只有两个

    元素之后出现的元素

    会受到影响。

    第0段

    大标题

    第1段

    第二款

    结论

    CSS组合器对于减少HTML中多余的类和ID的数量非常有用,它们也有很好的浏览器支持,至少如果你的目标是IE7及以上。

    所有的组合器,除了一般的兄弟选择器,是CSS 2.1规范的一部分,这意味着它们已经存在很长时间了。一般的兄弟选择器是CSS3规范的一部分,但它仍然有很好的浏览器支持。

    我希望你能在将来的CSS编码中找到有用的CSS组合器!

    你能想到更多的组合器用例吗?在评论中告诉我们!maxbetx

    音符:本文以前发表于代码设计蓝图.

1评论

  1. 感谢您的更新,你能来吗?这样我在你更新的时候就能收到提醒邮件。塔鲁汉博拉基塔

留下答复

您的电子邮件地址将不会发布。

*

专利文献2019万博体育最新资讯

主题的安德斯·诺尔- - - - - -了↑