CSS教程

CSS3选择器

本文主要是介绍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选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航