Rumah > hujung hadapan web > html tutorial > 伪类选择器汇总

伪类选择器汇总

PHP中文网
Lepaskan: 2017-06-19 17:36:39
asal
3553 orang telah melayarinya

伪类选择器汇总

伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下
  1. 结构性伪类选择器结构性伪类选择器
    它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":"
    1. 根元素选择器                只作用于html等底部标签.很少用 ..

    :root

                            


    2. 子元素选择器      子元素全选还要更细致                                    

    ul>li:first-child{   }      增加伪类first-child     第一个

    ul>li:last-child{   }      增加伪类last-child     最后一个    

    ul>li:only-child{   }      增加伪类only-child    那些只有一个的,影响这个独生子

    div>p: only-of type{ }    增加伪类only-of-type   选择指定类型的那个子元素, 其实功能和 单单的div>p类似

     

     

    伪类都需要加上前置选择器来限制范围

     

    3. ul>li:nth-child(2)   {  }           ul下的li 的第二个子元素

    ul>li:nth-last-child(2)  {  }     …. 倒数第二个

    其他:

  2. UI伪类选择器

    :enable

    :disable

     

    html文件


    css文件

    效果

:checked         勾选的生效

html文件


css文件

将被勾选的隐藏起来

:default       默认的生效, 很少用

css文件

:valid            合法时生效

:invalid         不合法时生效

html文件

css文件


填对了数字, 就变成绿色了.

:required        必填部分生效

optional        不是必填的生效

 

html文件            

css文件

 

a:link   作用于a 标签间的文本

input:focus

切换文本输入光标, 输入框变了颜色

 

  1. 其他伪类选择器

    :not     反选  重点掌握

    不含baidu的超链接为红色

     

    :empty     作用空标签, 有点像word的替换空格的意思

     

    html文件

    替换前

    css文件

    如果想不影响某些为空的部分,可以指定如

    p:empty{   }  那css就只影响p下的空标签

     

     

    替换后

     

    :lang

    :target    页面内定位锚点, 一定位立刻生效

     

    name 或者id 都可以的,  锚点是可以设置在任何标签的, 至于超链接只不过是一个超链接,这里直接在浏览器输入#锚点名称效果就是跟按了href之后一样的.

     

     

    测试的时候, 在最末尾加上"# 锚点名称"

    效果(实际上定位锚点更多是在一些很长的页面, 一点就定位到. 而且边成红色了.)

        

Atas ialah kandungan terperinci 伪类选择器汇总. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan