关注互联网应用及运维技术的个人博客

CSS中常见的基础选择器和复合选择器

CSS选择器: 就是指定CSS样式要作用的标签。

CSS的选择器分为两大类: 基础选择器、复合选择器。

下面分别来讲一讲这两种选择器中比较常用的。


基础选择器


标签选择器:标签选择器可以把某一类标签全部选择出来

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
   <!-- 这些p标签会被选中 文字颜色变成红色-->
   <p>这是一段文字</p>
   <p>这是另一段文字</p>
   <!-- 这个div标签不会被选中 -->
   <div>这也是一段文字</div>
</body>
</html>

【注意】:

  1. 无论这个标签藏的多深,都会被选中。
  2. 选中的是所有这类的标签,而不是一个。

ID选择器:ID选择器是针对某一个特定的标签来使用,以”#”来定义

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
    <style>
        #ling {
            color: pink;
        }
    </style>
</head>
<body>
   <!-- 这个p标签会被选中 文字颜色变成粉红色-->
   <p id="ling">玲绪</p>
   <!-- 这个p标签不会被选中 -->
   <p>夏目</p>
</body>
</html>

【注意】:

  1. 任何HTML属性都可以有ID属性;表示这个标签的名字,ID名需要遵循以下规范:
    • (1) 只能是 数字、字母、下划线的组合。
    • (2) 必须以字母开头。
    • (3) 不能和HTML的标签同名;例如 #span、#div 这种就不行。
    • (4) 严格区分大小写;#nav 和 #Nav 就是两个完全不同的ID名。
  2. 标签需要用id属性来调用ID名,样式才能生效
  3. 一个ID名在整个HTML文档中只能被调用一次,绝不能多次调用,哪怕它们是不同的标签。例如:页面上有一个ID名为nav的div标签,有一个ID名为nav的span标签,这是非法的!

类选择器:针对你想要的所有标签,用圆点( . ) 来定义

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
    <style>
      .nav1 {
        color: pink;
      }
      .nav2 {
          font-size: 12px;
      }
    </style>
</head>
<body>
   <!-- 这个div会有nav1的样式 -->
   <div class="nav1">哇咔咔</div>    
   <!-- 这个span会同时有nav1和nav2的样式 -->
   <span clsaa="nav1 nav2">喵喵喵</span>
</body>
</html>
  • 类选择器可以被多种标签使用,非常灵活;类选择器的使用,决定了你的CSS水平。
  • 同一个标签可以拥有多个类名,并分别具有它们的样式,类名之间用空格隔开,例子如下:
<div class="nav nav_side">我可以同时使用多个类选择器</div>    <!-- 正确写法 -->

<div class="nav" class="nav_side">但是我只能有一个class属性</div>    <!-- 错误写法 -->

【注意】:

  1. 不要企图用一个类名去完成某个标签的所有样式,应尽量把样式拆分到多个类中,多个类共同完成某个标签的样式。
  2. 每个类尽量要体现“复用性”的概念,让一个类能被更多的标签使用,减少代码量、便于后期维护。

样式用类,行为(JS)用ID

  1. Class属性交给CSS使用,ID属性交给JS使用。
  2. 在CSS中,尽可能的用Class,极个别情况才用ID,因为JS要通过ID属性得到标签,我们一般默认:有ID的元素,是有动态效果的。

通配符选择器:针对所有标签(极少使用)

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
  <style>
      * {
          color: pink;
      }
  </style>
</head>
<body>
   <!-- 这些标签全部会被选中 -->
  <div>我是div标签</div>
  <span>我是span标签</span>
  <p>我是段落标签</p>
</body>
</html>
  • 效率不高,页面上的标签越多,效率越低,尽量避免使用
  • 一般用来清除所有元素的内外边距 各大网站清除内外边距做法:
/* TM01 */
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
    margin: 0;
    padding: 0;
}

/* TM02 */
body, ol, ul, li, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select {
    margin: 0;
    padding: 0;
}

总结

  • 标签选择器针对页面上的某一类标签
  • ID选择器只针对特定的一个标签(ID名是这个标签在此页面上的唯一标识符)
  • 类选择器可以给多种标签使用

复合选择器


后代选择器:定义时用空格隔开

举例1:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
  <style>
  ul li {
    color:pink;
}
  </style>
</head>
<body>
   <ul>
   <li>1</li>    <!-- 这个li标签会被选中 -->
</ul>
<ol>
   <li>1</li>    <!-- 这个li标签不会被选中 -->
</ol>
</body>
</html>
  • 选择器会选取ul的后代li,而不是ol的后代

举例2:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
  <style>
    ul li a {
        color:pink;
   }
  </style>
</head>
<body>
 <ul>
   <li>HA HA HA</li>
   <li>
      <a href="#">蛤 蛤 蛤</a>    <!-- 这个li标签里面的a标签会被选中 -->
   </li>
 </ul>
 
</body>
</html>
  • 上面的意思是:选出 ul 标签中 li 标签,li 标签中的 a 标签

举例3:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
  <style>
    ul a {
        color:red;
   }
  </style>
