css3选择器用法_css3选择器_html选择器用法 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

CSS3高级选择器用法

CSS3的高级选择器在开发中还是蛮有用的，下面我们来看一下都有哪些高级选择器。...1、相邻兄弟选择器 作用：匹配指定元素的相邻【下一个】兄弟元素语法：由 + 号来充当连接符，如 选择器1+选择器2 示例：html代码如下 .../ul> 我们用相邻兄弟原则器选择id为p1的元素下面id为u1的元素，给它背景设置为红色 #p1+#u1{ background:#f00;} 效果如下： 2、通用兄弟选择器...作用：匹配到某元素【后面的】【所有指定】兄弟元素语法：由~充当结合符，如 选择器1~选择器2 示例：我们用通用兄弟选择器选择id为p1的元素后面所有的ul元素，将其背景设置为红色 #p1~ul{...，在CSS3中，所有的伪元素选择器，全部使用两个冒号。

5365 0

CSS3选择器介绍及用法总结

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本我们先来看看各个版本的选择器有哪些注： ele代表...element元素 attr代表attribute属性，val代表value属性值 :xxx都属于伪类选择器，::xxx都属于伪元素选择器 有名字的选择器我尽量细分了 #CCS1选择器# 选择器...#CSS3选择器# 敲这么多终于到关键地方了 CSS3增加了很多强大的选择器，以伪劣选择器为主 CSS1和CSS2版本的选择器加起来都没它多我们一起来看一下 选择器 类别示例说明 ele...## ::selection是CSS3新增的选择器 它用来匹配突出显示的文本（用鼠标选择文本）浏览器有默认的样式（背景为蓝色，字体为） this is a long long text.....，仅仅用CSS3的选择器做一个点击按钮切换图片的小图表通过点击单选框显示不同的图片像这样首先我们需要编写html代码使用三个radio和三个img元素 <input type="radio

1.4K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

【CSS3】CSS3 属性选择器 ( CSS3 简介 | 属性选择器 | 属性选择器权重 )

