移动端CSS-选择符

单位

---

• 三个常见的单位值px、%、em
  1. px，1px就是一个像素点
  2. %单位值
     • 根据父级元素的相对应的属性值而改变
     • 并不是所有可设置单位值得CSS属性都可以用%百分比，比如border-width
     • margin和padding使用%百分比做为属性值单位，会根据父级元素的width来计算
     • background-position属性设置%百分比值，将百分比值作为图片的中心坐标原点去计算相对于容器元素左上角的坐标位置。
  3. em单位值
     • em是相对于父级元素的字体font-size大小而改变
     • 当页面中的字体大小未被设置，浏览器的系统字体大小未被改变，默认字体大小一般是
       16px
• vh和vw
  1. vh:viewPort height，视窗的高度
  2. vw:viewPort width，视窗的宽度
     1vh是相对于视窗区域的1/100，满屏高度的容器是height:100vh;

选择符

---

• 常用选择符
  常用的选择符有tag、#idName、className还有通配符*

• 组合选择符

  1. E F：E元素的后代元素F
  2. E > F：E元素的子元素F
  3. E + F：相邻于E元素的F元素
  4. E ~ F：与E元素同级的且在其之后出现的F元素

• 属性选择器

  • E[foo]拥有foo属性的元素
  • E[foo="bar"]拥有foo属性，且属性值为bar的元素
  • E[foo~="bar"]拥有foo属性，且属性值中有空格隔开，其中一个为bar的元素
  • E[foo^="bar"]拥有foo属性，且属性值是以bar开始的元素
  • E[foo$="bar"]拥有foo属性，且属性值是以bar结束的元素
  • E[foo*="bar"]拥有foo属性，且属性值中包含bar的元素
  • E[foo|="bar"]拥有foo属性，且属性值是从左边以bar开始，并且是通过连字符（-）衔接的元素

• 结构型伪类选择符
  结构型的选择符主要是根据HTML结构来选择的，大致可以分为

  • 结构数量
    • E:nth-child(n)
    • E:nth-last-child(n)
    • E:nth-of-type(n)
    • E:nth-last-of-type(n)

  child代表的是拥有同一父级元素的兄弟元素，而type则是元素类型，last的作用是从E元素结构的后面往上数。nth-child和nth-of-type的计算方式是一样的，不同的是nth-of-type会在同级元素中跨过中间的类别继续去计算

  • 类型结构
    • :root
    • :empty
    • :only-child
    • :only-of-type
    • :first-child
    • :last-child
    • :first-of-type
    • :last-of-type

• 元素状态类选择符
  鉴于元素状态类选择符的兼容性问题，最为常用和实用的是:checked选择符

  • :checked元素状态类选择符

  对于新的浏览器而言，表单元素的样式定义，在相应的表单中增加appearance这个属性即可，在移动端，大部分都是webkit内核的浏览器，所以如下写即可自定义样式

      -webkit-appearance:none;
              appearance:none;
  

  :checked表示表单元素被选中，表单元素中，可以判断选中状态的仅有type=radio和type=checkbox的input输入表单

  • 其他几种元素状态类选择符（了解）

    • E:valid和E:invalid表单输入是否有效

      这个需要结合pattern这个正则属性来判断用户的输入信息是否有效才会有的效果

    • E:disable与E:enabale表单是否可用

      在特定的情况下，需要让表单不可用，比如因为某个条件不满足的时候，其中部分表单是不可用的，这时候就可以用input:disabled这样的形式来改变这个不可用的表单元素样式，反之亦然。

  • E:read-only表单只读

    在特定情况下，我们需要用户只能看到表单元素内容，但不希望用户输入任何信息的时候，会对表单设置readonly属性，如果需要改变样式，可以通过属性选择符input[readonly]或者input:read-only选择符来改变表单样式

  • E:required表单必填

• 目标伪类选择符
  目标伪类选择符在CSS中算是新增的一种方式，a标签有一种叫锚点的特性，当我们通过锚点跳转到指定位置并且有突出的样式告知用户跳转的位置时，就可以用:target这个选择符