CSS选择器类别和用法

最新推荐文章于 2024-04-06 19:37:01 发布

林妻灵

最新推荐文章于 2024-04-06 19:37:01 发布

阅读量989

点赞数 3

文章标签： css 前端 html

本文链接：https://blog.csdn.net/2302_76662918/article/details/129820141

版权

在css中选择器的作用就是向指定的对象添加某种样式或标签，例如改变字体颜色、字体的型号、字体大小及宽度。而选择又分为以下几种：

1.基本选择器:（下面以改变颜色为例）

1.1 标签选择器：（下面以div标签为例）

<!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>选择器</title>
    <style type="text/css">
        div{
            color: red;
        }    
  </style>
</head>
<body>
    <div id="one" class="two"> 这是第一个div文件</div>
</body>
</html>

（利用div标签将字体颜色改变）

1.2 ID选择器：（对id定义一个名字，后续可以#名字的方法进行调用）


        #one{
            color: blue;
        }

（这里将one赋予ID进行调用）

1.3 类选择器：（class属性，用法和ID一样）

        .two{
            color: yellow;
        }

（值得注意的是名字前应以.修饰）

1.4 通用选择器：（通配符*调用）


         
       *{
            color:aqua;
        }

注：选择器的使用应该在<head>中嵌套的<style type="text/css">中且四种选择器的优先级为ID>class>标签>通配符

2.包含选择器：

2.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=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">

    /* 子代选择器*/  div.list>ul{
            border: 1px solid red;
        }
       
    </style>
</head>
<body>
    <div class="one">这是第一个</div>
    <div class="two">这是第二个</div>
    <p id="first"> 这是一个段落标签</p>
    <div class="list">
        <ul>
            <li>这是1</li>
            <li>这是2</li>
            <li>这是3</li>
            <li>这是4</li>
            <li>这是5</li>
            <li>这是6</li>
            <li>这是7</li>
            <li>这是8</li>
        </ul>
    </div>
</body>
</html>

由上图可只将<div>标签中的子标签ul里面的内容进行了包装。

2.2 后代选择器：（获取某个标签的所有子标签）

 
    
      /* 后代选择器*/.list li{
            border: 1px solid blue;
        }

利用后代选择器将ul的子标签li进行全包装。

2.3逗号选择器：（分组选择，可以同时设置及包装多个子标签，不过要用逗号隔开）

 
      
        /*逗号选择器*/
        .one,.two,#first{
            color: green;
            width: 200px;
            height: 100px;
            background:yellow;
            border: 1px solid black;
        }

.one和#frist分别采用了基本选择其中的class属性和ID选择器。color决定字体的颜色，width和height分别决定该字框的宽度和高度。background为背景色。

3.属性选择器：

3.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 type="text/css">
      
    
       /*切确的某个值*/
       input[type="text"]{
        background-color: yellow;
       }
       
    </style>
</head>
<body>
    <div class="container">
        这是一个容器
    
    </div>
    <div title="标题">这是第二个容器</div>
    <input type="text" name="" id="" value="张三"><br>
    <input type="email" name="" id="" value="李四"><br>
    <input type="url" name="" id="" value="王五"><br>
    <hr>
    <div class="msg">喜欢打游戏<div>
        <p id="msgl">这是一个段落</p>
</body>
</html>

利用text精准将其调用，将张三一框背景色改变。

3.2开头：（调用名字前缀）

 
     
       /*开头*/
       input[type ^="e"]{
        background-color: aquamarine;
       }

利用e代替此名字进行调用。

3.3后缀：（调用名字的后缀）

 
      
       
       /*结尾*/
        input[type $="rl"]{
        background-color: green;
       }

3.4 下一标签：

/*表示下一个标签*/
       .msg +p{
        border: 1px solid blue;
       }

表示包装下一个标签。

4.伪类选择器：

4.1(a：link):(表示点击之前的样式)

<!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 type="text/css">
        a:link{
            color: red;/*没有点击之前*/

        }
        
    </style>
</head>
<body>
    <a href="https://www.baidu.com">点击这里</a>
</body>
</html>

4.2（a：visited）:(表示点击过后的样式)

      a:visited{
            color: aqua;/*点击之后*/
        }

4.3（a：hover）:(鼠标放在上面的样式)

   a:hover{
            color: blueviolet;/*放在上面的颜色*/
        }

4.4（ a:active）：（长点击不松手）

 a:active{
            color: bisque;/*点击不松手的颜色*/
        }

5.伪元素选择器：

5.1 （p::before）：（在文本前添加部分文字）

<!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 type="text/css">
        p::before{
            content: "张三";
            color:red;
        }
        
        p{                  /*字体样式*/
            font-size: 20px;
            font-family: "仿宋";
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>

font-size可以控制添加内容字体大小。 font-family可以调整字体。

5.2（p::after）（在文本末添加文字）

 p::after{
            content: "李四";/*添加内容*/
            color:aquamarine;
        }

林妻灵

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS选择器类别和用法

one{（这里将one赋予ID进行调用）
复制链接

扫一扫