CSS3选择器

2022/1/28 6:04:58

编程Tag： 选择器 css3 type 元素 input 选中 first child

本文主要是介绍CSS3选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

结构选择器

h1>h2  //h1的儿子h2
h1+h2   //h1的兄弟h2，离他最近下面第一个兄弟 ,平级
h1~h2   //h1的兄弟h2,下面所有兄弟，平级

属性选择器

h1[title]{                      h1[title="hodunren"]{
      color: yellow;    ===           color: yellow;                                         
    }                           }

<h1 title="hodunren">jfdjdsfasd</h1>

注意：h1[title^="hodunren"]
加上^以hodunren开头，

加上$以hodunren结束，

加上*任何地方有hodunren都选中，

加上~的话hodunren必须独立单词前后有空格，

加上|以hodunren开头或者hodunren后面-拼接，如hodunren-ad

伪类选择器

状态	示例	说明
:link	a:link	选择所有未被访问的链接
:visited	a:visited	选择所有已被访问的链接
:hover	a:hover	鼠标移动到元素上时
:active	a:active	点击正在发生时
:focus	input::focus	选择获得焦点的 input 元素
:root	:root	改变当前html所有样式
:empty	p:empty	对没有元素没有文本标签选中，如选中,如果双方的选不中；
:first-child	p:first-child	选中父元素中第一个p,如果父元素第一个不是p选不中，如子元素第一个元素是p也会选中，
:first-of-type	p:first-of-type	选中父元素中第一个p，一直往下找，如子元素中有p也会选中，main>p:first-of-type只选取儿子
:last-child	p:last-child	选中父元素中最后一个p,如果父元素最后不是p选不中，如子元素中最后元素是p也会选中，main>p:last-child，只选取儿子
:last-of-type	p:last-of-type	选中父元素中最后一个p，一直往下找，如子元素中有p也会选中最后一个
:only-of-type	p:only-of-type	选择属于其父元素的唯一子元素的p,父元素有其他p选不中。如子元素有唯一p也会选中
:only-child	p:only-child	选择属于其父元素的唯一子元素的p,父元素有其他p选不中。
:nth-child(n)	p:nth-child(2)	选择父元素第二个元素，如果是p选中，反之。如子元素第二元素是p也选中
:nth-of-type(n)	p:nth-of-type(2)	选中父元素中第二个p，一直往下找，如子元素中有二个p也会选中，main>p:first-of-type只选取儿子
:nth-last-child(n)	p:nth-last-child(2)	同上从最后一个算
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，从最后一个算
:not()	:not(p)	选中父元素除了p所有元素

表单伪类

选择器	示例	说明
:enabled	input:enabled	选择每个启用的 input 元素
:disabled	input:disabled	选择每个禁用的 input 元素
:checked	input:checked	选择每个被选中的 input 元素
:required	input:required	包含`required`属性的元素
:optional	input:optional	不包含`required`属性的元素
:valid	input:valid	验证通过的表单元素
:invalid	input:invalid	验证不通过的表单

字符伪类

状态	示例	说明
::first-letter	p:first-letter	选择每个元素的首字母
::first-line	p:first-line	选择每个元素的首行
::before	p:before	在每个元素的内容之前插入内容
::after	p:after	在每个元素的内容之后插入内容

 p::after{        //在p标签内容后面加上1
      content: "123";
    }

这篇关于CSS3选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！