【WebStyle】—— CSS选择器小结

更新日志：

• [2019-10-29]
  文章发布

说明：

• 本文地址
  • 《【WebStyle】—— CSS选择器小结》https://blog.csdn.net/maixiaochai/article/details/102806780
• 关于 MaiXiaochai
  • CSDN：https://blog.csdn.net/maixiaochai
  • GitHub：https://github.com/MaiXiaochai

---

• 1. 选择器 {声明N}

  selector {declaration1; declaration2; ... declarationN}

  h1 {color:red; font-size: 14px;}
  

  
  

• 2. 选择器N {声明M}

  selector1,selector2, ... selectorN {declaration1; declaration2; ... declarationM}

  h1,h2,h3,h4,h5,h6 {
    color: green;
    }
  

• 3. 父选择器 子选择器 {声明N}——这种组合的选择器叫派生选择器

  selector-father selector-child {declaration1; declaration2; ... declarationN}

  li strong {
      font-style: italic;
      font-weight: normal;
    }
  

• 4. id 选择器

  #id-number {declaration1; declaration2; ... declarationN}

  #red {color: red;}
  

  常用于建立派生选择器

  #sidebar p {
  	font-style: italic;
  	text-align: right;
  	margin-top: 0.5em;
  	}
  

  
  

• 5. 类选择器
  .class-value {declaration1; declaration2; ... declarationN}

  .center {text-align: center}
  

  同样类选择器也可以建立派生选择器

  .class-value selector {declaration1; declaration2; ... declarationN}

  .fancy td {
  	color: #f60;
  	background: #666;
  	}
  

  元素也可以基础它们的类而被选择

  /*类名为fancy的表格单元将被选中，应用样式*/
  td.fancy {
  	color: #f60;
  	background: #666;
  	}
  

  
  

• 6. 属性选择器

  [attr-name] {declaration1; declaration2; ... declarationN}

  [title]
  {
  color:red;
  }
  

• 7. 属性和值选择器

  [attr-name=attr-value] {declaration1; declaration2; ... declarationN}

  [title=W3School]
  {
  border:5px solid blue;
  }
  

---

The end.