CSS3 基本选择器

作者: 3132 | 来源:发表于2019-08-04 17:16 被阅读0次

CSS和JQuery选择器
css3 总结笔记
css3
最全CSS3选择器
老司机Studio 第二章
05- jQuery 基本选择器&层次选择器
CSS3知识概要总结之选择器篇(二)
HTML5和CSS3新增内容
CSS3选择器
初级了解css3伪类选择器

回顾选择器

通配选择器
元素选择器
类选择器
ID选择器
后代选择器

新增基本选择器

子元素选择器（直接后代选择器）

概念
子元素选择器只能选择某元素的子元素
语法格式
父元素 > 子元素

相邻兄弟元素选择器

概念
相邻兄弟选择器可以选择紧接在另一元素后的元素，而且它们具有一个相同的父元素

语法格式
元素 + 兄弟相邻元素(Eelement + sibling)

例子
<style>
section  >  div + article{
    color:red;
}
</style>
<section>
      <div>123</div>
      <article>
            <div>abc</div>
      </article>
      <article>
            <div>efg</div>
      </article>
</section>

通用兄弟选择器

概念
选择某元素后面的所有兄弟元素，而且它们具有一个相同的父元素

语法格式
元素 ~ 后面所有兄弟相邻元素(Eelement ~ sibling)

例子
<style>
section  >  div ~ article{
    color:red;
}
</style>
<section>
      <div>123</div>
      <article>
            <div>abc</div>
      </article>
      <article>
            <div>efg</div>
      </article>
</section>

群组选择器

概念
群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号","隔开

语法格式
元素1,元素2,...元素n (Eelement1,Eelement2,Eelement3,...Eelementn)

例子
<style>
section > article,
section > aside,
secyion > div {
    color:red;
    background-color:green
}
</style>
<section>
      <article>
            <div>abc</div>
      </article>
      <article>
            <div>efg</div>
      </article>
      <div>123</div>
</section>

属性选择器

对带有指定属性的HTML元素设置样式
使用CSS3属性选择器，可以只指定元素的某个属性，或者还可以同时指定元素的某个属性和其对应的属性值

Element[attribute]

概念
 为带有 attribute 属性的Element 元素设置样式

例子
<style>
a[href] {
  text-decoration: none;
}
</style>
<a href="attribute.html">attribute</a>

Element[attribute="value"]

概念
 为 attribute="value" 属性的 Element 元素设置样式

例子
<style>
a[href="#"] {
    order:red;
}
</style>
<a href="#">attribute</a>

Element[attribute~="value"]

概念
 选择 attribute 属性包含单词"value"的元素，并设置其样式

例子
<style>
a[class~="two"] {
    order:red;
}
</style>
<a class="two one" href="#">attribute</a>
<a class="twothree" href="#1">attribute</a>

Element[attribute^="value"]

概念
 设置 attribute 属性值以"value"开头的所有 Element 元素的样式

例子
<style>
a[href^="#"] {
    order:red;
}
</style>
<a href="#">attribute</a>
<a href="#1">attribute</a>
<a href="#3">attribute</a>
<a href="#5">attribute</a>

Element[attribute$="value"]

概念
 设置 attribute 属性值以"value"结尾的所有 Element 元素的样式

例子
<style>
a[href$="#"] {
    order:green;
}
</style>
<a href="#">attribute</a>
<a href="2#">attribute</a>
<a href="4#">attribute</a>
<a href="6#">attribute</a>

Element[attribute*="value"]

概念
 设置 attribute 属性值包含"value"的所有 Element 元素的样式

例子
<style>
a[href*="#"] {
    order:blue;
}
</style>
<a href="#">attribute</a>
<a href="2#1">attribute</a>
<a href="4#3">attribute</a>
<a href="6#5">attribute</a>

Element[attribute|="value"]
1：属性值为"value"
2：属性值以"value-"开头

概念
 选择 attribute 属性值为"value"或以"value-"开头的元素，并设置其样式

例子
<style>
a[href|="#"] {
    order:yellow;
}
</style>
<a href="#">attribute</a>
<a href="#-1">attribute</a>
<a href="#-3">attribute</a>
<a href="#-5">attribute</a>