CSS 复合选择器

最新推荐文章于 2022-08-26 09:58:00 发布

zzf2.0

最新推荐文章于 2022-08-26 09:58:00 发布

阅读量53

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/m0_46744635/article/details/107622761

版权

笔记专栏收录该内容

88 篇文章 1 订阅

订阅专栏

在这里插入图片描述

一、后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
  <style>
  ul li {
    color:pink;
  }
  ul li a{
    color:red;
  }

  .nav li{
    color:green;
  }
  .nav li a{
    color:yellow;
  }


  </style>
</head>
<body>

<ul>
  <li>zzf1</li>
  <li>zzf2</li>
  <li>zzf3</li>
  <li><a href="#">zzf4</a></li>
</ul> 

<ul class="nav">
<li>aaa1</li>
<li>aaa2</li>
<li>aaa3</li>
<li><a href="#">aaa4</a></li>
</ul>
    
</body>
</html>

二、子元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子元素选择器</title>
  <style>
 
.nav>a{
   color:pink;
 }


  </style>
</head>
<body>
  <div class="nav">
    <a href="#">我是亲儿子</a>
    <p>
      <a href="#">我是干儿子</a>
    </p>
  </div>


    
</body>
</html>

三、并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
  <style>
     div,
     p,
     .pig  li {
      color:pink;
     }
  </style>
</head>
<body>
   <div>zzfzzf</div>
    
   <p>熊大</p>
   <p>熊二</p>
    
   <ul class="pig">
     <li>小猪佩奇</li>
     <li>乔治</li>
     
   </ul>
    
</body>
</html>

四、链接伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
  <style>
     a:link{//未访问时的颜色
       color:red;
     }
     a:visited{//访问过后的颜色
       color:pink;

     }
     a:hover{//鼠标经过的颜色
       color:green;

     }
     a:active{//鼠标按住的颜色
       color:yellow;
     }
  </style>
</head>
<body>
   <a href="#">xinlang</a>
    
</body>
</html>

五、focus伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>focus伪类选择器</title>
  <style>
  input:focus {
    background-color:red;
  }
  </style>
</head>
<body>
   <input type="text">
   <input type="text">
   <input type="text">
    
</body>
</html>

zzf2.0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 复合选择器

在这里插入图片描述一、后代选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>后代选择器</title> <style> ul li {
复制链接

扫一扫