CSS3选择器——属性选择器、关系选择器、结构化伪类选择
器、伪元素选择器、伪链接
属性选择器
  属性选择器可以根据元素的属性及属性值来选择元素。CSS3中新增了 3 种属性选择器：E[att^=value]、
E[att$=value] 和 E[att*=value]
1.E[att^=value] 属性选择器
  E[att^=value] 属性选择器是指选择名称为 E 的标记，且该标记定义了 att 属性，att 属性值包含前缀为 value 的⼦字符串。其中 E 是可以省略的，如果省略则表⽰可以匹配满⾜条件的任意元素。如：div[id^=section] 表⽰匹配包含 id 属性，且 id 属性值是以 “section” 字符串开头的 div 元素。
2.E[att$=value] 属性选择器
  E[att$=value] 属性选择器是指选择器名称为 E 的标记，且该选择器定义了 att 属性，att 属性值包含后
缀为 value 的⼦字符串。与E[att$=value]选择器⼀样，E元素可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。如：
div[id$=section]表⽰匹配包含 id 属性，且 id 属性值是以 “section” 结尾的 div 元素。
3.E[att*=value] 属性选择器
  E[att*=value] 选择器⽤于选择名为 E 的标记，且该标记定义了 att 属性，att 属性值包含 value ⼦字符串，该选择器与前两个选择器⼀样，E 元素也可以省略，如果省略则表⽰可以匹配满⾜条件的任意元素。如：div[id*=section] 表⽰匹配包含 id 属性，且 id 属性包含 “section” 字符串的 div 元素。
关系选择器
  CSS3中的关系选择器主要包括⼦代选择器和兄弟选择器，其中⼦代选择器由符号 “>” 连接，兄弟选择器由符号 “+”和 “~” 连接。
1.⼦代选择器（>）
  ⼦代选择器主要⽤来选择某个元素的第⼀级⼦元素，如希望选择只作为 h1 元素⼦元素的 strong 元素，可以写为：h1 > strong。
2.兄弟选择器（+、~）
  兄弟选择器⽤来选择与某元素位于同⼀个⽗元素之中，且位于该元素之后（不会往前选，只会往后选）的兄弟元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。
  （1）临近兄弟选择器
  该选择器使⽤加号 “+” 来链接前后两个选择器，选择器中的两个元素有同⼀个⽗亲，⽽且第⼆个元素必须紧跟第⼀个元素。
  （2）普通兄弟选择器
  普通兄弟选择器使⽤ “~” 来链接前后两个选择器。选择器中的两个元素有同⼀个⽗亲，但第⼆个元素不必紧跟第⼀个元素（往后选所有的兄弟）。
结构化伪类选择器
  结构化伪类选择器是 CSS3 中新增加的选择器，常⽤的结构化选择器有 :root 选择器、:only-child 选择器、:first-child 选择器、:last-child 选择器、:nth-child(n) 选择器、:nth-last-child(n) 选择器、:nth-of-type(n) 选择器、:nth-last-of-type(n) 选择器、:empty 选择器、:target 选择器。
1.:root 选择器
  :root 选择器⽤于匹配⽂档根元素，在 HTML 中，根元素始终是 html 元素，也就是说使⽤ “:root 选择器” 定义样式，对所有页⾯元素都⽣效。对于不需要该样式的元素，可以单独设置样式进⾏覆盖。
  给 h2 进⾏单独设置：
2.:not 选择器css 属性选择器
  如果对某个结构使⽤样式，但是想排除这个结构元素下⾯的⼦结构元素，让它不使⽤这个样式，可以使⽤ :not 选择器。
3.:only-child 选择器
  :only-child 选择器⽤于匹配属于⽗元素的唯⼀⼦元素的元素，也就是说，如果⽗元素仅有⼀个⼦元素，则使⽤“:only-child 选择器” 可以选择这个⼦元素。
4.:first-child 和 :last-child 选择器
  :first-child 选择器和:last-child 选择器分别⽤于为⽗元素中的第⼀个或者最后⼀个⼦元素设置样式。
5.:nth-child(n) 和 :nth-last-child(n) 选择器
  使⽤ :nth-child(n) 选择器和 :nth-last-child(n) 选择器可以选择某个⽗元素中第 n 个或倒数第 n 个⼦元素。
  选择第 2 个和倒数第 2 个⼦元素：
  选择第 3 个和倒数第 2 个⼦元素：
6.:nth-of-type(n) 和 :nth-last-of-type(n) 选择器
  :nth-of-type(n) 选择器和 :nth-last-of-type(n) 选择器⽤于匹配属于⽗元素的特定类型的第 n 个⼦元素和倒数第 n 个⼦元素。如第2个<p>标签或倒数第⼆个<p>标签。
  选择偶数⾏的 <h2> 标签设置为红⾊和奇数⾏的 <p> 标签设置为绿⾊：
  在前⼀个基础上再选择倒数第 2 个⼦元素：
  选择偶数⾏还可⽤此⽅法：
7.:empty 选择器
  :empty 选择器⽤来选择没有⼦元素或⽂本内容为空的所有元素。
8.:target 选择器
  :target 选择器⽤于为页⾯中的某个 target 元素（该元素的 id 被当做页⾯中的超链接来使⽤）指定样式。只有⽤户单击了页⾯中的超链接，并跳转到 target 元素后，:target 选择器所设置的样式才会起作⽤。
器
伪元素选择器
伪元素选择
  所谓伪元素，是针对CSS中已经定义好的伪元素使⽤的选择器。CSS中常⽤的伪元素选择器有 before 伪元素选择器和 :after 伪元素选择器。
1.:before 选择器
  :before 伪元素选择器⽤于在被选元素的内容前⾯插⼊内容，必须配合 content 属性来指定要插⼊的具体内容（当前内部前）。基本语法格式如下：
  <；元素>:before
  {
    content:⽂字/url();
  }
  在前⾯加上三个哈字：
2.:after 选择器
  :after 伪元素选择器⽤于在某个元素后边插⼊⼀些内容（当前内部后），使⽤⽅法与 :before 选择器相同。
伪类链接
  定义超链接时为超链接指定不同的状态，使得超链接在点击前、点击后和⿏标悬停时的样式不同。在CSS中，通

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。