类选择器在层级列表中的使用

最新推荐文章于 2024-07-06 20:00:00 发布
最新推荐文章于 2024-07-06 20:00:00 发布
阅读量575 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lulu17862078553/article/details/83988001
版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css优先级</title>
<style>
em{color: black;}
h1{color: red;}
.lanse{color: blue;}
#lvse{color:green;}

</style>
<link href="script/style.css" type="text/css" rel="stylesheet">
</head>

<body>
<h1 id="lvse">欢迎访问<em>我</em>的网站！！！</h1>
<h1 class="lanse">欢迎访问<em>我</em>的网站！！！</h1>
</body>
</html>

样式表的优先级

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>层级列表</title>
<style>
.a1:link{color: #000000;text-decoration: none;}//当前位置
.a1:visited{color:#000000;text-decoration: none;}//鼠标访问过的状态
.a1:hover{color: #FF0000;text-decoration:underline;}//鼠标经过的位置
.a1:active{color:orange;text-decoration:underline;}//鼠标选中的位置

.a2:link{color:#00FFC3;text-decoration: none;}
.a2:visited{color:#000000;text-decoration: none;}
.a2:hover{color: #FF0000;text-decoration:underline;}
.a2:active{color:orange;text-decoration:underline;}

.a3:link{color:#1000E7;text-decoration: none;}
.a3:visited{color:#000000;text-decoration: none;}
.a3:hover{color: #FF0000;text-decoration:underline;}
.a3:active{color:orange;text-decoration:underline;}
</style>
</head>
<dl>
    <dt>蔬菜</dt>
        <dd><a href="1" class="a1">茄子</a></dd>
        <dd><a href="2" class="a2">西红柿</a></dd>
        <dd><a href="3" class="a3">土豆</a></dd>
        <dd><a href="4" class="a1">黄瓜</a></dd>
        <dd><a href="5" class="a2">豆角</a></dd>
    <dt>水果</dt>
        <dd><a href="">荔枝</a></dd>
        <dd><a href="">苹果</a></dd>
        <dd><a href="">香蕉</a></dd>
        <dd><a href="">桃子</a></dd>
        <dd><a href="">西瓜</a></dd>
</dl>

<body>
</body>
</html>

皮小葵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery选择器之层级选择器
weixin_42305895的博客
03-28 391
前言：层级选择器主要分为四种，分别是祖先后代选择器、父子选择器、前后选择器、前兄弟选择器，下面，我将会分别从他们的表示、用途、例子来分别说明这四种选择器。 写在前面，我下面举例子时js代码和css代码都是另起一个页面的，所以大家要运行代码的时候注意一下。 1. 祖先 后代选择器 （1） 说明 表示：$(“ancestor descendant”) 用途：选取ancestor元素后所有的descen...
jQuery层级选择器用法分析
10-24
在文档对象模型（DOM）中，元素之间存在着层级关系，层级选择器正是用于这些关系的定位。我们通常使用jQuery选择器来快速应用样式或操作这些元素。本文将详细介绍jQuery中常见的四种层级选择器：子元素选择器、后代...
类选择器的使用
weixin_43167662的博客
12-20 322
选择器
CSS：选择器 / 14种类型
最新发布
snowball的博客
07-06 1691
CSS中的UI元素伪类选择器主要用于定义用户界面元素的特殊状态样式，如链接的悬停（hover）、激活（active）状态，以及输入框的焦点（focus）状态等。：尽量使用更具体的选择器来定位你想要样式化的元素，这样可以减少不必要的性能开销，并提高样式表的可维护性。然而，需要注意的是，当通用选择器与其他选择器结合使用时，它仍然会匹配所有元素，但样式只会应用到那些也符合其他选择器条件的元素上。符号，它选择某个元素之后的所有兄弟元素（共享相同父元素），而不仅仅是紧接在后面的元素。在CSS中，ID选择器以井号。
CSS 类选择器（六）
mzoy的专栏
07-29 688
 在 CSS 中，类选择器以一个点号显示：.center {text-align: center}在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。class="center">This heading will be center-a
css类选择器使用
xiaohuiQAQ的博客
09-27 525
css类选择器 !doctype html> 类选择器 /*根据继承，给父元素设置样式，子元素也会继承*/ /*针对某一类标签，可以使用标签选择器*/ p{font-size:15px;color:blue;} /*针对某一个元素，ID选择器*/ #two{font-size:20px;color:green;font-weight:bo
js进阶 10-5 jquery中的层级选择器有哪些
weixin_33701294的博客
06-13 105
js进阶 10-5 jquery中的层级选择器有哪些 一、总结 一句话总结： 1、jquery中的层级选择器有哪些？ 四种，后代，子代，兄弟，相邻兄弟 2、如何区别jquery中的层级选择器？ 记住这四个符号：空格 大于号 波浪线 加号     二、js进阶 10-5 jquery中的层级选择器有哪些 1、相关知识点 层级选择器 层次选择器,就是能过元素之间的层次关系来获取...
jQuery层级选择器实例代码
10-20
在示例代码中，通过使用jQuery层级选择器，我们可以直观地看到不同层级的元素是如何被选取和修改样式的。这对于学习和实践jQuery选择器具有较高的参考价值。 需要注意的是，由于示例代码中存在一些OCR技术造成的...
jquery选择器之层级过滤选择器详解
12-11
代码如下:$(“ancestor descendant”)：选取parent元素后所有的child元素$(...注:siblings是过滤器后两个用的比较少，一般会有其他选择器替代 代码如下:$(“prev + next”)等价于next()$(“prev ~ siblings”)等价
juqery 学习之三 选择器 层级 基本
09-05
本文主要探讨jQuery中的选择器，特别是层级选择器的基础知识，这对于理解和运用jQuery至关重要。 首先，我们来看ID选择器。ID选择器通过元素的唯一标识符ID来选取元素。在HTML中，每个元素的ID应该是唯一的。使用`#...
02-CSS基础选择器
weixin_43927457的博客
07-04 1400
typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器（重点） 学习目标： 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用基础选择器给页面元素添加样式 1. CSS选择器作用（重点） [外链图片转存失败(img-myUVLeVh-1562221182585)(https://mp.csdn.net/...
本文介绍jq的层级选择器
jx1234562的博客
09-07 609
jq的层级选择器，jq的层级选择器分别为空格，大于号，加号，~,这四种，有比较简单的属于来说，空格表示儿子数字等级别的，大于号表示儿子，加号表示同桌紧挨着的那个，~表示兄弟 具体的代码展现: ...
类选择器详解
W Y L
12-20 7268
类选择器前面使用符号. (1)基本使用 为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值。例如： <h1 class="important">This heading is very important.</h1> <p class="important">This paragraph is very important.</p &g...
css3基础100问之类选择器用法-多类名是怎样使用的呢？（17）
weixin_45147894的博客
06-01 424
类选择器特殊用法- 多类名（只能用于类class选择器而id选择器不行） 我们可以给标签指定多个类名，从而达到更多的选择目的。 <img src="media\lei.png" /> 注意： - 各个类名中间用空格隔开。 - 多类名选择器在后期布局比较复杂的情况下，还是较多使用的。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</t.
层级选择器
Birdlun的博客
08-28 910
层级选择器 列：层级选择器练习 运行效果图 html代码 <body> 在给定的祖先元素下匹配所有的后代元素(儿子、孙子，曾孙子等) <input type="button" id="btn1" value="选择body中的所有的div元素" /><br /> 在给定的父元素下匹配所有的子元素（儿子） <input type="...
CSS层次选择器[四种]
abc98526的博客
02-07 4083
1.后代选择器 后代选择器是包含了后面的所以标签如: 2.子选择器 3.相邻选择器 4.相邻选择器进阶版
属性选择器、伪类选择器、层级选择器
weixin_43720739的博客
03-19 185
渐进增强：（作用范围：从小到大） 先保证最基本的功能 > 用户体验提升 优雅降级：（作用范围：从大到小） 先针对版本较高的设备进行项目构建，保证用户体验的完美 牺牲一些效果，保证最基本的功能 选择器（选择符）： id class 类型（div span） 后代选择器 伪类选择器 伪元素选择… 属性选择器： e[attr]{} 选中e元素，且e元素有attr属性， e[a...
四个层次选择器
qq_45326705的博客
10-26 103
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后代选择器</title> <style> body p{ /*body里的所有后代p都被选择*/ background-color: aquamarine; } </.
层级选择器（基础）+基本选择器
你好牛蛙！
10-17 3760
ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素 语法：$("ancestor descendant") ancestor是祖辈或者父辈的标签或者属性，descendant是后代的标签或者属性
减少css选择器层级
07-29
3. 使用相邻兄弟选择器：使用相邻兄弟选择器（"+"）可以选择紧邻在另一个元素后面的元素，也可以减少选择器的层级。 4. 使用通用选择器：通用选择器（"*"）可以匹配任意元素，但要注意使用时的性能影响。可以将通用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值