前端学习之css选择器--基本选择器、关系选择器、属性选择器、复合选择器、伪类选择器

已于 2024-03-17 22:47:14 修改
阅读量322 收藏 4
点赞数 7
文章标签： 前端 学习 css
于 2024-03-16 21:36:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/banliyaoguai/article/details/136769553
版权

目录

基本选择器

结果

关系选择器

结果

父子关系

祖先后代关系

相邻兄弟关系

兄弟关系

​编辑

 属性选择器

结果

 复合选择器

结果

 伪类选择器

 结果

伪类选择器-操作标签

结果

未访问

访问后

悬停

伪类选择器-操作表单

结果

 伪类选择器-操作结构

 结果

基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <!-- 
        基本选择器
            1、类选择器
            2、id选择器
            3、标签选择器
            4、通配符选择器    
    -->
    <style>
        /* 1、class选择器，一个标签可以设置一个或者多个选择器
        指的是标识test1这个类型
        class属性可以填写多个类型
        写在后面的class属性值覆盖前面的值 */
        .test1{
            color: aqua;
        }
        .test2{
            color: beige;
        }
        .test3{
            color: rgb(255, 205, 228);
        }
        /* 
        id选择器用#标识
        #id属性值
         */
        #tesd-id{
            color: brown;
        }
        /*
        3、标签选择器
        直接使用标签名称
        */
        span{
            /* 背景 */
            background-color: bisque;
        }
        /*
        4、通配符选择器，不建议使用
        会选中html页面全部元素
         */
         *{
            background-color: black;
         }
    </style>
</head>
<body>
    <span class="test1 test3">测试文字</span>
    <span class="test2">测试文字</span>
    <span id="tesd-id">测试文字</span>
</body>
</html>

结果

关系选择器

测试不同关系时要将其他关系测试代码注释掉，以防相互影响。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关系选择器</title>
    <!-- 
        1、父子
        2、祖先、后代
        3、相邻兄弟
        4、兄弟
     -->
     <style>
        /* 父子关系测试，渲染子标签，下面的代码渲染的是测试内容p和测试内容span，因为span在p里面 */
        div>p{
            color: aqua;
        }
        /* 祖先后代关系测试，渲染后代，又被成为后代选择器 */
        /* div span{
            color: brown;
        } */
        /* 相邻兄弟关系测试,注意是相邻的也就是在下面例子中只有测试1改变，且+只代表向下渲染*/
        /* .div+span{
            color: brown;

        } */
        /* 兄弟选择器,这个选的是全部的兄弟，同理也只可以向下渲染 */
        #test-p~span{
            color: blueviolet;
        }
     </style>
</head>
<body>
    <!-- 父子关系测试 -->
    <div>
        测试内容--div
        <p>
            测试内容-p
            <span>测试内容-span</span>
            <span>测试内容-span</span>
        </p>
        <p>测试内容-p</p>
    </div>
    <!-- 祖先后代测试 -->
    <!-- <div>
        测试内容--div
        <p>
            测试内容-p
            <span>测试内容-span</span>
            <span>测试内容-span</span>
            <span>测试内容-span</span>

        </p>
    </div> -->
    <!-- 相邻兄弟关系测试 -->
    <!-- <div class="div">
        测试内容--div
        <p>
            测试内容-p
            <span class="test1">测试内容-span</span>
            <span class="test2">测试内容-span</span>
            <span id="test-1">测试内容-span</span>

        </p>
    </div>
    <span>测试1</span>
    <span>测试2</span>
    <span>测试3</span>
    <span>测试4</span> -->
    <!-- 兄弟关系测试 -->
    <!-- <div class="div">
        测试内容--div
        <p>
            测试内容-p
            <p id="test-p">ppp测试</p>
            <span class="test1">测试内容-span</span>
            <span class="test2">测试内容-span</span>
            <span id="test-1">测试内容-span</span>

        </p>
    </div>
    <span>测试1</span>
    <span>测试2</span>
    <span>测试3</span>
    <span>测试4</span> -->
</body>
</html>

结果

父子关系

祖先后代关系

相邻兄弟关系

