css3新增伪类

1、p:first-of-type            选择属于其父元素的首个 <p> 元素的每个 <p> 元素

2、p:first-child ,            匹配属于其父元素中的首个子元素(子元素:first-child)  table tr:first-child{}

3、p:last-of-type             选择属于其父元素的最后 <p> 元素的每个 <p> 元素。  

4、p:last-child               匹配属于其父元素中的最后一个子元素        table tr:last-child{}

5、p:only-of-type       选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。(不能有第二个P元素,其他元素可以有)

6、p:only-child           选择属于其父元素的唯一子元素的每个 <p> 元素。

7、p:nth-child(2)         选择属于其父元素的第二个子元素的每个 <p> 元素。

8.p:nth-last-child(n)       父元素中倒数第n个子元素p的p

9、:only-child            匹配是其父元素中的唯一子元素
<p>
<a>百度</a>
</p>
a:only-child{}可以匹配

<p>
<a>百度</a>
<a>谷歌</a>
</p>
a:only-child{}无法匹配

10、:empty , 匹配没有子元素(包含文本)的元素

<p></p>:可以匹配出来

以下两种情况匹配不出来:
<p>
<a>百度</a>
</p>
<p>百度</p>

11、目标(target)伪类
用于匹配 当前活动的 锚点元素
语法::target

2、元素状态伪类
场合:表单元素居多
:enabled 匹配每个已启用的元素
:disabled 匹配每个被禁用的元素
:checked 匹配每个已被选中的input元素(单选按钮、复选框)

13、

[attr ^= val] 属性值以val开头的元素

[attr $= val] 属性值以val结尾的元素

[attr *= val] 属性值包含val的元素

原文地址:https://www.cnblogs.com/suga/p/8511471.html

时间: 2024-10-07 04:40:26

css3新增伪类的相关文章

CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) 2)      类选择器(.myclassname) 3)      标签选择器(div, h1, p) 4)      相邻选择器(h1 + p) 5)      子选择器(ul > li) 6)      后代选择器(li a) 7)      通配符选择器( * ) 8)      属性选择器

CSS3新增伪类--好用的:target

  问:如果让你实现下图,点击跳转后,让内容1增加一个背景颜色,你会怎么做呢? 可能很多小伙伴第一反应是用JS,给跳转绑定点击事件,然后用DOM获取到内容1,在给其添加css样式. 如果我跟你说用css来实现,你会不会一脸蒙蔽,然后想骂人.哈哈哈.其实用CSS3新增的伪类:target就能轻松搞定. W3C是这样定义的,如下图: 并且该伪类兼容性也很好,现代浏览器都支持,只有ie8及以下不支持. 有兴趣的小伙伴可以试试下面我写的demo <!DOCTYPE html> <html>

CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素. p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素. p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素. p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素. p:nth-child(2)  选择属于其父元素的第二个子元素的每

css新增伪类

css3新增伪类 :first-of-type p:first-of-type 选择属于其父元素首 <p> 元素每 <p> 元素 :last-of-type p:last-of-type 选择属于其父元素 <p> 元素每 <p> 元素:only-of-type p:only-of-type 选择属于其父元素唯 <p> 元素每 <p> 元素:only-child p:only-child 选择属于其父元素唯元素每 <p> 元

巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)

:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为这个动作赋予了更加多的功能——就如同:hover 一样你可以做一些样式定义. 先上效果图 正如标题所说,本文是教你如何巧用CSS3 :target 伪类制作Dropdown下拉菜单,原生HTML+CSS,无JavaScript.为了吸引各位往下看,先上实际例子,再进行剖析. Duang~ 实际例子其

CSS3 结构性伪类选择器(2)

CSS3 结构性伪类选择器-first-child ":first-child"选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 通过":first-child"选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li>

CSS3 target伪类简介

CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的. 现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较明显的UI标识,使用:target伪类可以像:hover等伪类一样对目标元素定义样式.

Atitit.隔行换色 &#160;变色 css3 结构性伪类选择器

Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原理就是利用结构伪类选择器 .list_div tr:nth-of-type(odd){background:#fff;} /* 奇数行 */ /*-------------------------------*/ .list_div tr:nth-of-type(even){ background:

CSS3 结构伪类选择器 详解

1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型.否则无效 p:nth-child(1){color:red} <div> <p>这是红色的<p> </div> <div> <h1>这是第一个子元素 但不是P类型,不是红色</h1> < p>这是黑色的 注意对比