CSS3高级选择器用法

CSS3高级选择器用法CSS3高级选择器用法介绍

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

CSS3的高级选择器在开发中还是蛮有用的,下面我们来看一下都有哪些高级选择器。

1、相邻兄弟选择器

作用:匹配指定元素的相邻【下一个】兄弟元素

语法:由 + 号来充当连接符,如 选择器1+选择器2

示例:html代码如下

<div id="d1">
   <div id="d2">我是d2</div>
   <p id="p1">我是p1</p>
   <ul id="u1">
      <li>HTML</li>
      <li>css</li>
      <li>Javascript</li>
   </ul>
   <ul id="u2">
      <li>HTML</li>
      <li>css</li>
      <li>Javascript</li>
   </ul>
</div>

我们用相邻兄弟原则器选择id为p1的元素下面id为u1的元素,给它背景设置为红色

#p1+#u1{
 
 background:#f00;}

效果如下:

CSS3高级选择器用法

2、通用兄弟选择器

作用:匹配到某元素【后面的】 【所有指定】兄弟元素

语法:由~充当结合符,如 选择器1~选择器2

示例:

我们用通用兄弟选择器选择id为p1的元素后面所有的ul元素,将其背景设置为红色

#p1~ul{
 
 background:#f00;}

效果如下:

CSS3高级选择器用法

3、属性选择器

3.1、[attribute]:匹配具有attribute属性的元素

如:div[id]:匹配所有具备id属性的div

3.2、element[attr1][attr2] 匹配所有具备attr1属性以及attr2属性的element元素

如:div[id][class] 匹配同时具备id和class属性的div

3.3、element[attr=value] 匹配attr属性值为value的element元素

如:input[type=text] 或 input[type=’text’],匹配type为text的input元素

3.4、element[attr~=value] 匹配attr属性值为一个值列表,并在此列表中包含单词value的element元素

如:

<div class=”content warning important lf”></div>

div[class~=content]:   能匹配
div[class~=lf]:
              能匹配
div[class~=on]:
           不能匹配

3.5、element[attr^=value] 匹配attr属性值,以value开始的element元素

如:div[class^=my]: 匹配class属性值以my开始的div元素

3.6、element[attr$=value] 匹配attr属性值,以value作为结束的element元素

如:div[class$=over]: 匹配class属性值以over作为结束的div元素

3.7、element[attr*=value] 匹配attr属性值中【包含】value的element元素

如:div[class*=on] 匹配class属性值中包含on的div元素

4、伪类选择器

4.1、目标伪类:突出显示活动的锚点元素

语法::target

如:

a:target{}

div:target{}

4.2、元素状态伪类:多数用在表单控件上,去匹配表单控件的不同状态

4.2.1、:enabled       匹配每个已启用元素(所有表单控件)

4.2.2、:disabled      匹配每个被禁用元素(所有表单控件)

4.2.3、:checked      匹配每个已被选中的input元素(适用radio和checkbox)

4.3、结构伪类:从标记的层次结构来匹配元素

4.3.1、:first-child     匹配属于父元素中的首个子元素

4.3.2、:last-child     匹配属于其父元素中的最后一个子元素

4.3.3、:empty          匹配没有子元素(包含文本内容)的元素

4.3.4、:only-child   匹配属于其父元素中的唯一子元素

4.3.5、:nth-child(n)匹配属于其父元素中的第n个子元素

4.4、否定伪类:将匹配的元素排除在外

语法::not(selector);

5、伪元素选择器

5.1、::first-letter    获取匹配元素的第一个字母(字符)

5.2、::first-line      获取匹配元素的首行

5.3、::selection    匹配用户选取的部分

注意:W3C规定所有的伪类选择器全部使用一个冒号,在CSS3中,所有的伪元素选择器,全部使用两个冒号。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/157744.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • ehcache缓存原理_mysql缓存机制

    ehcache缓存原理_mysql缓存机制运用你所掌握的数据结构,设计和实现一个 LRU (最近最少使用) 缓存机制 。实现 LRUCache 类:LRUCache(int capacity) 以正整数作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中,则返回关键字的值,否则返回 -1 。void put(int key, int value) 如果关键字已经存在,则变更其数据值;如果关键字不存在,则插入该组「关键字-值」。当缓存容量达到上限时,它应该在写入新数据之前删除最久

  • MBUS系列产品特点(科慧铭远)[通俗易懂]

    MBUS系列产品特点(科慧铭远)[通俗易懂]     北京科慧铭远自控技术有限公司联合国际标准化组织、计量中心、热力集团、清华大学检测与电子技术研究所,成立国内首家M-BUS通信设备检测中心,对于M-BUS主站、从站的通信设备全方位的检测其是否符合国际和国内标准,并予以认证。北京科慧铭远自控技术有限公司有着在M-BUS领域最全面的的研发和生产能力,获得国际标准化组织的认可,产品在欧洲、亚洲、中国获得全面应用。其生产的MBUS设备的主要…

    2022年10月10日
  • 计算机基本配置清单表3500,3500元电脑配置清单

    计算机基本配置清单表3500,3500元电脑配置清单3500元电脑配置清单很多游戏发烧友在攒机时搭配了高效能的硬件,可以获得更加畅爽的游戏体验,不过对于普通的用户来说,高性价比的主机就可以满足日常影音及娱乐使用需求,更加亲民的价格也是吸引更多用户的基础,下面我们就为您推荐3500元价位的主机配置,追求性价比的朋友不妨看看。我们首先选择英特尔的i3-4170处理器,这款CPU基于Haswell架构设计,22nm制程,双核心四线程,主频为3.7GHz,…

  • Java 泛型擦除_泛型和泛型擦除

    Java 泛型擦除_泛型和泛型擦除Java泛型擦除机制

    2022年10月21日
  • 前端js面试题(基础)「建议收藏」

    前端js面试题(基础)「建议收藏」1、js中使用typeof能得到哪些类型?——undefined、string、number、boolean、object、function2、===和==分别在何时使用?//==的使用情况为以下2种(其他情况下推荐使用===)if(obj.a==null){ //相当于obj.a===null||obj.a===undefined}functionfn(a,b){ i…

  • 数据仓库和数据集市详解:ODS、DW、DWD、DWM、DWS、ADS「建议收藏」

    数据仓库和数据集市详解:ODS、DW、DWD、DWM、DWS、ADS「建议收藏」@TOC数据流向应用示例何为数仓DWDatawarehouse(可简写为DW或者DWH)数据仓库,是在数据库已经大量存在的情况下,它是一整套包括了etl、调度、建模在内的完整的理论体系。数据仓库的方案建设的目的,是为前端查询和分析作为基础,主要应用于OLAP(on-lineAnalyticalProcessing),支持复杂的分析操作,侧重决策支持,并且提供直观易懂的查询结果。目前行业比较流行的有:AWSRedshift,Greenplum,Hive等。数据仓库并不是数据的最终目的地

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号