html5选择器有哪些呀

html5选择器有哪些呀,第1张

CSS3 选择器大概有一下几个类型:

全局选择器    Universal Selector

类型选择器    Type Selector

属性选择器    Attribute Selectors

伪类    Pseudo-classes

元素    Pseudo-element

Class 选择器    Class Selectors

ID 选择器    ID Selectors

选择符    Combinator

下面是 W3C 官网上关于 Selector Level 3 的一个表格。我翻译了一下。

不同浏览器对 CSS 选择器有不同程度的支持,目前的浏览器(IE9前除外)已经支持了下面的绝大部分选择器。

*    任何元素

E    一个 E 类型的元素  

E[foo]    拥有“foo”属性的E 元素

E[foo="bar"]    拥有属性值等于“bar”的“foo”属性的 E 元素

E[foo~="bar"]    一个 E 元素,它的“foo”属性值是通过空格分开的一系列的值,其中有一个值等于“bar”

E[foo^="bar"]    一个 E 元素,它的“foo”属性的值是一个以“bar”开头的字符串

E[foo$="bar"]    一个 E 元素,它的“foo”属性的值是一个以“bar”结尾的字符串

E[foo*="bar"]    一个 E 元素,它的“foo”属性值包含字符串“bar”

E[foo|="en"]    一个 E 元素,它的“foo”属性的值是通过连字符(-)分割的一系列的值的字符串,其中有一个值是以“en”开头  

E:root    一个 E 元素,是文档的根元素

E:nth-child(n)    一个 E 元素,是它父元素的第 n 个子元素

E:nth-last-child(n)    一个 E 元素,是它父元素的倒数第 n 个子元素

E:nth-of-type(n)    一个 E 元素,在它同类型的兄弟元素中排在第 n 个

E:nth-last-of-type(n)    一个 E 元素,在它同类型的兄弟元素中排行倒数第 n 个

E:first-child    一个 E 元素,是它父元素的第一个子元素

E:last-child    一个 E 元素,是它父元素的最后一个子元素

E:first-of-type    一个 E 元素,是它同类型兄弟元素中的第一个

E:last-of-type    一个 E 元素,是它同类型的兄弟元素中的最后一个

E:only-child    一个 E 元素,是它父元素的唯一一个子元素

E:only-of-type    一个 E 元素,是它同类型的兄弟元素的唯一一个(没有别的同类的兄弟)

E:empty    一个没有子元素的 E 元素

E:link    一个没有被访问过的,作为超链接的锚点的 E 元素

E:visited    一个被访问过的锚点 E 元素  

E:active    一个正处于某些用户 *** 作状态的 E 元素

E:hover    一个鼠标滑过的 E 元素

E:focus     一个获得用户焦点的 E 元素

E:target    一个做为起 Refer 制定锚点的元素(url hash 相关)

E:lang(fr)    一个 language 是 fr 的 E 元素  

E:enabled    一个UI *** 作上 enabled 的 E 元素

E:disabled    一个 UI *** 作上 disabled 的 E 元素  

E:checked    一个 UI *** 作上状态为 checked 的 E 元素

E::first-line    E 元素中格式化后的第一行

E::first-letter    E 元素的第一个字母

E::before    在 E 元素之前生成的内容

E::after     在 E 元素之后生成的内容

E.warning    一个class 属性包含 warning 的 E 元素

E#myid    一个 ID 为 myid 的 E 元素

E:not(s)    一个不匹配简单的选择器 s 的 E 元素

E F    一个作为 E 元素后代的 F 元素

E >F    一个作为 E 元素子元素的 F 元素

E + F    一个紧跟在 E 元素后面的 F 元素

E ~ F    一个出现在 E 元素前面(紧挨着)的 F 元素

每天一更新,这些初级html知识你掌握了吗?

css选择器的优先级:作用的元素一样,样式一样,就会有优先级问题。

* 通配选择器 0

* 标签名选择器 1

* 类选择器 10

* id选择器 100

* 后代选择器 选择器1 选择器2 ...(会有相加的过程)

* 群组选择器 选择器1,选择器2,... (不会有相加的过程)

注意:

* 1.相同类型的选择器 样式冲突下 后覆盖前

* 2.不同类型的选择器 样式冲突下 优先级高覆盖优先级低

* 3.* <Tags <class <id <style <!important

* 4.!important慎用(非得用的时候,要加注释说明一下)

第一、【Google Web Toolkit】是现在大家还不熟悉的工具之一,主要用于开发浏览器应用的一个工具,不过库中支持很多【HTML5】的功能,包括对客户端,或者是web存储的支持,都可以实现。

第二、还有一种是【JetBrains WebStorm】工具,需要创建HTML文档时可获得对【HTML5】文件的支持,现在的运用很多,比如砍伐者键入,使用者可以在【chrome】浏览器中及时的预览【HTML】的文档很方便。

第三、微软的【Visual Studio 2010 SP1】中提供了IntelliSense这个项目,也就是说追加了针对【HTML5】的一些元素,总体使用起来还是比较好的,但是我们要结合【ddhu】的一些实用工具。

第四、【Dojo Foundation Maqetta】是一个不错的选择,这款是工具是来自于【IBM】项目之一,【Dojo Foundation Maqetta】是为桌面和移动设备开发HTML5应用的开源工具,浏览器即可使用。

第五、当然还有【Sencha Touch2】是移动应用框架的一种,可以当做一个重要【Sencha】的HTML5平台,使用者可以用它开发面向【iOS】进行制作和使用,也可以【Android】和【Blackberry、Kindle Fire】使用。

第六、现在我们继续介绍【Sencha】,这款工具的主要定位是【HTML5】的可视化开发研究,一般来说开发团队可以在一个任务,然后做一个集成的环境,然后在这个环境中完成应用的设计和开发,以及需要的部署。

第七、我们来介绍一下【Adobe ColdFusion 】,这款工具主要是用来开发企业【Web】程序的一个技术,通过【Websockets】和互动表单以及视频等来做出【HTML5】技术,创建一种用户体验。

第八、最后【Adobe Dreamweaver CS6】作为一个【Web】端口的一种设计软件,这款工具提供了对【HTML】网站和移动程序的可视化编辑界面,整体来说使用也是比较的方便。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7661484.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-08
下一篇 2023-04-08

发表评论

登录后才能评论

评论列表(0条)

保存