[分享]css3怎么选择器

在CSS3中，选择器是其中一个最重要的部分，正确使用它们可以使你的样式控制变得更加简单而强大。这里将介绍CSS3中的选择器类型以及如何使用它们来选择HTML文档中的元素。 p { fontsize: ...

在CSS3中，选择器是其中一个最重要的部分，正确使用它们可以使你的样式控制变得更加简单而强大。这里将介绍CSS3中的选择器类型以及如何使用它们来选择HTML文档中的元素。

 p {
      font-size: 16px;
  } 

CSS3的选择器类型可分为以下几类：

1. 基本选择器：包括标签选择器、ID选择器和类选择器。标签选择器可以选择对应标签类型的所有元素，ID选择器可选择拥有相应ID属性的元素，而类选择器可以选择与相应类名匹配的所有元素。

 /* 标签选择器 */
  p {
      font-size: 16px;
  }

  /* ID选择器 */
  #header {
      background-color: #000;
  }

  /* 类选择器 */
  .container {
      width: 960px;
  } 

2. 组合选择器：可通过组合基本选择器，选择对应的元素。

 /* 同时选择id为header和class为nav的元素 */
  #header.nav {
      font-size: 18px;
  }

  /* 选取父元素为ul的所有li元素 */
  ul li {
      list-style: none;
  } 

3. 属性选择器：通过元素属性来选择对应元素。

 /* 选择拥有src属性的所有图片元素 */
  img[src] {
      border: 1px solid #ccc;
  }

  /* 选择href属性以http://开头的所有链接元素 */
  a[href^="http://"] {
      color: blue;
  } 

4. 伪类选择器：选择某个元素处于特定状态的情况下，如:hover、:active、:focus等。

 /* 鼠标悬停时，修改链接颜色 */
  a:hover {
      color: red;
  }

  /* 文本输入框获取焦点时，修改边框样式 */
  input[type="text"]:focus {
      border: 1px solid blue;
  } 

5. 伪元素选择器：选择文档中不存在的元素，如:first-line、:before、:after等。

 /* *在每个段落的第一行添加下划线 */
  p:first-line {
      text-decoration: underline;
  }

  /* 在每个a标签之前添加 ">"图标 */
  a:before {
      content: "203a";
  } 

选择器的组合使用可以让选择更加灵活，精确地选择需要样式控制的元素。