H5选择器

记录下标签跳转

a、标签跳转到指定位置

<a href="#A1">方法一</a><a href="#A2">方法二</a><a href="#A3">方法三</a>
<div><a name="A1">方法一</a></div>
<div><a name="A2">方法二</a></div>
<div><a name="A3">方法三</a></div>

b、拨打电话

<a href="tel:123456789"></a>

 

正文

(一)、属性选择器

1、E[attr]:只使用属性名,但没有确定任何属性值;div[class]{}

2、E[attr="value"]:完全匹配;div[class=""]{}

3、E[attr~="value"]:包含就匹配div[class~=""]{}

4、模糊匹配

E[attr^="value"]

E[attr$="value"]

E[attr*="value"]

 

(二)伪类选择器

1、结构性伪类选择器
X:first-child 匹配子集的第一个元素。IE7就可以支持;li:first-child{}
X:last-child匹配父元素中最后一个X元素;li:last-child{}
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始X:only-child这个伪类一般用的比较少,比如上述代码匹配的是div下的有且仅有一个的p,也就是说,如果div内有多个p,将不匹配X:root匹配文档的根元索。在HTML (标准通用标记语言下的一个应用)中,根元索永远是HTMLX:empty匹配没有任何子元素 (包括包含文本) 的元素X;奇数: li:nth-child(odd){},偶数:li:nth-child(even){}

X:only-child这个伪类一般用的比较少,比如上述代码匹配的是div下的有且仅有一个的p,也就是说,如果div内有多个p,将不匹配, div p:nly-child{}

X:root匹配文档的根元索。在HTML (标准通用标记语言下的一个应用)中,根元索永远是HTML;     root:body{}

X:empty匹配没有任何子元素 (包括包含文本) 的元素X;     div:empty{}

 

2、目标伪类选择器

E:target 选择匹配E的所有元素,且匹配元素被相关URL指向;div:target {};

 

3、UI 元素状态伪类选择器

E:enabled 匹配所有用户界面 (form表单) 中外于可用状态的E元素

E:disabled 配所有用户界面 (form表单)中处于不可用状态的E元素

E:checked 匹配所有用户界面 (form表单) 中处于选中状态的元素

EE:selection 匹配E元素中被用户选中或外于高亮状态的部分

 

 4、否定伪类选择器

E:not(s) (IE6-8浏览器不支持:not0选择器。);li:not(:first-child){}

 

 5、动态伪类选择器

E:link
链接伪类选择器
选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过。常用于链接描点上


E:visited
链接伪类选择器
选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active
用户行为选择器
选择匹配的E元素,且匹配元素被激活。常用于链接描点和按钮 上
E:hover
用户行为选择器

选择匹配的E元素,且用户鼠标停留在元素E上,IE6一下仅支持a:hover

posted @ 2023-08-09 15:04  键盘侠客  阅读(118)  评论(0)    收藏  举报