css常用选择器

Gxbfeng

已于 2022-06-27 13:41:05 修改

阅读量834

点赞数

文章标签： css

于 2022-06-25 21:22:03 首次发布

本文链接：https://blog.csdn.net/weixin_51757999/article/details/125463974

版权

一、基础选择器

1.标签选择器

<style>
div{
color:red;
}

</style>

<body>

<div>这是标签选择器</div>

</body>

2.类选择器


<style>

.div1{
color:red;
}

</style>

<body>

<div class="div1">这是类选择器</div>

</body>

3.id选择器

1. 所有标签上都有id属性

2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！

3. 一个标签上只能有一个id属性值

4. 一个id选择器只能选中一个标签




<style>

#div1{
color:red;
}

</style>

<body>

<div id="div1">这是id选择器</div>

</body>

5.通配符选择器

作用：找到页面中所有的标签，设置样式





<style>

*{
font-size：30px；
}

</style>

<body>

<div >这是通配符选择器</div>

</body>

二、复合选择器

1.后代选择器






<style>

body div .c2{
    /* 后代选择器 */
    color: blueviolet;
}
</style>

<body>

  <div><p class="c1">后代选择器</p><p class="c2">houdai</p></div>

</body>

2.子代选择器







<style>
body>a{
    text-decoration: none;
}
</style>

<body>

  <a href="www.baidu.com">百度</a>
    <div id="blue">这是个id选择器</div>
    <p><a href="#">123</a></p>

</body>

3.并集选择器








<style>
h1,h2,h3, h4{
    /* 并集选择器 */
    color: bisque;
}
</style>

<body>

   <h1>并集选择器1</h1>
  <h2>并集选择器2</h2>
  <h3>并集选择器3</h3>
  <h4>并集选择器4</h4>
<h5>并集选择器5</h5>

</body>

4.交集选择器









<style>
div.d1{
    color: aqua;
}
div.d2{
    color: blueviolet;
}
</style>

<body>

 <div class="d1">666</div>
<h1 class="d2">555</h1>
<p class="d1">777</p>

</body>

5.：hover伪类选择器










<style>
a:hover{
    color: chartreuse;
}
  
</style>

<body>

 <a href="www.baidu.com">百度</a>

</body>

6.结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* li:first-child{
        background-color: aquamarine;
        list-style: none;
    } */
    /* li:last-child{
        background-color: aquamarine;
        list-style: none;
    } */
    /* li:nth-child(2n+1){
        background-color: aqua;
         list-style: none;
    } */
    li:nth-last-child(2n+1){
        background-color: aqua;
         list-style: none;
    }
    </style>
</head>
<body>
 <ul>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
    <li>结构伪类选择器</li>
 </ul>   
</body>
</html>

Gxbfeng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
css常用选择器

目录一、基础选择器1.标签选择器2.类选择器3.id选择器5.通配符选择器二、复合选择器1.后代选择器2.子代选择器3.并集选择器4.交集选择器5.：hover伪类选择器2.类选择器3.id选择器1. 所有标签上都有id属性2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！3. 一个标签上只能有一个id属性值4. 一个id选择器只能选中一个标签5.通配符选择器作用：找到页面中所有的标签，设置样式二、复合选择器1.后代选择器2.子代选择器
复制链接

扫一扫