js进阶 10-10 可见伪类选择器和内容伪类选择器的作用

一、总结

一句话总结：分组来描述。内容伪类选择器就是四个包含。可见的伪类选择器就是可见和不可见。查找功能，也就是内容伪类选择器非常有用。

1、可见伪类选择器可以做什么？

设置你想是实现的任何元素显示或者隐藏的功能

2、css中元素隐藏两种方法？

display和visibility

8 /* ul{display: none;}*/

9 /* ul{visibility: hidden;}*/

3、display和visibility隐藏元素的区别？

visibility还占着文档流的位置

4、js中如何实现查找功能，查找文本或者类？

内容伪类选择器

5、内容伪类选择器哪四个？

选择文本，选择类，包含子元素，不包含子元素

：contains(text)选择包含给定文本内容的元素

：has（selector)选择含有选择器所匹配元素的元素

：empty选择所有不包含子元素或者不包含文本的元素

：parent选择含有子元素或者文本的元素（跟：empty相反）

二、可见伪类选择器和内容伪类选择器

1、相关知识

可见性伪类选择器
- ：hidden选取所有不可见元素
  “：hidden”选择器选择的不仅包括样式为display:none所有元素，而且还包括属性type=”hidden”和样式为visibility:hidden的所有元素。
- ：visible选取所有可见元素

内容伪类选择器
内容伪类选择器，就是根据元素中的文字内容或所包含的子元素特征来选择元素，其文字内容可以模糊或绝对匹配进行元素定位。
- ：contains(text)选择包含给定文本内容的元素
- ：has（selector)选择含有选择器所匹配元素的元素
- ：empty选择所有不包含子元素或者不包含文本的元素
- ：parent选择含有子元素或者文本的元素（跟：empty相反）

2、代码

1  2  3  4     
      5     演示文档 6      7     11 12 13      
     
      14         
      h1
15         
      p1 p标签表示段落
16         
      p2 我是span
17         
      span118         
      span219      
      
       20         
       1
21         
       2
22         
       3li
23         
       4
24         
       5 p
25         
       6
26         
       7
27         
       
28         
       
29      
      
30      
     
31      32     33      50 51