CSS的选择器

最新推荐文章于 2024-10-05 20:34:11 发布
最新推荐文章于 2024-10-05 20:34:11 发布
阅读量4k 收藏 8
点赞数 1
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_76643111/article/details/130673591
版权

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>

 运行结果：

 

guohilin
关注
CSS之子代选择器
m0_53521757的博客
04-24 4876
子选择器
CSS选择器.pdf
10-09
在CSS选择器的体系中，存在多种不同类型的选择器，每种都有其特定的用途和使用场景。 首先，元素选择符是最基本的类型，包括通配符选择器、标签选择器、id选择器和class选择器。通配符选择器用“*”表示，可以选中...
CSS选择器
最新发布
探索软件工程的奥秘
10-05 723
步骤：定义类选择器（. 类名），使用类选择器（标签添加class = "类名"）。,选择器N{CSS 属性}，选择器之间用,隔开。步骤：定义id选择器（#id名），使用id选择器（标签添加id= "id名"）。通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式。写法：父选择器 子选择器 { CSS属性 } ，父子选择器之间用空格隔开。选择器写法：父选择器 > 子选择器{CSS属性}，父子选择器之间用>隔开。选择器写法：选择器1选择器2{CSS 属性}，选择器之间连写，没有符号。
CSS 多类选择器
weixin_33694620的博客
12-17 181
　　写的代码多了，就会发现，自己越来越无知了，总以为html css很简单，已经掌握的很熟练了，其实我还差的很多。 　　平时没有用过css的这种写法  .a.b{display:block;}   上网一查才明白。 　　参考：http://www.w3school.com.cn/css/css_selector_class.asp 1、在 HTML 中，一个 class 值中可能包含一个词列...
CSS的子选择器
weixin_61350295的博客
10-24 5073
CSS的子选择器
CSS 子元素选择器
houpainansheng688的博客
06-15 204
所有选择器参考手册：http://www.w3school.com.cn/cssref/css_selectors.asp 1）子元素选择器 参考链接：http://www.w3school.com.cn/cssref/selector_nth-child.asp p:nth-child(2) { background:#ff0000; } 选择所有的p元素 的 父元素...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
react-React组件的css选择器
08-15
在React开发中，CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面，因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的...
CSS-子元素选择器
主营前端方向，技术栈是vue
10-30 3793
子元素选择器(选中第一个、最后一个、指定参数第几个子元素，所有子元素和当前类型所有子元素排列)
CSS 选择器
m0_37623485的博客
03-24 551
CSS选择器用于选择你想要的样式作用于哪些元素CSS选择器分为：1、类别选择器根据类名来选择，以 . 开头例：&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="Ed
css选择器
weixin_52474204的博客
04-19 437
css选择器 选择器具有以下几个要素: 层叠性、在同一权重值之下同一元素的代码，后面的样式会覆盖前面的样式。 继承性：给父元素设置样式时，子元素也会有相关的样式。 优先级:比较权重值（！important>行内样式>id选择器（100）>class选择器(10)>标签选择器（1） 取id或者class类名可以是英文数字下划线的组合，但是不可以用数字开头! 通配符选择器： *{ margin: 0; /* 给页面所有的元素加上这个样式，包括html*/ padding: 0; }
CSS 选择器 – 类、名称、子选择器
是程序喵呀
04-07 1525
请记住，元素的 ID 在文档中应该是唯一的，这意味着应该只有一个 HTML 元素具有给定的 ID 值。您不能在该元素之外的其他元素上使用相同的 ID 值。例如，您可以使用伪元素对元素的第一个字母或第一行进行不同的样式。使用类选择器，您可以一次选择多个元素并以相同的方式设置它们的样式，而无需分别为每个元素复制和粘贴相同的样式。本质上，您首先提到父元素，留一个空格，然后提到第一个元素的后代，即父元素的子元素。如果您有一些编写 CSS 代码的经验，那么简单的选择器通常是您最常使用的选择器，也是您最熟悉的选择器。
css之子选择器
异想实验室|Arduion|ESP8266|Micro Python|
02-28 931
子选择器，格式 父标签 > 子标签 关系符为大于号； 并不会让孙标签更改样式 */
CSS之选择器
weixin_45604020的博客
06-22 4175
选择器是选取需设置样式的元素的模式，用来指定网页上我们想要样式化的HTML元素。
CSS教程--CSS 后代选择器
weixin_30916125的博客
10-09 350
后代选择器（descendant selector）又称为包含选择器。 后代选择器可以选择作为某元素后代的元素。 根据上下文选择元素 我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。 举例来说，如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写： h1 em {color:red;} 上面这个规则会把作为 h1...
CSS选择器类型及其作用详解
CSS选择器不仅限于单独使用，它们可以组合、嵌套使用，也可以通过逗号分隔来选择多个元素，大大提高了样式的灵活性和控制力。理解和掌握不同类型的选择器是前端开发者进行网页设计与开发的基础技能之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值