zoukankan      html  css  js  c++  java
  • CSS选择器

    CSS三大特性—— 继承、 优先级和层叠。

    继承:即子类元素继承父类的样式;

    优先级:是指不同类别样式的权重比较;

    层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式。

    css选择符分类  

    首先来看一下css选择符(css选择器)有哪些?


      1.标签选择器(如:body,div,p,ul,li)

      2.类选择器(如:class="head",class="head_logo")

      3.ID选择器(如:id="name",id="name_txt")

      4.全局选择器(如:*号)

      5.组合选择器(如:.head .head_logo,注意两选择器用空格键分开)

      6.后代选择器 (如:#head .nav ul li 从父集到子孙集的选择器)

      7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示

      8.继承选择器(如:div p,注意两选择器用空格键分开)

      9.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

      10.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)

      11.子选择器 (如:div>p ,带大于号>)

      12.CSS 相邻兄弟选择器器 (如:h1+p,带加号+)

    css优先级

    当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,CSS有一套优先级的定义。

    不同级别

    1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
    2. 作为style属性写在元素内的样式
    3. id选择器
    4. 类选择器
    5. 标签选择器
    6. 通配符选择器
    7. 浏览器自定义或继承

          总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

    权重

    !important      infinity

    行间样式       1000

    id           100

    class |属性|伪类    10

    标签|伪元素     1

    通配符        0

    权重是256进制


         

  • 相关阅读:
    微信小程序解析xml
    微信小程序获取openid
    PHPExcel-1.8导出
    期末复习--实用回归分析
    一元线性回归
    链表
    WSL 配置oh-my-zsh
    Introduction to Computer Science and Programming in Python chap2
    树莓派的一些记录
    Top
  • 原文地址:https://www.cnblogs.com/guxia/p/9462827.html
Copyright © 2011-2022 走看看