[分享]css中常见选择器

CSS中经常使用各种选择器用来选择特定的HTML元素，下面我们来了解一下常见的选择器。 / 通配选择器，选择所有元素 / { margin: 0; padding: 0; } 标签选择器 / 选择所...

CSS中经常使用各种选择器用来选择特定的HTML元素，下面我们来了解一下常见的选择器。

 /* 通配选择器，选择所有元素 */
  * {
    margin: 0;
    padding: 0;
  } 

标签选择器

 /* 选择所有p标签 */
  p {
    font-size: 16px;
    line-height: 24px;
  } 

ID选择器

 /* 选择id为"header"的元素 */
  #header {
    height: 60px;
    background-color: #333;
  } 

类选择器

 /* 选择class为"btn"的元素 */
  .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    text-align: center;
  } 

后代选择器

 /* 选择.div-outer下的所有p标签 */
  .div-outer p {
    font-size: 14px;
    color: #333;
  } 

子元素选择器

 /* 选择.div-outer中的子元素p标签 */
  .div-outer > p {
    font-size: 18px;
    color: #f00;
  } 

属性选择器

 /* 选择所有含有title属性的元素 */
  [title] {
    font-style: italic;
  } 

伪类选择器

 /* 鼠标悬浮在a标签上的效果 */
  a:hover {
    color: #007bff;
    text-decoration: none;
  } 

以上是CSS中常见的选择器，我们可以根据需要选择不同的选择器来完成我们的CSS样式设计。