CSS 选择器的常见用法

最新推荐文章于 2024-07-25 15:44:34 发布

梦醒着做

最新推荐文章于 2024-07-25 15:44:34 发布

阅读量73

点赞数

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

本文链接：https://blog.csdn.net/qq_62740215/article/details/129690975

版权

java笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS 要写到 style 标签中
style 标签可以放到页面任意位置. 一般放到 head 标签内.
CSS 使用 / / 作为注释. (使用 ctrl + / 快速切换) .

1.标签选择器

<!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>
        div{
            /* 这是注释 */
            /* 这个注释不能嵌套 */
            color: blue;
            font-size: 60px;
        }
    </style>

</head>
<body>
    <p>okkk</p>
    <div>okkk</div>
    <div>haohao1</div>
    
</body>
</html>

其中style中div部分就是标签选择器,标签选择器会选定当前页面所有指定的标签
font-size是设置字体大小

结果:
在这里插入图片描述
通过结果可以看出来,两个div标签中的字体颜色和大小都改变了

2.类选择器

通过前面的标签选择器可以看得出来它不能使相同标签有差异,有的时候我们需要把同类标签设计成不同的表现形式,类选择器就能实现这种差异

<!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>
</head>
<body>
    <style>
        .one{
            color:blue;
            font-size: 50px;
        }
    </style>

    <div>okkk</div>
    <div class="one">okk1</div>
    <div>haohao1</div>
    <div>haohao2</div>    

</body>
</html>

这个以点开头的就是类选择器,这个one是类名,在标签中用class=“one”,来使用它,注意在标签中使用它时,这个点是没有的.

结果:
在这里插入图片描述

3.id选择器

<body>
    <style>
        #id{
            color:blue;
            font-size: 50px;
        }
    </style>
    <div>okkk</div>
    <div>okk1</div>
    <div>haohao1</div>
    <div id="id">haohao2</div>    
</body>

其中用#开头的就是id选择器
结果:
在这里插入图片描述

4.通配符选择器

<body>
    <style>
        *{
            color:blue;
            font-size: 50px;
        }
    </style>

    <div>okkk</div>
    <div>okk1</div>
    <div>haohao1</div>
    <div id="id">haohao2</div>    
</body>

这个*开头的就是通配符选择器,这个选择器会选中这个页面所有的标签
一般用来干掉浏览器的默认样式.

5.后代选择器

在这里插入图片描述 ul是li的父标签,li是div的父标签,那个ul就是div的爷爷,div就是ul的孙子,
li,div都是ul的后代

写法:元素1 元素2 {样式声明}
元素1是父类,元素2是后代,元素1和元素2之间有空格,
元素1和元素可以是标签选择器,类选择器,id选择器.

<!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>
        .one li{
            color: blue;
        }
        
        .one div{
            color:brown
        }
    </style>
</head>
<body>
    <ul class="one">
       <li>
            <div>nihao</div> 
       </li>
       <li>hao</li>
       <li>hao</li>
   </ul>   
   <ol>
        <li>hao</li>
       <li>hao</li>
       <li>hao</li>   
   </ol>

</body>
</html>

结果:
在这里插入图片描述

6.子选择器

写法:元素1>元素2 { 样式声明 }
这个元素2是亲儿子,不能选择孙子

<!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>
        ul>li{
            color: blue;
        }
    </style>
</head>
<body>
    <ul class="one">
       <li>
            <div>nihao</div> 
       </li>
       <li>hao</li>
       <li>hao</li>
   </ul>   
   <ol>
        <li>hao</li>
       <li>hao</li>
       <li>hao</li>   
   </ol>
</body>
</html>

结果:
在这里插入图片描述

7.并集选择器

针对多个不同的选择器,应用相同的样式
写法: 元素1, 元素2 { 样式声明 }

这个元素的个数不限

<!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>
        div,p {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
      <div>想睡觉</div>
      <div>想睡觉</div>
      <div>想睡觉</div>
                   
      <p>不,你不想</p>
      <p>不,你不想</p>
</body>
</html>

结果:
在这里插入图片描述

8.伪类选择器

其中的两个:
:hover 这个鼠标放上去
:active 这个鼠标按下去

<!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>

        div {
            font-size: 40px;
        }
        div:hover {
            color: blue;
        }
        div:active {
            color: red;
        }
    </style>
</head>
<body>
      <div>想睡觉</div>
      <div>想睡觉</div>
      <div>想睡觉</div>
</body>
</html>