css学习笔记(二)

最新推荐文章于 2025-04-24 09:09:44 发布

原创最新推荐文章于 2025-04-24 09:09:44 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

7 篇文章

订阅专栏

今天学习下后代选择器和子代选择器

后代选择器:就是某个块级标签的子标签就是后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
        div p{
            color: cadetblue;
        }
    </style>
</head>
<body>
  <div><p>11111</p></div>
  <div><p>2222</p></div>
  <div><p>33333</p></div>
  <div><p>44444</p></div>
</body>
</html>

上面的div p{}就是后代选择器的语法格式中间用空格分开,空格表示所有的意思

后代选择器也包含选择器是一种从属关系

子代选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
        ul li>a{
            color: red;
        }
    </style>
</head>
<body>
   <ul>
       <li>
           <a href="#">bat</a>
       </li>
       <div>
           <a href="#">百度</a>
           <a href="#">腾讯</a>
           <a href="#">阿里巴巴</a>
       </div>
   </ul>
</body>
</html>

比如我单独想标签<a>中的bat字体变成红色,其他标签<a>颜色不变,那么就使用到了子代标签这里的子是指亲儿子,div中的a不是亲儿子还是孙子呵呵