兄弟关系

 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <!-- 
        1、属性名
        2、属性名=属性值
        3、属性名^= (以某某开头的)
        4、属性名$=属性值 (以某某结尾的)
        5、属性名*=属性值 (包含某某)
     -->
     <style>
        /* 属性名 */
        [title]{
            color: brown;
        }
        /* 属性名 = 属性值 */
        [class="abcd"]{
            color: aqua;
        }
        /* 属性名^= (以某某开头的) */
        [title^="a"]{
            font-size: 120px;
        }
        /* 属性名$=属性值 (以某某结尾的) */
        [title$="c"]{
            color: blueviolet;
        }
        /* 属性名*=属性值 */
        [title*="bc"]{
            background-color: aqua;
        }
        /* 选择以a开头的属性title相邻的p标签 */
        [title^="a"]+p{
            color: chartreuse;
        }
     </style>
</head>
<body>
    <div title="a">a</div>
    <div title="ab">ab</div>
    <div title="abc">abc</div>
    <p class="abcd">abcd</p>
</body>
</html>

结果

 复合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <!-- 
        交集
        并集
        可以组合各种选择器，包括属性选择器，关系选择器，基本选择器
     -->
     <style>
        /* 交集 */
        .pc2#p1{
            color:red;
        }
        /* 并集 */
        .pc2,.d1{
            color:yellow;
        }
        [id="p1"],[class="d1"]{
            font-size: 120px;
        }
     </style>
</head>
<body>
    <p id="p1" class="pc1">测试内容1</p>
    <p id="p1" class="pc2">测试内容2</p>
    <div id="d1" class="d1">测试内容3</div>
    <div id="d1" class="d2">测试内容4</div>
</body>
</html>

