百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

css中选择器介绍

zhezhongyun 2025-05-21 17:56 16 浏览

选择器:

选择器是用来选择目标元

素的,选择器分基础选择器和复合选择器及伪类选择器。

基础选择器:

Bash
    标签名{} /* 1 标签选择器:把某类标签全部选中,如下: */
    p{font-size:36px;}
    
    .类名{} /* 2 类选择器(class选择器):选中相同类名的元素,.声明,class调用,如下: */
    .box{width:100px;height:50px;}
    <div class="box"></div>
    <div class="box stylebox"></div> /* 多类名选择器:在class属性中添加多个类名,中间用空格隔开,即可调用多类名来实现多个样式*/
    
    #id名{} /* 3 id选择器:选中id被命名为某名的元素,#定义,id调用,id选择器具有唯一性,相同的id名只能出现在一个标签上 */
    #box{width:100px;height:200px;}
    <div id="box"></div>
    
    *{}/* 4 通配符选择器:选中文档中所有元素,不建议使用,一般使用的情况是非常少的。 */
    *{color:blue;font-size:20px;}

复合选择器:


Bash

     div span{/* 1 后代选择器:又称包含选择器,用于选择标签的后代子孙元素及元素组,语法:外层标签写在前面,内层标签写在后面,中间用空格隔开,需要强调的是只要是后代无论多少代都可以选中,它和子代选择器的区别就在这里:不仅仅可以选择紧挨着的下一级元素。 */
      color:blue;
    }
    <div>
      <ul>
        <li>
          <span>苹果</span><!-- 被选中项-->
        </li>
      </ul>
    </div>
    <span>白菜</span>
    
    ul li>a{/* 2子代选择器:选中某标签下紧挨着的某个元素,语法:父级标签 > 子级标签,强调的是:子代选择器选中的是父级紧挨着的子级元素,和后代选择器的区别就在这里。 */
      color:pink;
    }
    <ul>
      <li>
        <a href="#">test1</a><!-- 被选中项-->
      </li>
      <li>
        <div>
          <a href="#">test2</a>
        </div>
      </li>
    </ul>
    
    p.watermelon{/* 3 交集选择器:即又的关系,同时满足条件的会被选中,语法:选择器1选择器2选择器n...,多个选择器连写,中间不用任何字符。 */
      color:red;
    }
    <p>apple</p>
    <p>orange</p>
    <p class="watermelon">watermelon</p><!-- 被选中项-->
    <span>苹果</span>
    <span>橙子</span>
    <span class="watermelon">西瓜</span>
    
    p,
    span,
    .pear{/* 4 并集选择器:同时选择多个单独或一组标签,语法:多个选择器中间用逗号连接,可以快速选择需要给相同样式的所有标签 */
      color:red;
      font-size:40px;
    }
    <p>苹果</p>
    <p>荔枝</p>
    <del>大米</del>
    <span>香蕉</span>
    <ins>地瓜</ins>
    <div class="pear"></div>
    
    .banana+li {/* 5 相邻元素选择器:选择紧挨着某元素下的一个兄弟元素,语法:选择器1 + 标签,注意兄弟元素选择器*/
      color: red;
    }
    <ul>
      <li>苹果</li>
      <li class="banana">香蕉</li>
      <li>荔枝</li>
    </ul>
    
    .banana~li {/* 6 兄弟元素选择器:选择挨着某元素下的所有兄弟元素,语法:选择器1 ~ 标签,注意相邻元素选择器*/
      color: red;
    }
    <ul>
      <li>苹果</li>
      <li class="banana">香蕉</li>
      <li>荔枝</li>
        <li>菠萝蜜</li>
        <li>桃子</li>
    </ul>

伪类选择器:

伪类选择器是以冒号:开始的,如下面链接伪类选择器(需要和伪元素区分):


    a:link{color:black;}/* 设置未访问的链接样式 */
    a:visited{color:gray;}/* 设置已访问的链接样式 */
    a:hover{color:yellow;}/* 设置鼠标经过链接的样式 */
    a:active{color:red;}/* 设置鼠标点击时链接的样式 */
    /* 需要注意:这四个链接的伪类选择器是按照上面的顺序书写的,必须严格遵循。 */

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。

笔者:苦海123

其它问题可通过以下方式联系本人咨询:

QQ:810665436

微信:ConstancyMan

相关推荐

Win10全新版本速览 全新图标设计焕然一新

来源:太平洋电脑网[PConline资讯]原定于今年下半年发布的Win1021H2(SunValley),再有几个月就要与我们见面了。之前我们已经陆续介绍过新版在开始菜单、窗口动效、通知中心等方...

第四周B组最佳选手Icon:陨落天团的小将,还是重生星球的偶像?

