阅读 39

CSS常用的选择器

标签选择器

基于html标签名设置样式

p {
  margin: 1em 0 1em 0;
  background-color: #ff0000;
}
复制代码

ID选择器

基于html标签的id属性值设置样式 以"#"开头 + html标签的id属性值

#div1 {
  background-color: #0000ff;
}
复制代码

类选择器

基于html标签的class值设置样式 以"."开头 + html标签的class值

.container {
  width: 200px;
  background-color: #ca76ca;
  padding: 20px;
}
复制代码

属性选择器

对带有指定属性的 HTML 元素设置样式 以"[]"包含 HTML 元素 的属性 或者 属性和值

[title]{
  color:#00ffff;
}

[title="Hello world"] {
  color:#00ff00;
}
复制代码

以上4类选择器的示例:

  <div class="container">
    <p>一行文字</p>
    <p title="Hello world">Hello world</p>
    <p title="Hello">Hello</p>
    <div id="div1">块级元素</div>
  </div>
复制代码

伪类选择器

有一个冒号的选择器,用来添加一些选择器的特殊效果。 跟类选择器的区别在于 类选择器可以随便,伪类选择器是固有的一些,比如:first-child、:last-child等

  • :first-child 选择父元素下的第一个子元素
  • :last-child 选择父元素下的最后一个子元素
  • :nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。n 可以是一个数字,一个关键字,或者一个公式。
  • :nth-child(odd) 奇数子元素(同nth-child(2n-1))
  • :nth-child(even) 偶数子元素(同nth-child(2n))
  • :nth-last-child(n) 倒数第n个子元素
  • :before 选择器向选定的元素前插入内容。
  • :after 选择器向选定的元素之后插入内容。
.container {
  width: 200px;
  background-color: #00ffff;
  padding: 20px;
}

p {
  margin: 1em 0 1em 0;
}

#div1 {
  background-color: #ff00ff;
}

#div2 {
  background-color: #ff0000;
}

复制代码

选择器匹配作为任何元素的第一个子元素的 p 元素,设置字体颜色为blue

p:first-child {
  color:blue;
}
复制代码

伪元素选择器

连续两个冒号的选择器。::符号是用来区分伪类和伪元素的。 如::first-line、::first-letter、::before和::after

  • ::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素。
  • ::after用来创建一个伪元素,作为已选中元素的最后一个子元素。 常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。
  <div class="container">
    <div id = "div1">
      <p>一行文字</p>
      <p>一行文字</p>
    </div>
    <div id = "div2">
      <p>一行文字</p>
      <p>一行文字
        <div>hhhh</div>
      </p>
    </div>
  </div>
复制代码
p::before {
  content: "♥";
}

p::after {
  content: "♥♥";
}
复制代码

结构选择器

基于html标签间的结构关系 常见的符合有空格、>、~、+

  • 后代选择器: E空格F 选择E元素的所有后代
  • 子元素选择器:E>F
    只能选择E元素的直接后代,不能跨代选取
  • 通用兄弟选择器:E~F
    用于选择E元素后面的所有兄弟元素F。
  • 相邻兄弟选择器:E+F
    相邻兄弟选择器可以选择紧接在另一元素后的元素,而且他们具有一个相同的父元素,换句话说,EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻,这样我们就可以使用相邻兄弟元素选择器来选择F元素。

选择器优先级

内联 > ID选择器 > 类选择器 > 标签选择器。

 <p id="content" class='content'>一行文字</p>
复制代码
p {
  margin: 1em 0 1em 0;
  background-color: #ff0000;
  color:#000000;
}

.content {
  background-color: #ff00ff;
}

#content {
  background-color: #0000ff; 
}
复制代码

最终文本的背景颜色以#content 为准,是蓝色(#0000ff)。

参考资料

深入理解CSS选择器优先级