前端CSS的选择器整理搜集

匆匆过客 提交于 2019-11-28 13:29:31
HTML选择器

 


 三大基础选择器
                                      

  标签选择器            html{属性:属性值}
  id选择器             #id{属性:属性值}
  class选择器          .id{属性:属性值}权重   标签的权重最低 按照通常说法分数为1分     id选择器的权重最高   一般为100分     class的选择器权重最低   一般为10分    //这里的分数仅仅为了方便判断,实际当中并不存在具体的看文尾

  


 高级选择器

  并集    “并集”选择器:同时选中各个基本选择器所选择的范围,任何形式的选择器都可以,并集选择器是多个选择器通过逗号连接而成的。例如h1,h2,h3{color:red;font-size:23px;}
  交集      “交集”选择器:由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集,其中第一必须是标记选择器,第二个必须是类别选择器或者ID选择器,两个选择器之间不能有空格,必须连续书写.div. d1选中一个div标签类名叫d1
  后代    选择它里面的后代元素    例如.box .d1 p 选中类名为.box下面的.d1 的p标签




  子元素选择器    .d1>a 选择类名为.d1下面的a标签
  相邻兄弟选择器   div+p div后面的p标签被选中
  普通兄弟选择器   div~p   div后面额p标签全部被选中
  通配符       *{ color :red}星号代表所有,让颜色为红色

  超链接伪类选择器   :link超链接的初始状态
                  :visited超链接被访问后的状态
               :hover鼠标悬停超链接的状态
            :active超连接被激活,按下没有松开的状态

 

 

 CSS3选择器

 


  属性选择器

   E[attr]             attr指的是是class的属性
   E[attr = value]      class属性为value
   E[attr^=value]         class值是value开头的
   E[attr$=value]        class值是value结尾
   E[attr*=value]        子主题 1
   E[attr~=value ]       class~class属性是value  用空格隔开
   E[attr|=value]         class属性值是value或者是value-开头的类               

 


  结构伪类选择器

   nth-child()      nth-child(1)第几个子元素
                  odd奇数       第奇数的元素
                even偶数    第偶数的元素
               3n散的倍数     三的倍数的元素
   first-child           第一个孩子元素
   last-child            最后一个孩子元素
   only-child            只有一个孩子元素
   nth-of-type()      选择器匹配父元素中的第n个子元素
   first-of-type      选择器匹配元素其父级是特定类型的第一个子元素。
   nth-last-child()   择器选取父元素的第 N 个指定类型的子元素,从最后一个子元素开始计数
   nth-last-of-type()  择器选取父元素的第 N 个子元素,与类型无关,从最后一个子元素开始计数
   :root                唯一的根元素
   :empty               选用没有子元素的标签
   only-of-type         代表了任意一个元素,这个元素没有其他相同类型的兄弟元素,也叫只有一个子元素。

 


  目标伪类选择器

   :target    选择器可用于当前活动的target元素的样式。 

 

 ui状态伪类选择器

   disabled  禁用一个input属性disabled:disabled;input=disabled;
   enabled   input:enabled 标签可用
   focus    input:focus让input获取焦点
   checked    input:checked; 默认选项。多选单选框使用
   ::selection    选中内容

 


  否定伪类选择器
   

:not    取反类名不是所选中的 取反

 


  动态伪类选择器
  

 :link           点击前的状态
 :visited       被访问后的状态
 :hover        悬停状态
 :active        点击松手前的状态            

权重比较

 id、class、html标签选择器的数量
     权重不同看权重
     权重相同看位置
 继承   看谁近
      一样近,比较权重
      不一样,谁的权重大听谁的
      权重一样,听后面的

  

  本次整理只是常用的整理,并不全面仅供参考。有问题可以留言指正。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!