03css选择器

03css选择器

四大类选择器：

• 基本选择器：

  1.*通配符选择器：设置所有的元素或标签的样式；
  * {属性：值；……}
  2.标签选择器：针对某一类标签或元素设置样式；
  标签名 {属性：值；……}
  3.id选择器：针对与该id对应的标签或元素设置样式；
  #id {属性：值；……}
  （虽然可为不同标签设置相同id，但为满足id唯一性原则，一般不这么用）
  4.class类选择器：针对与该class名对应的标签或元素设置样式；
  .class名 {属性：值；……}
  （不同标签可设置相同class名）
  备注：div p {属性：值；……}—>将div中所有p标签设置该样式；
  div#id {属性：值；……}—>将div中对应id的标签设置该样式；
  div.class名 {属性：值；……}—>将div中所有对应class的标签设置该样式。

• 组合选择器：

  将基本选择器通过特殊符号串在一起。
  1.分组选择器：逗号连接；
  标签名1，标签名2，标签名3，……，标签名n {属性：值；……}
  2.嵌套选择器：空格连接；
  标签名1 标签名2 {属性：值；……}
  (标签名1里面的所有标签名2都设置该样式)
  3.子选择器： >连接；
  标签名1>标签名2 {属性：值；……}
  (标签名2的父级标签必须是标签名1才能被设置该样式)
  4.相邻兄弟选择器：+连接；
  标签名1+标签名2 {属性：值；……}
  (与标签名1平级的下一个标签名2，设置该样式)
  5.兄弟选择器：~连接；
  标签名1~标签名2 {属性：值；……}
  (与标签名1平级的下面所有的标签名2，设置该样式)

• 属性选择器：

  基本选择器[属性] {属性：值；……} —>含该‘属性’的标签或元素设置该样式；
  基本选择器[属性=值] {属性：值；……} —>含该‘属性=值’的标签或元素设置该样式；
  基本选择器[属性~=值] {属性：值；……} —>只要该属性的值里包含对应值的标签，就设置该属性；
  基本选择器[属性^=值] {属性：值；……} —>只要该属性的值里以对应值开始的标签，就设置该属性；
  基本选择器[属性$=值] {属性：值；……} —>只要该属性的值里以对应值结束的标签，就设置该属性；

• 伪元素选择器：

  伪元素是已有的、非自己写出来的一类标签，如before和after；
  只要是标签就可以被人为改变其属性，伪元素也不例外。
  例如：

    p元素中的before和after：
    <p>
        <!-- <before> -->
        <!-- <after> -->
    </P>
    对应元素选择器：
    p::before {
        content:"before";
    }
    p::after {
        content:"after";
    }

可相应设置样式，或对p标签设置样式，before与after也会相应被设置样式。
另外，针对块元素中的元素选择器有：
第一个字母或文字：first-letter
第一行字母或文字：first-line