介绍CSS选择器和用法

落鹜秋水

已于 2023-03-29 22:52:24 修改

阅读量169

点赞数 2

文章标签： css 前端 html

于 2023-03-29 22:49:25 首次发布

本文链接：https://blog.csdn.net/m0_74377868/article/details/129834551

版权

css基本选择器：

css选择器指向需要添加样式的对象，设置样式就是设置自己需要的想要的样式，如：颜色，字体类型，背景颜色等。

在css中基本选择器包括：

标签选择器：针对一类标签（根据标签的名称获取）
ID选择器：针对某一个特定的标签使用（获取的是ID属性）
类选择器：针对你想要的所有标签使用（class属性）
通用选择器：针对所有的标签都适用（通配符）

标签选择器

<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:brown
        }
    </style>
</head>
<body>
    <div id="one" class="two">
        这是一个div
    </div>
</body>

ID选择器

<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">
        #one{
            color:brown
        }
    </style>
</head>
<body>
    <div id="one" class="two">
        这是第一个div
    </div>
</body>

类选择器

<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">
        .two{
            color:brown
        }
    </style>
</head>
<body>
    <div id="one" class="two">
        这是第一个div
    </div>
</body>

通用选择器

<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">
        *{
            color:brown;
        }
    </style>
</head>
<body>
    <div id="one" class="two">
        这是第一个div
    </div>
</body>

以上代码展示效果相同为：

注意：

id属性是唯一的，class不唯一
四种选择器的优先级：ID选择器 > 类选择器 >标签选择器 > 通用选择器

2.包含选择

子代选择器（获取的是某个标签的第一级子标签）
后代选择器（获取的某个标签里面所有的子标签）
逗号选择器（可以同时设置多个标签，使用逗号进行分割）

子代选择器

head>
     <title>选择器</title>
     <style type="text/css">
        /*子代选择器*/
        div.list>ul{
        border: 1px solid red;
        }
     </style>
</head>
<body>
    <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>

展示效果如下：

后代选择器

<head>
     <title>选择器</title>
     <style type="text/css">
        /*后代选择器*/
        .list li{
        border: 1px solid blue;
        }
     </style>
</head>
<body>
   <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>

展示效果如下：

逗号选择器

<head>
     <title>选择器</title>
     <style type="text/css">
        /*逗号择器*/
        .one,.two,#first{
        color: green;
        width: 100px;
        height: 100px;
        background: pink;
        border: 1px solid black;
        }
     </style>
</head>
<body>
        <div class="one">这是一个div</div>
        <div class="two">这是第二个div</div>
        <p id="first">这是一个段落标签</p>
</body>

展示效果如下：

属性选择器

选择含有指定属性的元素。
选择含有指定属性及指定属性值的元素。
选择含有指定属性及指定属性值开头和结尾的元素。
表示下一标签。
选择含有指定属性，只要含有某个属性值的元素。

选择含有指定属性的元素

<!DOCTYPE html>
<html>
<head>
         <title>选择器</title>
         <style type="text/css">
           /*选择选中的额标签中存在的某个属性*/
           div[title]{
            border:5px solid green;
            }
         </style>
</head>
<body>
      <div title="这是一个标题">这是第一个div</div>
</body>

展示效果如下：

选择含有指定属性及指定属性值的元素

确切的等于某个值：type=类型
属性值包含某个值：type*=类型

<!DOCTYPE html>
<html>
<head>
         <title>选择器</title>
         <style type="text/css">
          /*确切的等于某个值*/
            input[type="text"]{
               background: red;
            }
         </style>
</head>
<body>
      <input type="text" value="飞机">
</body>

/*属性值包含某个值*/
input[type *="e"]{
background: blue;
}
<!DOCTYPE html>
<html>
<head>
         <title>选择器</title>
         <style type="text/css">
             /*属性值包含某个值*/
                input[type *="e"]{
                background: blue;
            }
         </style>
</head>
<body>
      <input type="email"  value="大炮">>
</body>

展示效果如下：

选择含有指定属性及指定属性值开头和结尾的元素

开头type ^=类型
结尾type $=类型

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
        <style type="text/css">
            /*属性值以某个值开头*/
            input[type ^="e"]{
            background: green;
            }
        </style>
</head>
<body>
        <input type="email" name="" id="" value="大炮">
        <input type="url" name="" id="" value="火箭">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
        <title>选择器</title>
            <style type="text/css">
            /*属性值以某个值结尾*/
            input[type $="rl"]{
            background: red;
            }
        </style>
</head>
<body>
        <input type="email" name="" id="" value="大炮">
        <input type="url" name="" id="" value="火箭">
</body>
</html>

展示效果如下：

下一标签

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
        <style type="text/css">
            /*+表示下一个标签*/
            .msg +p{
            border: 1px solid green;
            }
        </style>
</head>
<body>
        <div class="msg">我爱睡觉</div>
        <p id="msg1" ">我爱吃饭</p>
</body>
</html>

展示效果如下：

选择含有指定属性，只要含有某个属性值的元素。

<!DOCTYPE html>
<html>
<head>
    <title>选择器</title>
        <style type="text/css">
            /*属性等于某个属性值*/
            [title="这是一个标题"]{
            color: red;
            }
        </style>
</head>
<body>
        <div title="这是一个标题">我爱中国</div>
</body>
</html>

展示效果如下：

伪类选择器

同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，通过:进行设置不同的样式

link ------ 链接点击之前。
hover ------鼠标停在上面。
active ------"激活" 鼠标点击的时候但是不松手。
visited ----- 链接点击之后。

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <style type="text/css">
            /*点击之前的颜色*/
            a:link{
                color: yellow;
            }
            /*点击之后的颜色*/
            a:visited{
                color: black;
             }
            /*鼠标悬停的颜色*/
            a:hover{
                color: purple;
            }
            /*鼠标点击在上面但是不松手的时候*/
            a:active{
                color: royalblue;
            }
        </style>
</head>
<body>
        <a href="https://www.baidu.com/">点我</a>
</body>
</html>

展示效果如下：

link
hover
active
visited

注：四种状态的顺序最好固定，link 、visited、 hover、 active 。

伪元素选择器

注：要使用伪元素选择器一定要加上 content 属性

::before---------之前
::after-----------之后

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <style type="text/css">
        p::before{
            content: "张三";
            color: red;
        }
    </style>
</head>
<body>
     <p>很帅</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <style type="text/css">
        p::after{
            content: "李四";
            color: green;
        }
    </style>
</head>
<body>
    <p>坑货</p>
</body>
</html>

展示效果如下：

before-------
after ----------

二者可以一起使用

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <style type="text/css">
            p::before{
            content: "夏琪";
            color: red;
            }
            p::after{
            content: "尤勇";
            color: green;
            }
    </style>
</head>
<body>
    <p>爱</p>
</body>
</html>

展示效果如下：

以上就是我总结的内容

落鹜秋水

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
介绍CSS选择器和用法

css选择器指向需要添加样式的对象，设置样式就是设置自己需要的想要的样式，如：颜色，字体类型，背景颜色等。在css中基本选择器包括：标签选择器：针对一类标签（根据标签的名称获取）ID选择器：针对某一个特定的标签使用（获取的是ID属性）类选择器：针对你想要的所有标签使用class属性）通用选择器：针对所有的标签都适用（通配符）
复制链接

扫一扫