B组本来被认为是死亡之组,但在上周的异组对抗赛中,实力较强的几只队伍却先后被A组击沉,反而是之前一分难求的OMG2:1战胜了IG,其中Icon功不可没,两次秀翻全场的妖姬和与Juejue中野联动的实力...

系统小技巧:不花一分钱 让声音再大些

有时,笔记本扬声器的音量可能无法满足我们对声音播放的需求。点击系统托盘的小喇叭图标,音量调节滑动条调整到最大也无效,而添置大功率扬声器又不是我们所愿。这时,可通过调整系统本身的设置或利用第三方软件来解...

DNF手游:70级毕业搭配曝光!需集齐四类装备,别指望无形升级了

随着dnf手游7.16版本的临近,各种70级装备的消息满天飞,真真假假难以辨别,但只要以“发布会爆料”为核心,主播十四的爆料为辅,就能确定70版本的毕业标准搭配,查理策划是打算“集百家之长”于一身,完...

学会这5个电脑设置 可解决99%的故障

现阶段复工大家都是宅家办公吧,所以电脑可谓是大救星,因为无论是“停课不停学”的网课,还是在家办公的穷社畜,都离不开电脑。所以今天小编就来教大家几招电脑的自救方法,让你可以在电脑出问题时从容面对,足不出...

LOL:上单腕豪的取胜之道——掌控自身优势,融合装备特效

01前言腕豪这个英雄,在11.9版本之前都没有太多的出场机会,即使出现也大多是在辅助位置上,充当开团、先手控制的角色。但是在11.9版本以后,这个英雄突然之间仿佛飞升了一般,直接冲上T1级别上单,之前...

英雄联盟手游:一篇文章读懂所有龙buff属性效果,还不赶紧收藏

英雄联盟手游采用也是经典峡谷地图,看起来和端游并没有太大差异,但实际上为了适应手游节奏,官方也是进行了适当调整,所以包括红蓝buff,大龙小龙buff效果会有一定的差异,现在就来看看小龙和大龙具体属性...

双击打不开怎么办?双击文件夹显示属性的解决办法

今天小编在双击文件夹的时候,就是打不开,还弹出“属性”对话框,不知道大家有没有出现过,为避免出现这种情况时大家束手无策,今天小编就来为大家分享一下解决方法。1.检查键盘,看看“Alt”键是否卡住。由于...

柜子布局好超省空间,1㎡当10㎡用,收纳涨5倍!户型图直接抄

柜子不嫌多,就怕你家放不下!▼每个空间几乎都需要柜子客厅要有电视柜,卧室要能放下全家四季的衣柜,厨房还需要大容量的橱柜空间就这么小,想要榨出放柜子的地方,还要活得不拥挤简直太难了!其实全是你找错地方打...

制作幻灯片的另类方法(然后制作幻灯片)

如果提到制作幻灯片,很多人都会想到PowerPoint。PowerPoint提供了很多模板,但这些模板实用性并不太高;PowerPoint的交互还算比较方便,但不可否认,交互显得有些呆板,而且要想修改...

《心灵杀手重制版》画面晃动怎么办?画面晃动解决办法

针对《心灵杀手重制版》画面晃动的问题,以下是一些解决办法:修改游戏启动路径:打开游戏所在的文件夹,找到游戏图标的属性并打开。在属性中修改启动路径,加入“-noblur”参数。例如,如果游戏安装在“X:...

win10网络图标是小地球怎么办(excel表格怎样选定区域打印)

win10系统右下角的网络图标突然变成地球图标,而且无法上网,提示无法连接到Internet。出现这个问题多数是因为win10正式版更新了或者是网络中断后遗症。那么win10网络图标变成地球怎么办呢?...

重看电脑任务栏的使用方法:windows 10小贴士

【环球科技综合报道】据日本Livedoor新闻网2月18日报道,windows电脑的屏幕下方配置的任务栏由于总是在电脑桌面上显示,可以说是一个映入眼帘的机会格外多的区域。像是把经常使用的软件图标设置在...

《地狱之门》攻略:四大元素属性介绍

《地狱之门》是近期比较看好的一款卡牌手游,绚丽的3D游戏画面以及创新的即时战斗系统给人耳目一新的感觉,非常值得一试。玩家不仅可以体验到卡牌收集的乐趣,更主要的是能体验到酣畅淋漓的战斗体验。下面小编就来...

一脸懵?DNF希洛克词条赋予属性触发条件解析

DNF希洛克已经开放两天,但是还是看到不少小伙伴对于希洛克词条赋予系统充满疑惑。今天就来简单易懂的给大家科普一下希洛克词条赋予系统里的弯弯绕绕。◎希洛克装备融合在希洛克获取了专属史诗之后,即可通过歌兰...