</head>
<body>
 <ul>
   <li>我是ul的子级元素</li>
   <li>
      <a href="#">我是li的子级元素,ul孙级元素</a>    <!-- 这个a标签会被选中 -->
   </li>
 </ul>
 
</body>
</html>
  • 后代选择器不仅仅只是选出他的子级里的元素,孙级、重孙级里的元素都可以选出,只要是它的后代即可

举例4:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
  <style>
    .nav li a {
        color:pink;
    }
  </style>
</head>
<body>
   <ul class="nav">
   <li>我是ul的子级元素</li>
   <li><a href="#">1</a></li><li>
   <li><a href="#">2</a></li><li>   <!-- 这些li标签里面的a标签会被选中 -->
   <li><a href="#">3</a></li><li>
   </ul>
</body>
</html>
  • 后代选择器可以组合ID选择器和类选择器甚至是复合选择器
  • 上面的样式还可以写成:
.nav a {
    color:pink;
}
  • 举例简单说明一下“祖先结构”:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
  <style>
      
  </style>
</head>
<body>
   <div id="div1">    <!-- 我是 body 的子代 -->
    <div id="div2">    <!-- 我是 div1 的子代,body的孙代 -->
      <div id="div3">    <!-- 我是div2的子代,div1的孙代,body的重孙代 -->
        <a href="#">辣鸡</a>    <!-- 我是辣鸡(手动滑稽) -->
      </div>
    </div>
  </div>
</body>
</html>

子选择器:定义时用大于号 ( > ) 隔开

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
  <style>
    div > a {
        color:pink;
  }
  </style>
</head>
<body>
   <div>
    <a href="#">我是div元素最近一级的子元素</a>    <!-- 这个a标签会被选中 -->
    <span>    <!-- 我也是div元素元素最近一级的子元素 我和a标签是兄弟关系 -->
        <a href="#">我是span元素最近一级的子元素,div标签的孙级</a>>    <!-- 这个a标签不会被选中 -->
    </span>
  </div>
</body>
</html>
  • 子选择器只能选择作为某元素的最近一级子元素
  • 子选择器同样可以组合任意基础选择器以及复合选择器:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
  <style>
    .nav > a {
        color:pink;
  }
  </style>
</head>
<body>
  <div class="nav">
    <a href="#">啦啦啦~</a>    <!-- 这个a标签会被选中 -->
  </div>
</body>
</html>

并集选择器:定义时用英文逗号 ( , ) 隔开

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
  <style>
      div, p, span, .nav {
          color:pink;
      }
  </style>
</head>
<body>
  <div>1</div>
    <p>2</p>
    <span>3</span>
    <ul class="nav">
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>
  • 并集选择器可以选择多组标签,并为他们定义相同的样式,通常用于集体声明
  • 并集选择器同样可以组合基础选择器和复合选择器

伪类选择器

对于 a 标签 有几种不同的状态:

  • link:未被访问的链接
  • visited:已被访问的链接
  • focus:获得焦点的时候
  • hover:鼠标指针位于其上的时候
  • active:按下没有松开鼠标的时候

CSS可以针对元素不同的状态,定义不同的样式,伪类选择器又分为以下两种:

  1. 静态伪类(只能用于超链接):
    • link:未被访问的链接
    • visited:已被访问的链接

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
    <style>
        a:link {
        color: gray;
        text-decoration: none;
        }

       a:visited {
        color: red;
        }
    </style>
</head>
<body>
    <a href="#">点我</a>
    <!-- 当这个链接没有被点击的时候 颜色是灰色 并且没有下划线 -->
    <!-- 当这个链接被点击过一次后 颜色是红色 -->
</body>
</html>
  • 标签选择器 a {} 和 伪类选择器 a:link {} 的区别:
    1. a {} 定义的样式针对所有超链接(包括锚点链接)
    2. a:link {} 定义的样式只对带有 href 属性的超链接有效(不包括锚点链接)
  1. 动态伪类(可以用于任何标签)
  • hover:鼠标指针位于其上的时候
  • active:按下没有松开鼠标的时候
  • focus:获得焦点的时候(鼠标点击的地方就是焦点)

举例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>nomantest</title>
    <style>
        a:hover {
        color: blue;
      }

        a:active {
        color: green;
     }
     input:focus {
        background-color: red;
     }
    </style>
</head>
<body>
    <a href="#">点我</a>
    <!-- 当鼠标放到这个链接上的时候 颜色是蓝色 -->
    <!-- 当鼠标按下这个链接 但未弹起鼠标的时候 颜色是绿色 -->
    
    <input type="text">
    <!-- 当鼠标点击这个文本框时 文本框背景颜色会变成红色 -->
    <!-- 当鼠标去点击其他元素时 文本框会恢复原来的样式 -->
</body>
</html>

【注意】:

  1. 请遵循顺序声明:link 、visited 、hover 、active 否则样式可能不会生效
  2. a 标签在浏览器中具有默认样式 如果想要修改样式 需要单独给 a标签指定样式(不能从父元素继承样式)
赞(0)
未经允许不得转载:飞天狒狒 » CSS中常见的基础选择器和复合选择器

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址