69.【CSS 3.0】（二）-阿里云开发者社区

69.【CSS 3.0】（二）

2023-09-22 112

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 69.【CSS 3.0】

7.层次选择器

1.后代选择器: 在某个元素的后面: 祖爷爷 | 爷爷 爸爸 你  （全都亮）
eg:
body p{
}
2.子选择器: （儿子亮）
eg:
body>p{
}
3.相邻兄弟选择器： (下一行亮)
.类名+(p){
}
4.通用选择器:   (向下的所有兄弟元素)
.类名~(p){
}

7.1后代选择器:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    后代选择器:
   body p{
       background: #60d01b;
    }
    </style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
</body>
</html>

7.2子选择器: 一代

<style>
   body>p{
       background: #60d01b;
    }
    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
   body>p{
       background: #60d01b;
    }
    </style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
</body>
</html>

7.3兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
  .active+p{
      background: red;
  }
    </style>
</head>
<body>
<p>0</p>
<p class="active">1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
</body>
</html>

7.4通用选择器

8.结构伪类选择器

1.选择指定的第一个和最后一个。
   <style>
     /*<!--    ul的第一个元素-->*/
      ul li:first-child{
          background: #1616aa;
      }
      ul li:last-child{
          background: #0cd28e;
      }
    /*    ul最后一个元素*/
    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
     /*<!--    ul的第一个元素-->*/
      ul li:first-child{
          background: #1616aa;
      }
      ul li:last-child{
          background: #0cd28e;
      }
    /*    ul最后一个元素*/
    </style>
</head>
<body>
<p>0</p>
<p >1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>7</p>
<p>8</p>
<p>9</p>
</body>
</html>

1.选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素(p)才生效。
   p:nth-child(2){
          background: #c12075;
      }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:nth-child(2){
          background: #c12075;
      }
    </style>
</head>
<body>
<p>0</p>
<p >1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>7</p>
<p>8</p>
<p>9</p>
</body>
</html>

选中父元素下的p元素的第二个.
• 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:nth-of-type(2){
            background: #c7771c;
        }
    </style>
</head>
<body>
<p>0</p>
<p >1</p>
<p>2</p>
<p>3</p>
<ul>
    <li>
        <p>4</p>
    </li>
    <li>
        <p>5</p>
    </li>
    <li>
        <p>6</p>
    </li>
</ul>
<p>7</p>
<p>8</p>
<p>9</p>
</body>
</html>

8.1伪类特效

1.随着鼠标的移动，他会有残影（悬浮）
  <style>
     p:hover{
         background: aliceblue;
     }
    </style>
2.

69.【CSS 3.0】（二）

7.层次选择器

7.1后代选择器:

7.2子选择器: 一代

7.3兄弟选择器

7.4通用选择器

8.结构伪类选择器

8.1伪类特效

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

69.【CSS 3.0】（二）

7.层次选择器

7.1后代选择器:

7.2子选择器: 一代

7.3兄弟选择器

7.4通用选择器

8.结构伪类选择器

8.1伪类特效

热门文章

最新文章

相关电子书