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)


相关推荐

  • 海量图片存储解决方案

    海量图片存储解决方案当今世界,互联网、大数据应用迅猛发展,物联网、人工智能、云计算技术日新月异,随之而来的是各种企业和个人应用持续不断地产生亿级甚至是百亿级的海量小文件。这些小文件的元数据管理、存储性能以及访问效率等问题因而成为学术界和工业界公认的难题。例如,国内目前最大的电商网站淘宝存储的商品图片超过200亿张,这些文件的平均大小仅为15KB左右,国外著名的社交网站Facebook存储的图片总量更是超…

  • MBUS协议_sbus协议

    MBUS协议_sbus协议在前面关于MBus协议的描述中,个人觉得在描述TSS721部分存在不容易理解的地方,总觉得还可以说的更清楚点,在实际使用中我又发现TSS721的一款替代芯片,在这里作个详细的说明,可以加深对MBus协议实现的理解和TSS721部分的理解。2013年9月10日–推动高能效创新的安森美半导体(ONSemiconductor,美国纳斯达克上市代号:ONNN)推出一款新的集成…

    2022年10月15日
  • 很全的zencart 模板修改

    很全的zencart 模板修改zencart目录结构及模板修改1、zen-cart模板规则1.1/include/目录底下文件夹存放规则及其作用language常数定义;modules具体页修改这个文件夹底下是放模板的这面是默认模板目录,所有在自定义模板找不到自己所要安装的模板的文件都可以在这里找到1.2文件夹底下文件的规则及其作用板文件夹底下一般有如下的文…

  • 原生js请求http接口

    原生js请求http接口<script> //obj:{method:”get”,url:””,data:{}}; functionhttpRequest(obj,successfun,errFun){ varxmlHttp=null; //创建XMLHttpRequest对象,老版本的InternetExplorer(IE5和IE6)使用ActiveX对象:xmlht…

  • python把数字转换成字符串(字符串是什么)

    数字转为字符串这个相对比较简单我们可以使用Python中的str函数直接转换例如将123转换为’123’print(str(123))或者使用格式化print(‘%s’%123)字符串转为数字这个相对比较复杂一点因为Python没有提供类似于str函数的int函数如果转换的是0-9的一个数,那么只采用字典就可实现defchar2num(s):…

  • STN(Spatial Transformer Networks)

    STN(Spatial Transformer Networks)上一篇介绍了通道注意力机制SENET,有兴趣的同学可以去看一下SENET.

    2022年10月18日

发表回复

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

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