结果

 伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <!-- 
        这个冒号后面的就是伪类选择器，
        伪类选择器，就是这是一个操作，
        不是一个标签之类的东西下面例
        子就是鼠标悬停后要产生的变化。
     -->
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: yellow;
        }
        div:hover{
            width: 50px;
            height: 50px;
            border: 1px solid black;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

 结果

伪类选择器-操作标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器-操作标签</title>
</head>
    <style>
        /* 未访问标签 */
        [href]:link{
            color: aqua;
        }
        /* 按压标签 */
        [href]:active{
            color: rgb(0, 255, 51);
        }
        /* 访问后标签 */
        [href]:visited{
            color: yellow;
        }
        /* 悬停标签 */
        [href]:hover{
            color: blueviolet;
        }
    </style>
<body>
    <a href="./2.1基本选择器.html">跳转到2.1</a>
</body>
</html>

结果

未访问

访问后

悬停

伪类选择器-操作表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器-操作表单</title>
    <style>
        /* 表示input标签的被选中属性，宽会变成100px */
        input:checked{
            width: 100px;
        }
        /* 表示获得鼠标焦点的元素宽会变成200px */
        input:focus{
            width: 200px;
        }
        /* 这个展示的是not属性表示除了not括号里面的属性执行的操作 */
        input:not([type="submit"]){
            width: 500px;
        }
        
    </style>
</head>

<body>
    <form action="">
        username:<input type="text" name="username" id="username"><br>
        password:<input type="password" name="password" id="password"><br>
        nickname:<input type="text" name="nickname" id="nickname"><br>
        爱好：<br>
        <input type="checkbox" name="hobby" id="hobby1">看书<br>
        <input type="checkbox" name="hobby" id="hobby1">听音乐<br>
        <input type="checkbox" name="hobby" id="hobby1">吃饭<br>
        <input type="submit" value="注册">
    </form>
</body>
</html>

结果

 对表单的一些操作，此次操作显示的是最后一个操作的结果

 伪类选择器-操作结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器-操作结构</title>
    <style>
        /* first-chile 表示所属父级的第一个同类型元素，若第一个不是同类型不渲染  */
        li:first-child{
            color: aqua;
        }
        /* first-of-type 表示所属父级的第一同类型元素，若第一个不是同类型也渲染 */
        li:first-of-type{
            color: red;
        }
        /* 链式写法,就是将不同的东西拼接，下面就是，当鼠标悬停到到first-of-type所指的地方变黄 */
        li:first-of-type:hover{
            color: yellow;
        }
        /* 指定索引元素 n代表全部，2n代表偶数变，2n-1代表奇数变，odd奇数变，even偶数变*/
        li:nth-child(4){
            color: palevioletred;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <p>测试内容</p>
            <li>测试内容1</li>
            <li>测试内容2</li>
            <li>测试内容3</li>
            <li>测试内容4</li>
            <li>测试内容5</li>
        </ul>
    </div>
</body>
</html>

 结果

不嫌弃的点点关注，点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚

板栗妖怪
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 伪类选择器 nth-child()说明
09-25
CSS3标准已提出数年，但是目前能实现她的浏览器并不多，虽然部分浏览器能实现部分规范，但这又有什么用呢？面对更多的兼容性问题，今天我们就来“前瞻”一下CSS3的一个伪类选择器“nth-child()”。
css选择器四大类：基本、组合、属性、伪类
01-19
什么是选择器？选择器的作用是通过它可以找到元素，把css样式传递给元素！css选择器主要分为：基本选择器、属性选择器、组合选择器与伪类选择器四个大类！ css基本选择器 基本选择器又分为：*通配符、标签选择器、class选择器、id选择器，在这里需要注意的编程思想在css层叠样式表中元素有且仅有一个id。注意以下几点1.id唯一性2.元素id不相同，就像每一个人只有一个身份证一样，ID就代表身份证3.class选择器不具有唯一性，它可以重复使用！此外这个*通配符代表的是全局 <!DOCTYPE html> <html lang=en> <head> <meta cha
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
09-25
css3的强大，让人惊叹，今天我们就来“前瞻”一下CSS3的一个伪类选择器“:nth-child()”实现奇偶行显示不同样式，具体的详细示例可以参考下文，希望对大家有所帮助
CSS3结构性伪类选择器九种写法
01-19
一、X:nth-child(n) Example Source Code ： li:nth-child(3) {color: red;} 　　接下来的几个伪类选择器使用上非常类似，功能也比较接近。　　:nth-child(n)，用于匹配索引值为n的子元素。索引值从1开始。　　X:nth-child()用法实际上有三种变化，demo的用法是最简单的，X:nth-child()更强大的用处在于奇偶匹配，明河不展开讲，有兴趣的请看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()伪类选择器》 二、X
web前端-基于CSS选择器的Web信息抽取的研究与实现.pdf
06-21
web前端-基于CSS选择器的Web信息抽取的研究与实现.pdf
CSS的选择器(超详细)
热门推荐
前端开发,HTML5,css3,JavaScript,node.js,vue
11-21 7万+
一、常用的选择器 1.元素选择器 2.类选择器(class选择器) 3.id选择器 4.通配符选择器 二、群组选择器 三、关系选择器 1.后代选择器 2.子代选择器 3.相邻兄弟选择器 4.通用兄弟选择器 5.案例 四、属性选择器 五、伪类选择器 1.常用的伪类选择器 2.否定伪类 3.元素的伪类 六、伪元素选择器
CSS基础笔记三，关系选择器（后代选择器，子代选择器，相邻兄弟选择器，通用兄弟选择器）
qq_55006020的博客
06-27 1438
关系选择器
〖大前端 - 基础入门三大核心之CSS篇③〗- CSS选择器之复合选择器与伪类
利他者利己，利己者无功。利他利己，利己利他。
03-11 2万+
css的标签选择器、id选择器、类选择器是最基本的选择器，事实上，这些选择器还可以通过不同的方式组合，形成复合选择器。
〖大前端 - 基础入门三大核心之CSS篇④〗- CSS选择器之元素关系选择器、序号选择器与属性选择器
利他者利己，利己者无功。利他利己，利己利他。
03-12 2万+
CSS3相比CSS2.1又新增和很多实用的选择器和伪类，`从IE7开始兼容`，兼容性也很好。下面就介绍一下CSS3新增的选择器。
〖大前端 - 基础入门三大核心之CSS篇②〗- CSS选择器之标签选择器、id选择器、class选择器与原子类
利他者利己，利己者无功。利他利己，利己利他。
03-11 2万+
我们知道css是用来给HTML标签定义样式的，那么我们怎么给指定的标签定义想要的样式呢？这就需要用到css选择器 “选中” 这个标签。
【CSS】CSS 复合选择器 ③ ( 并集选择器 | 并集选择器与后代选择器示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-05 2597
一、并集选择器 1、语法说明 2、代码示例 二、并集选择器与后代选择器示例 1、添加注释 2、HTML 结构 3、后代选择器 1 4、后代选择器 2 5、并集选择器 6、完整代码示例 7、显示效果
CSS - 选中最后一个元素（选择器）
王佳斌
09-25 3万+
CSS - 选中最后一个元素（选择器）怎么用css选择ul里最后一个li里面的a元素，css选择最后一个元素html标签选择器只认最后一个,选择某类的最后一个如何用css选择器选择某元素下的最后一个子元素?使用CSS选择器选择最后一个元素 |CSS3 :last-child 选择器 | 菜鸟教程CSS07选择第一个子元素和最后一个子元素nth-last-child
【CSS 知识总结】第四篇 - CSS 选择器-伪类和伪元素
BraveWangDev
03-20 2132
CSS 的三大特征；CSS 选择器的优先级；CSS 优先级的计算规则；CSS 选择器的权重；CSS 选择器面试题；本篇，介绍 CSS 选择器：伪类和伪元素；伪类用于定义元素的特殊状态；同一元素，根据不同状态，显示不同样式，样式随状态（用户行为）变化而变化；与普通 CSS 类相比较，伪类选择器只有处于 dom 树无法描述的状态下，才能为元素添加样式；所以被称作伪类；CSS 伪元素用于设置元素指定部分的样式；；
css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器）
weixin_44046450的博客
06-21 5531
css 伪类选择器（链接伪类选择器、结构伪类选择器、目标伪类选择器 链接伪类选择器：顾名思义就是用于链接的伪类选择器。a的伪类标签有:a:link、a:visited、a:hover、a:active，a:link表示的是未访问的链接，a:visited表示已访问的链接 ，a:hover表示鼠标移动到链接上，a:active表示的是选定的链接（当我们点击别松开鼠标，显示的状态） 现在来演示一下，代...
【CSS】CSS 复合选择器 ④ ( 链接伪类选择器 | a:link 默认样式 | a:visited 已访问样式 | a:hover 鼠标移动样式 | a:active 选定链接样式 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-06 2932
一、链接伪类选择器 1、语法说明 2、常用方式 3、代码示例
【Web】CTFSHOW 中期测评刷题记录(1)
uuzeray的博客
05-02 1689
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
50个前端实战项目之04：隐藏的搜索小组件
前端开发博客
05-03 1089
大家好，我是宝哥。今天讲50个前端实战项目之04：隐藏的搜索小组件。源码下载地址https://github.com/bradtraversy/50projects50days/tree/master/hidden-search前端实战项目系列正在更新：04/5001：可展开卡片02：进度条03：旋转导航动画04：隐藏的搜索小组件项目介绍本项目演示了一个简洁实用的隐藏式搜索小部件。点击搜索按钮后，...
前端Vue 后端FastApi 跨域 CORS
最新发布
weixin_44656422的博客
05-06 298
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
css3选择器-属性选择器
04-20
CSS3选择器-属性选择器是一种用于选择具有特定属性或属性值的HTML元素的CSS选择器。它可以根据元素的属性来选择元素，从而实现对元素的样式控制。 CSS3属性选择器有以下几种类型： 1. [attribute]：选择具有指定属性的元素。例如，`[class]`可以选择所有具有class属性的元素。 2. [attribute=value]：选择具有指定属性和属性值的元素。例如，`[class="example"]`可以选择class属性值为"example"的元素。 3. [attribute~=value]：选择具有指定属性且属性值中包含指定值的元素。例如，`[class~="example"]`可以选择class属性值中包含单词"example"的元素。 4. [attribute|=value]：选择具有指定属性且属性值以指定值开头的元素。例如，`[lang|="en"]`可以选择lang属性值以"en"开头的元素。 5. [attribute^=value]：选择具有指定属性且属性值以指定值开头的元素。例如，`[href^="https://"]`可以选择href属性值以"https://"开头的元素。 6. [attribute$=value]：选择具有指定属性且属性值以指定值结尾的元素。例如，`[src$=".png"]`可以选择src属性值以".png"结尾的元素。 7. [attribute*=value]：选择具有指定属性且属性值包含指定值的元素。例如，`[title*="example"]`可以选择title属性值中包含"example"的元素。 以上就是CSS3选择器-属性选择器的介绍。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值