一、CSS3 简介 ---- CSS3 是在 CSS2 基础上进行扩展后的样式 ; 在移动端对 CSS3 的支持要比 PC 端支持的更好 , 建议在移动端开发时 , 多使用 CSS3 ; PC 端老版本浏览器不支持...CSS3 , 尤其是 IE 9 及以下的版本 , 基本无法使用 CSS3 ; CSS3 提供了三种选择器 : 属性选择器 结构伪类选择器 伪元素选择器 二、CSS3 属性选择器权重 ---- CSS3...提供了三种选择器 : 属性选择器 结构伪类选择器 伪元素选择器 属性选择器 , 伪类选择器 的权重 , 与类选择器 权重相同 , 都是 10 ; 参考【CSS】CSS 特性 ③ ( CSS 优先级..., * 通配符选择器 0,0,0,0 标签选择器 0,0,0,1 类选择器 / 伪类选择器 / 属性选择器 0,0,1,0 ID 选择器 0,1,0,0 标签的行内样式 style 属性 1,0,0,0...important 权重无穷大三、CSS3 属性选择器 ---- CSS3 属性选择器 可以使用特定的 CSS 属性和属性值来选择特定的 HTML 标签元素 ; CSS3 属性选择器

6532 0

CSS3中:last-child及其选择器的用法

其实很多时候我们都能用到css的选择器功能，比如调用N篇文章，想设置奇数行显示一种颜色，偶数行显示一种颜色，然后代码一般都是“foreach”循环语句，不建议直接写在代码里，那么css就能轻而易举的解决这个问题...} :nth-last-child(3)选取倒数第几个标签,3表示选取第3个 .talklee li:nth-last-child(3){background:#ddd} :nth-child的这些用法在实际中很用得着

7051 0

css3 选择器

以前学习css的时候总是看见一个效果就看一下，没有系统的学习，最近看见了这个css3的网站，打算系统学习下，今天要跟大家分享的是css3的选择器。我们先来看一张选择器列表图： ?...一、基本选择器 基本选择器参考传送门：http://www.w3cplus.com/css3/basic-selectors 1、通配符选择器(*) 通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素.../css3/attribute-selectors IE6不支持属性选择器 CSS3的属性选择器主要包括以下几种： 1、E[attr]：只使用属性名，但没有确定任何属性值； .demo a[id] {background...3、CSS3的：nth选择器这节内容才是关键，也是CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法： 1):fist-child...IE6-8浏览器不支持:empty选择器 4、否定选择器(:not) 否定选择器和jq中的:not选择器一模一样，就拿form中的元素来说明这个选择器的用法，比如你想对form中所有input加边框，但又不想

5051 0

css3选择器

CSS3新增选择器 属性选择器 E[attr]只使用属性名，但没有确定任何属性值 E[type="text"]指定属性名，并指定了该属性的属性值 E[attr~="value"]指定属性名，并且具有属性值...开头的 E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的 E[attr="value"]指定了属性名，并且有属性值，而且属值中包含了value 结构性伪类选择器...注意：子节点不包含文本节点伪类选择器 E:target 表示当前的URL片段的元素类型，这个元素必须是E E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件...E:checked 表示已选中的checkbox或radio 伪元素选择器 E::first-line 表示E元素中的第一行 E::first-letter 表示E元素中的第一个字符 E::selection

4252 0

CSS3 选择器

CSS3选择器分为：结构型伪类选择器、UI元素状态伪类选择器，否定选择器，和伪元素一、结构型伪类选择器 :first-child选择某个元素的第一个子元素； :last-child选择某个元素的最后一个子元素...二、UI元素状态伪类选择器 1、动态伪类（也称为“锚点伪类”） .demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/ .demo a:visited{color:yellow...2、UI元素状态伪类，比如有“:enabled”,”:disabled”,”:checked” 三、否定选择器，比如”:not” input:not([type="submit"]) { border...: 1px solid red; } 四、伪元素 CSS中的伪元素有”:first-line”,”first-letter”,”:before”,”:after”，CSS3是在以前的基础上增加了一个”:...”，也就是变成了”::first-line”,”::first-letter”,”::before”,”::after”，另外还新增了一个”::selection”，两个”::”和一个”:”只是CSS3

2013 0

CSS3选择器02—CSS3部分选择器

该部分主要为CSS3新增的选择器 接上一篇 CSS（CSS3）选择器（1）一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。...div ~ p{ background-color:#00FF00; } 二.属性选择器: 25：E[att ^= val]，匹配属性att的值以...]{ background-color:red; ] /*匹配以id属性的值包含hass的，如id="1hass",id="hass2",id="3hass444"的元素*/ 三.结构性伪类选择器...input::placeholder{ color:red; } 至此，CSS（CSS3）选择器的简单说明笔记就到这里结束了，其实这些内容包含了CSS（CSS3）世界的绝大多数常用选择器，当然，...参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。

5152 0

CSS3关系选择器、属性选择器

属性选择器 属性选择器可以根据元素的属性和属性值来选择元素，CSS3中新增的3种属性选择器： E[att^=value]属性选择器是指选择名称为E的标记中的att属性，att属性值包含前缀为value...⚠️以上三种属性选择器E都是可以省略的，若省略则表示可以匹配满足条件的任意元素。关系选择器 1.子代选择器(>) 子代选择器主要用来选择某个元素的第一级子元素。...2.兄弟选择器(+、~) 兄弟选择器用来选择与某元素位于同一父元素之中，且位于该元素之后的兄弟元素。...临近兄弟选择器(+):该选择器使用‘+’来链接前后两个选择器，选择器中的两个元素有同一父亲，而且第二个元素必须紧跟第一个元素。...(老大跟老二，老二跟老三) 普通兄弟选择器(～):该选择器使用‘～’来链接前后两个选择器，选择器中的两个元素有同一父亲，但第二个不必紧跟第一个元素。

9412 0

CSS3选择器详解

一、CSS3选择器分类 1.基本选择器 2.层次选择器 3.伪类选择器 1）动态伪类选择器 2）目标伪类选择器 3）语言伪类选择器 4）UI元素状态伪类选择器 5）结构伪类选择器 6）...每个选择器之间用逗号隔开，表示规则中包含多个不同的选择器，省去逗号的话就变成了后代选择器。...如表单中文本输入框，html元素选中和未选中状态，这几种状态是CSS3种常用状态伪类选择器；详细语法如下：对于IE6~8使用UI元素伪类选择器需要使用特别的方法处理。... 五、属性选择器 CSS3新增了3个属性选择器，可以对标签进行过滤，更容易定位HTML标签。下面是CSS3的属性列表。...CSS3遵循了惯用的编码规则，通配符的使用提高样式表的书写效率常见通配符如下：属性选择器方法详解创建简单的HTML结构，设置默认样式： <!

1.8K1 0

CSS3常用选择器

一、基本选择器 子元素选择器 概念：子元素选择器只能选择某元素的子元素语法格式：父元素 > 子元素（Father > Children）兼容性：IE8+、FireFox、Chrome、Safari...、Opera 相邻兄弟元素选择器 概念：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素语法格式：元素 + 兄弟相邻元素（Eelement + Sibling）...（Eelement ~ Siblings）兼容性：IE8+、FireFox、Chrome、Safari、Opera 群组选择器 概念：群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号...、Chrome、Safari、Opera 2、CSS3结构类 Element:first-child 概念：选择属于其父元素的首个子元素的每个 Element 元素兼容性：IE8+、FireFox...（:not）概念：匹配非指定元素/选择器的每个元素语法格式：父元素:not(子元素/子选择器) （Father:not(Children/selector)）兼容性：IE9+、FireFox

7092 0

CSS3选择器大全

，而CSS3在CSS2的基础上对属性选择器进行了扩展，新增了3个属性选择器，使得属性选择器有了通配符的概念，这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。...3.CSS3 结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。...7.CSS3 结构性伪类选择器—last-child :last-child选择器与:first-child选择器作用类似，不同的是:last-child选择器选择的是元素的最后一个子元素。...在CSS3中，我们可以通过状态选择器:checked配合其他标签实现自定义样式。而:checked表示的是选中状态。...13.CSS3选择器 :read-only和read-write选择器 :read-only伪类选择器用来指定处于只读状态元素的样式。

5011 0

CSS3选择器（全部）

CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，让编写代码更加轻松。...CSS3在CSS2的基础上新增了3个属性选择器，分别是E[attr^=”value”]、E[attr$=”value”]、E=[attr*=”value”]。...单纯式用法：div:hover{background-color:red;} 混合式用法：div.selected:hover{background-color:green;} （1）动态伪类选择器 锚点伪类选择器...结构伪类选择器是CSS3新设计的选择器，TA利用HTML的树状结构实现元素选择，可以减少class属性和id属性的定义。...:not()表示否定伪类选择器，TA可以排除掉特定元素，TA和jQuery中的:not选择器用法一模一样。 <!

6751 0

css3选择器篇

标签选择器： <!...类选择器： <!...id选择器和class选择器： <!...2.选择器可以使用标签名称/id名称/class名称给所有选择器选中的标签设置属性兄弟选择器: <!...(h1~p)是给指定选择器的后面的所有选择器设置属性。序选择器: <!

4564 0

css3选择器总结

优先级：离标签越近的选择器优先级越高，所以相同权重的样式后者才生效；内联样式表>头部样式表>导入样式表。...权重权重为0000：通用选择器* {} 组选择器h1, h2, p, em, img {} 后代选择器h1 em{} 子代选择器table>tbody>tr{} 分类选择器div.top,header.main...{} +相邻兄弟选择器: div.s+p{} 只能选择后面的 ~通用兄弟选择器： div.s~p{} 只能选择后面的权重为0001：标签选择器h3 em {} :first-letter每段首字符(...css2不兼容，css3兼容) :first-line每行首字符当:first-letter和:first-line矛盾时优先:first-letter :before :after :content...::selection用户在页面中选中部分(只能改颜色和背景颜色) 权重0010：类(class)选择器 .special {} 伪类选择器： :link :visited :hover

2431 0

css3新增选择器

一、css3之前的选择器 ID选择器类选择器 包含选择器(E F) 伪类选择器（:link,visited,hover,active,focus,first-child）伪元素选择器（::first-line...,first-letter,before,after）通配选择器(.)...属性选择器(foo[name='martin']) 子包含选择器(E>F) 相邻兄弟选择器(E+F) 二、css3新增选择器 新增属性选择器： E[foo^='bar'] 匹配E元素，该元素包含foo属性...开头 E[foo$='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar结尾 E[foo*='bar'] 匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串新增结构伪类选择器

5393 0

CSS(CSS3)选择器（1）

这篇文章主要用于存储CSS以及CSS3的选择器部分知识，以便日后查阅及记忆. 该内容分为两部分，第一部分为css选择器的一些基本知识。第二部分为CSS3新增加的选择器。...在开始之前，先简单介绍一下选择器，选择器的作用就是定位我们想要样式化的网页HTML元素。选择器可以分为以下几种类型。 1、简单选择器，通过元素类型，class或id匹配一个或多个元素。...（例如每个段落的第一个字，或者某个元素之前生成的内容） 5、组合器，这里不仅仅是选择器本身，还有以有效的方式组合两个或者更多的选择器用于非常特定的选择的方法。 6、多用选择器，这些也不是单独的选择器。...，并不具体涉及属性及其用法*/ 最后想说，这些东西只是简单的罗列和解释，算是方便在使用的时候快速查找，如果想要更深入的了解还需要的更多的练习和代码量，就算是最基本的选择器知识，其实也要比这些多得多。...参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。

64910 0

CSS(CSS3)选择器（2）

该部分主要为CSS3新增的选择器 接上一篇 CSS（CSS3）选择器（1）一.通用兄弟选择器: 24：E ~ F，匹配任何E元素之后的同级F元素。...div ~ p{ background-color:#00FF00; } 二.属性选择器: 25：E[att ^= val]，匹配属性att的值以...]{ background-color:red; ] /*匹配以id属性的值包含hass的，如id="1hass",id="hass2",id="3hass444"的元素*/ 三.结构性伪类选择器...input::placeholder{ color:red; } 至此，CSS（CSS3）选择器的简单说明笔记就到这里结束了，其实这些内容包含了CSS（CSS3）世界的绝大多数常用选择器，当然，...参考：css选择器笔记，30个你必须熟记的css选择器，MDN-docs-选择器介绍，HTML5和CSS3权威指南（第3版下册-庐陵牛）第十九章，before和after伪元素的用法。

9466 0

常用的CSS3选择器

目录一、属性选择器 二、关系选择器 三、结构化伪类选择器 四、伪元素选择器 五、链接伪类 CSS选择器的作用就是从HTML页面中找出特定的某类元素。...该选择器与前两个选择器一样，E元素也可以省略，如果省略则表示可以匹配满足条件的任意元素。二、关系选择器 1.子代选择器（>）子代选择器主要用来选择某个元素的第一级子元素。...2.兄弟选择器（+、~）兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。...（1）临近兄弟选择器 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。...为此，CSS3引入了:nth-child(n)和:nth-last-child(n)选择器，它们是:first-child选择器和:last-child选择器的扩展。

4.1K2 0

CSS3新增选择器

都知道css有三个简单常用的选择器，#id、class和标签选择器。但是css3又新增了一些选择器，可以减少结构代码中ID属性和class属性的定义。使用它们可以减少不少冗杂的代码，便捷开发。...下面介绍： css3属性选择器 css3结构伪类选择器 css3 UI伪类选择器 1.css3属性选择器 属性选择器语法如下（E表示标签）： 选择器 功能描述 E[attribute] 选取带有指定属性的元素...结构伪类选择器是css3中新增的选择器，主要作用是通过文档结构的先后关系来匹配特定的元素，从而减少结构代码中ID属性和class属性的定义，使得文档更简洁。...结构伪类选择器语法：下方语法中n不能以0开头，123…，也可以是其他关键字如odd奇数、even偶数。也可以使用2n表示偶数，2n+1表示奇数。...3.UI伪类选择器 css3中共定义了11中UI伪类选择器。如下：实例如下： <!

5014 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