2 CSS选择器

目录

• 基本选择器
  • 标签选择器
  • 类选择器
  • ID选择器
  • 通用选择器
• 组合选择器
  • 后代选择器
  • 儿子选择器
  • 毗邻选择器
  • 弟弟选择器
  • 并集选择器
  • 交集选择器
• 属性选择器
• 伪类选择器
• 伪元素选择器

基本选择器

• 标签选择器

  p {
    color: red;
  }
  

• 类选择器

  .c1 {
    color: red;
  }
  

• ID选择器

  #i1 {
    color: red;
  }
  

• 通用选择器

  * {
    color: black;
  }
  

组合选择器

• 后代选择器

  div p {
    color: red;
  }
  

• 儿子选择器

  div>p {
    color: red;
  }
  

• 毗邻选择器

  div+p {
    color: red;
  }
  

• 弟弟选择器

  div~p {
    color: red;
  }
  

• 并集选择器

  div,p {
    color: red;
  }
  

• 交集选择器

  交集选择器 是 并且的意思(使用比较少)

  h3.class {
      color: red;
  }
  

属性选择器

• 选择带有 target 属性所有元素

  [target] {
    color: red;
  }
  

• 选择 target="_blank" 的所有元素

  [target=_blank] {
    color: red;
  }
  

• 选择 title 属性包含单词 "flower" 的所有元素

  [target~=flower] {
    color: red;
  }
  

• 选择 lang 属性值以 "en" 开头的所有元素

  [lang|=en] {
    color: red;
  }
  

伪类选择器

• 没有访问的超链接a标签样式

  a:link {
    color: blue;
  }
  

• 访问过的超链接a标签样式

  a:visited {
    color: gray;
  }
  

• 鼠标悬浮在元素上应用样式

  a:hover {
    background-color: #eee; 
  }
  

• 鼠标点击瞬间的样式

  a:active {
    color: green;
  }
  

伪元素选择器

• :first-letter 向文本的第一个字母添加特殊样式。

  p:first-letter {
    font-size: 48px;
  }
  

• :first-line 向文本的首行添加特殊样式。

  p:first-line {
    font-size: 48px;
  }
  

• :before 在元素之前添加内容

  p:before {
    content: "*";
    color: red;
  }
  

• :after 在元素之后添加内容

  p:after {
    content: "?";
    color: red;
  }