首页 前端知识 CSS的选择器

CSS的选择器

2024-02-08 15:02:01 前端知识 前端哥 617 808 我要收藏

CSS选择器用于“查找”(或选取)要设置的HTML。

可以将CSS选择器分为五类:

1.基本选择器

基本选择器又包含以下四种选择:

1.1标签选择器

根据标签的名称设置对应的样式

代码:

<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>
        p{color: coral;}
    </style>
</head>
<body>
    <p>每个段落都会受影响</p>
    <P>这个段落会</P>
    <p>这个段落也会</p>
</body>
</html>

运行效果:

 1.2ID选择器

通过获取标签里面的ID属性去设置对应的样式,设置的时候#+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>Document</title>
    <style>
        #one{color: coral;}
    </style>
</head>
<body>
    <p id="one">段落都会受影响</p>
    <P>这个段落不会</P>
</body>
</html>

运行效果:注意:id名称不能以数字开头。

1.3类选择器

通过获取标签里的class属性去设置对应的样式,设置的时候“.”+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>Document</title>
    <style>
        .red{color: red;}
    </style>
</head>
<body>
    <h2 class="red">标题会变成红色</h2>
    <P class="red">段落也会变成红色</P>
</body>
</html>

运行效果:注意:类名不能以数字开头。

还可以指定只有特定的HTML元素会受类的影响。

代码:

<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>
        h2.red{color: red;}
    </style>
</head>
<body>
    <h2 class="red">标题会变成红色</h2>
    <P class="red">段落不会变成红色</P>
</body>

 运行效果:

 HTML也可以引用多个类

代码:

<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>
        .red{color: red;}
        .big{font-size: 20px;}
    </style>
</head>
<body>
    <p class="big">段落字号会变大</p>
    <P class="red">段落会变成红色</P>
    <P class="red big">段落会变成红色,而且字号会变大</P>
</body>

运行效果:

1.4通配符选择器

通过*设置对应的样式

代码:

<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>
        *{color:blue;}
    </style>
</head>
<body>
    <p>每一个都会受影响,变成蓝色</h2>
    <div>div标签会变成蓝色</div>
    <ul>
        <li>列表1,变成蓝色</li>
        <li>列表2,变成蓝色</li>
        <li>列表3,变成蓝色</li>
    </ul>
</body>

运行结果:

 1.5四种选择器的优先级:

ID选择器>类选择器>标签选择器>通配符选择器

2.包含选择器

包含选择器又包含以下三个选择器:

2.1子代选择器

子代选择器获取的某个标签的第一级子标签,使用>(子选择符)

代码:

    <style>
        /* 子代选择器 */
        .list > ul{
            border: 1px solid saddlebrown;/*给列表添加一个边框*/
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p id="one">这是一个段落标签</p>
    <div class="box">这又是一个div</div>
    <div class="list">
        <ul>
            <li>这是列表1</li>
            <li>这是列表2</li>
            <li>这是列表3</li>
            <li>这是列表4</li>
            <li>这是列表5</li>
        </ul>
        <li>这是列表6</li>
        <li>这是列表7</li>
        <li>这是列表8</li>
        <li>这是列表9</li>
    </div>
</body>
</html>

运行结果:

 2.2后代选择器

获取的某个标签的所有子标签

代码

<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>
        /* 后代选择器 */
        .list li{
            border: 1px solid brown;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p id="one">这是一个段落标签</p>
    <div class="box">这又是一个div</div>
    <div class="list">
        <ul>
            <li>这是列表1</li>
            <li>这是列表2</li>
            <li>这是列表3</li>
            <li>这是列表4</li>
            <li>这是列表5</li>
        </ul>
        <li>这是列表6</li>
        <li>这是列表7</li>
        <li>这是列表8</li>
        <li>这是列表9</li>
    </div>
</body>

运行结果:

 可以看到,列表1---5的父级标签与列表6---9的父级标签不同,但它们的都是biv标签的后代标签。

2.3分组选择器

也叫做后代选择器,可以设定多个标签,使用逗号进行分割。

代码:

<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>
         /* 分组选择器 */
        h1,#one,.box{
            color: blue;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p id="one">这是一个段落标签</p>
    <div class="box">这又是一个div</div>
    <div class="list">
        <ul>
            <li>这是列表1</li>
            <li>这是列表2</li>
            <li>这是列表3</li>
            <li>这是列表4</li>
            <li>这是列表5</li>
        </ul>
        <li>这是列表6</li>
        <li>这是列表7</li>
        <li>这是列表8</li>
        <li>这是列表9</li>
    </div>
</body>

运行结果:

 3.属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

 3.1可以选中某个标签中存在的某个值

代码:

<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>
        /* 选中某个标签存在的属性 */
        .container[class]{
            color: aqua;
        }
        div[title]{
            text-align: center;
            color: brown;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果:

 3.2可以选择确切的某个值

代码:

<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>
         /* 确切的等于某个值 */
        input[type="password"]{
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果:

3.3可以选择属性里包含的某个值

代码: 

<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>
          /* 属性里面包含某个值 */
        input[type *="e"]{
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果: 3.4选择属性中以xx开始的值

代码:

<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>
        /* 属性中的值以xxx开始 */
        input[type ^="e"]{
            background-color: darkgray;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果:

 3.5选择属性中以xxx结尾的值

代码:

<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>
        /* 属性中的值以xxxx结束 */
        input[type $="rl"]{
            background-color: darkolivegreen;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果:

 3.6选择下一个标签

代码:

<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>
        /* 表示下一个标签 */
        .msg + p{
            color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果:

 3.7选择属性具体的等于某个值

代码:

<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>
         /* 属性等于某个值 */
        [class=msg]{
            color: salmon;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果:

 4.伪类选择器

伪类用于定义元素的特殊状态。同一个标签,在不同的状态下有不同的样式。伪类是通过冒号来表示,最早的时候主要是用来渲染a标签不同的状态下的不同的样式。

 比如,它可以用于:设置鼠标悬停在元素上的样式;为已访问和未访问链接设置不同的样式;设置元素获得焦点时的样式。

超链接点击之前-------:link

超链接被点击之后--------:visited

鼠标放在超链接上的时候(悬停)--------:hover

超链接激活的时候(鼠标点击但是不松手的时候)--------:active

代码:

 <style>
        /* 超链接点击之前是红色 */
        a:link{ color: brown; }
        /* 超链接点击之后是橙色 */
        a:visited{color: orange;}
        /* 鼠标悬停的时候的颜色是绿色 */
        a:hover{color: green;}
        /* 超链接被激活的时候是蓝色 */
        a:active{color: blue;}
        /* div:hover{color: blueviolet;} */
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">点击我</a>
    <!-- <div>这是一个div</div> -->
</body>

注意:对于a标签的四种状态的顺序是一定的:a:link  a:visited  a:hover  a:active。

5.伪元素选择器

伪元素用于设置元素指定部分的样式。

比如:它可以用于:设置元素的首字母,首行的样式;在元素的内容之前或之后插入内容。

:defore  -------  css2 中                                 ::before  -------  css3 中

:after   --------  css2中                                   ::after   --------  css3中

注意:使用before和after的时候一定要给写上content属性。

代码:

<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>
        p{
            color: brown;
            font-size: 30px;
        }
        p::before{content:"张三说" ;color: chocolate;}
        p::after{content: "对不对";color: crimson;}
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>

 运行结果:

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1487.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!