承认吧！CSS最主要的就是选择器的用法！

最新推荐文章于 2024-07-18 17:34:14 发布

拨云见日_c

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量1k

点赞数 31

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_57547315/article/details/135993924

版权

本文详细介绍了CSS的各种选择器，包括id选择器、类选择器、标签选择器、伪类选择器、子类选择器、通配符选择器、并集选择器以及属性选择器，帮助读者理解和掌握如何利用这些选择器美化HTML页面。

摘要由CSDN通过智能技术生成

CSS

html: 毛坯
CSS:  装修 
cascading style sheet  层叠样式表。
使用CSS里面的样式属性，美化HTML页面内容。

1. 选择器

编写的样式要作用在文档里面的哪些标签/元素上，使用选择器进行定位。

常用的选择器:
  1. id选择器
  2. 类选择器
  3. 标签选择器
  4. 多类名选择器
  -------------
  5. 伪类选择器
  6. 子类选择器
  7. 通配符选择器
  8. 并集选择器
  9. 属性选择器

1.1 id选择器

权重最高/级别最高。

需要在标签上创建id属性。

#id的名称{
    样式属性名: 属性数据,
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/CSS/css/my.css">
    <style>
        /* 
         语法:
           选择器{
              样式属性名: 属性数据,
           }
        */
   
    </style>
</head>
<body>
    <div id="box">
        div..............
    </div>

    <!-- <p id="box">
        p。。。。。。。。。。。。。。
    </p> -->

    <!-- 

        1. 样式编写
        1.1 行内样式  就是使用标签里面的style属性进行操作
            不推荐。 级别最高的。 建议仅仅是编写简单操作
        1.2 内嵌样式  就是在head标签里面创建style标签 编写属性
            在学习/练习使用
        1.3 链接样式  就是在head标签里面创建link标签 使用href属性引入外部css文件
            在外部创建样式文件：  xxx.css   在css文件中编写的内容与再style标签里面编写的是一致的
            在开发中建议使用。
        
     -->
</body>
</html>

1.2 类选择器

必须与标签里面的 class属性有关。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       /* 
         .class属性数据{

         }
       */

       .my-box{
          color: red;
          font-weight: bolder;
          font-family: '楷体';
          font-size: larger;
       }
    </style>
</head>
<body>
    

    <!-- class属性名并不是唯一的  是可以重名的 -->
    <span class="my-box">
        span。。。。。 你好
    </span>

    <div class="my-box">
        Angelababy回归！全平台账号解封，网传果然不假
    </div>
</body>
</html>

1.3 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
         标签名{

         }
        */
        /* 当前页面中指定的所有的标签样式都会生效 */

        #p1{
            font-style: normal;
            color: brown;
        }

        p{
            border: 1px solid black;
            background-color: aqua;
            font-style: italic;
            color: blue;
        }

    </style>
</head>
<body>
    
    <!--  优先级
      行内样式>id>class>标签
    -->
    <p>
        Angelababy回归！全平台账号解封，网传果然不假
    </p>

    <p id="p1" style="color: chartreuse;">
        汤唯公开回应：已分居，但绝对不会离婚
    </p>

</body>
</html>

1.4 多类名选择器

与class属性有关。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            background-color: blueviolet;
            margin-top: 20px;
        }

        .box1{
            font-size: 20px;
            text-align: center;
            line-height: 200px;
        }
        /* 使用居多  比较推荐 */

    </style>
</head>

<body>
    <div class="box box1">
        div1.。。。
    </div>

    <div class="box box2">
        div2........
    </div>
</body>

</html>

1.5 伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box:hover{
            border: 1px solid blue;
            width: 300px;
            text-shadow: 5px 5px 5px #FF0000;
        }

        a:active{
            background-color: yellow;
        }
        a:visited{
            font-family: '楷体';
            color: green;
        }

        input:focus{
            /* border: 1px dotted red; */
            width: 200px;
            height: 30px;
            background-color: yellow;
        }
        p::before{
            content: '用户名:';
        }
        p::after{
            content: '...';
        }

    </style>
</head>
<body>
    <!-- 
        伪类选择器
        语法:
          选择器名称:伪类选择器{
            样式属性:数据,
          }
    -->

    <a href="http://www.abc.com">连接1</a>
    <div id="box">
        伪类选择器.......
    </div>

    <input type="text">

    <p>
        张三
    </p>
    
    <p>
        李四
    </p>
</body>
</html>

1.6 子类选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            display: block;
        }
        #box #s2 {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <!-- 

        必须有父子标签。
        语法:
         父标签选择器 子标签的选择器{

         }
     -->

    <div id="box">
        <span id="s1">span1</span>
        <span id="s2">span2</span>
    </div>
</body>

</html>

1.7 通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: red;
            margin: 0;
            padding: 0;
        }
        body{
            border: 1px solid red;
            
        }
    </style>
</head>
<body>
    <!-- 
        通配符选择器  I*
     -->

     <a href="">aaa</a>
     <div>
        div
     </div>

     <span>
        span....
     </span>
</body>
</html>

1.8 并集选择器

多个选择器都有编写的相同的选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       h1,#box,a{
        color: red;
       }
    </style>
</head>
<body>
    <!-- 并集选择器
       语法:
         选择名1,选择名2....
    -->
    <a href="">aaa</a>
    <div id="box">
       div
    </div>

    <span>
       span....
    </span>

    <h1>
        h1
    </h1>

    <h2>
        h1
    </h2>
</body>
</html>

1.9 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[name='age']{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    
    <!-- 

        属性选择器:
          选择器名[属性名='属性值']{

          }
     -->
    <input type="text" name="username">
    <input id="i1" type="text" name="age">
</body>
</html>