筛子

筛子

第一次普通方法写筛子（代码可读性较高，含知识点较多）

wxml

<view class="father">
  <view class="box1">
    <view class="point">view>
  view>
  <view class="box2">
    <view class="point">view>
    <view class="point">view>
  view>
view>
<view class="father">
  <view class="box3">
    <view style="padding-left:4px">
      <view class="point" >view>
    view>
    <view>
      <view class="point">view>
    view>
    <view style="padding-right:4px">
      <view class="point" >view>
    view>
  view>
  <view class="box4">
    <view>
      <view class="point">view>
      <view class="point">view>
    view>
    <view>
      <view class="point">view>
      <view class="point">view>
    view>
  view>
view>
<view class="father">
  <view class="box5">
    <view>
      <view class="point">view>
      <view class="point">view>
    view>
    <view>
      <view class="point">view>
    view>
    <view>
      <view class="point">view>
      <view class="point">view>
    view>
  view>
  <view class="box6">
    <view>
      <view class="point">view>
      <view class="point">view>
    view>
    <view>
      <view class="point">view>
      <view class="point">view>
    view>
    <view>
      <view class="point">view>
      <view class="point">view>
    view>
  view>
view>
<view class="father">
  <view class="box7">
    <view>
      <view class="point">view>
      <view class="point">view>
      <view class="point">view>
    view>
    <view>
      <view class="point">view>
    view>
    <view>
      <view class="point">view>
      <view class="point">view>
      <view class="point">view>
    view>
  view>
  <view class="box8">
    <view>
      <view class="point">view>
      <view class="point">view>
      <view class="point">view>
    view>
    <view>
      <view class="point">view>
      <view class="point" style="background-color:#fff">view>
      <view class="point">view>
    view>
    <view>
      <view class="point">view>
      <view class="point">view>
      <view class="point">view>
    view>
  view>
view>

wxss

page{
     
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;  
}
view{
     
  box-sizing: border-box;
  border: solid 1px;
}
.father{
     
  border: #ffffff;
  display: flex;
  width: 100%;
  justify-content: space-around;
}
.father>view{
     
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
}
.point{
     
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000000;
}
.box1{
     
  justify-content: center;
  align-items: center;
}
.box2{
     
  justify-content: space-around;
  align-items: center;
}

.box3 view{
     
  border: white;
  display: flex;
}
.box3 view:nth-child(3){
     
  
  justify-content: flex-end;
}
.box3 view:nth-child(2){
     
  justify-content: center;
}
.box3,.box4,.box5,.box6,.box7,.box8{
     
  justify-content: space-around;
}
.box4 view,.box5 view,.box6 view,.box7 view,.box8 view{
     
  border: white;
  display: flex;
  justify-content: space-around;
}

基于wxml的统一结构写出的精简版（代码量较少，结构统一）

wxml

wxss

page{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.father{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  border: solid white; 
}
.father>view{
  width: 80px;
  height: 80px;
  display: flex;
  border: black solid 1px;
  flex-direction: column;
  justify-content: space-around;
}
.point{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000000;
}
.father>view>view{
  display: flex;
  justify-content: space-around;
}

知识点总结

选择器

详细学习请移步：https://www.runoob.com/cssref/css-selectors.html
快速学习可移步：css选择器

选择器的权重

内联样式：

其中的 style=""，就是内联样式
ID 选择器：

#name{
...
}
类选择器:

.point{
...
}
标签选择器:

view{
...
}
特定子元素选择器：
.box3 view:nth-child(3){
  
  justify-content: flex-end;
}
指的是：选择类名为box3，的子代view的第三个子元素

优先规则1： 最近的祖先样式比其他祖先样式优先级高。

优先规则2："直接样式"比"祖先样式"优先级高。

**优先规则3：**优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

**优先规则4：**计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。

某些属性是否具备继承属性