Css3选择器基础知识

2019-09-12 郑州网站建设  

div > p 选择父元素为div的所有子元素。

div + p 选择紧接在div后的所有子元素。

[target] 选择带有target属性的元素 a[target] {...}

[target=_blank] 选择target_blank的所有子元素。

[title~=flower] 选择title属性包含单词flower的元素。

[lang|=en]选择lang属性以en开头的所有元素。

[p:first-letter] 选择p元素开头的所有首字母。

[p:first-line] 选择每个p元素的首行。

[p:first-child] 选择属于其父元素的首个子元素的每个 <p> 元素 就是相对比某个父元素下的所有p元素的第一个p 必须声明 <!DOCTYPE>

[p:before] 在每个p元素之前插入内容 p:before{content:"台词:";} ::css3写法 : css2写法。

[p:after] 在每个p元素后插入内容。

[p:lang(it)] 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。

[p~ul] 选择前面有<p>元素的每个<ul>元素。

a[src^="https"] 选择所有a 属性中srchttps开头的 ^表示开头。

a[src$=".pdf"] 选择所有a中属性srcpdf结尾的 $表示结尾。

a[src*="abc"] 选择所有a中属性src包含abc的元素。

div p:first-of-type div下首个p元素 p可以不是第一个。

div p:last-of-type div下最后一个p元素。

div p:only-of-type div中只有一个p元素 可以包含其他元素。

div p:only-child div中只有一个p元素 不能包含其他元素 ie不支持。

div p:nth-child2 div下第二个p元素。

div p:nth-last-child(2) div下倒数第二个p元素 Odd even 是可用于匹配下标是奇数或偶数的子元素的Keywords 使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

div p:nth-of-type(2) div下第二个p 2可以用奇偶数 可以用公式。

div p:nth-last-of-type(2) div下倒数第二个p

div p:last-child div下最后一个p 相当于div p:nth-last-child(1)

p:empty 选择没有子元素的每个 <p> 元素(包括文本节点)。

#news:target 选择当前活动的 #news 元素。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/2022.html转载请标明出处,谢谢合作!
标签:
  • DIV
  • 元素
  • 选择
  • CSS3
  • p