需要在html style里面和native 里面同时设置才有效

html video增加样式 webkit-playsinline、playsinline

 <video controls="" height="auto" id="video1" playsinline="true" preload="auto" webkit-playsinline="true" width="100%"><source src="xxxxx.mp4" type="video/mp4">
    您的浏览器不支持 HTML5 video 标签。
 </source></video>

native code 设置allowsInlineMediaPlayback

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.allowsInlineMediaPlayback = YES;
WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectZero configuration:config];

参考 https://www.zhihu.com/question/21094425

ID 选择器， 如 #id{}

类选择器， 如 .class{}

属性选择器， 如 a[href="segmentfault.com"]{}

伪类选择器， 如 :hover{}

伪元素选择器， 如 ::before{}

标签选择器， 如 span{}

通配选择器， 如 *{}

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

参考 https://www.runoob.com/w3cnote/css-style-priority.html

本文成文使用的环境

• Xcode Version 11.3 (11C29)
• 模拟器版本Version 11.3 (SimulatorApp-912.5 SimulatorKit-570.3 CoreSimulator-681.17)，对应iOS 13.2

同层渲染步骤

简单说下同层渲染效果，是将Native控件添加到WKWebView的子层级View中，最明显的是z-index 属性可以控制Native控件。详细请阅读https://developers.weixin.qq.com/community/develop/article/doc/000c4e433707c072c1793e56f5c813

需要前端改造的地方

为了让WKWebView为Native控件单独生成一个子层级的View，需要改变对应DOM节点的CSS样式,如

〈div style="position: fixed; font-size: 50px;overflow: scroll;-webkit-overflow-scrolling: touch" id="zl_native" 〉
            〈zl-native id="zl_native_node"〉world〈zl-native〉
〈/div〉

本文成文环境中测试的结果是:

• WKWebView只为position: fixed的
  标签内容生成单独的子层级视图
• overflow: scroll;-webkit-overflow-scrolling: touch,在本文成文环境中不起作用；建议读者自行尝试更多的环境，以得到更准确的结论。

需要客户端改造的地方

首先，当前端加载DOM时，检测到需要Native渲染的节点，需要通过jsbridge通知客户端，把节点的信息告诉客户端。客户端根据节点信息找到对应的子层级view

-(UIView *)find_zl_native_view
{
    UIView *wkcontentview = [self get_wkcontentView];
    NSMutableArray *arr = [wkcontentview.subviews mutableCopy];
    while (arr.count > 0)
    {
        UIView *comp = arr.firstObject;
        [arr removeObjectAtIndex:0];
        if ([@"WKCompositingView" isEqualToString:NSStringFromClass([comp class])])
        {
            if ([comp.layer.name isEqualToString:@" 
 id='zl_native'"]) {
                return comp;
            }
        }

        if (comp.subviews.count > 0)
        {
            [arr addObjectsFromArray:comp.subviews];
        }
    }
    return nil;
}

找到后，在这个子层级view上添加Native控件，渲染对应内容。

-(void)startNativeRender_zl_native_node
{
    UIView *view = [self find_zl_native_view];
    UILabel *lbl = [[UILabel alloc] initWithFrame:view.bounds];
    [view addSubview:lbl];
    lbl.alpha = 0;
    [UIView animateWithDuration:3 animations:^{
        lbl.alpha = 0.6;
        lbl.text = @"world";
        lbl.textColor = [UIColor yellowColor];
        lbl.backgroundColor = [UIColor redColor];
        lbl.font = [UIFont systemFontOfSize:49.5];
    }];
}

一个超链接示例

<a href="https://www.z6z8.cn">z6z8</a>

有四种状态：

• a:link - 普通的、未被访问的链接
• a:visited - 用户已访问的链接
• a:hover - 鼠标指针位于链接的上方
• a:active - 链接被点击的时刻

CSS 改变超链接颜色

在未指定适用范围时，下面css影响全局

a:link {
  /*前景色*/
  color:blue;
  /*背景色*/
  background-color: orange;
}

a:visited {
  color:red;
}

a:hover{
...
}
a:active{
...
}

CSS 改变部分超链接颜色

需要将新颜色设置指定给具体的CSS块，例如

.testcss  {
    width:100%;
    height:20%;
}

.testcss  a:visited {
  color:red;
}