计算机，网页设计中CSS各选择器的含义，用途和不同，尤其是复合内容选择器？

Posted 2023-04-14

1元素选择器
html文档的元素名称就是元素选择器。 1）语法，例如：html<color:black;>、h1color:blue;、pcolor:silver; 2）缺点：不同的元素样式相同，即不能跨元素。所以做不到同一类元素下的细分。

2类选择器
自定义的某种选择器。 1）语法：.className样式声明 例如：.myClass background-color:pink;font-size:47px; <h2>h2中的文本</h2> <p>p中的文本</p>
注意事项：
html文件中，所有元素都有一个class属性，如：<p></p>
类选择器还一种用法：<div id="d1"class="s1 s2">hello</div>，样式s1和样式s2对div共同起作用。

3分类选择器
将类选择器和元素选择器结果起来使用，以实现同一类元素下不同样式的细分控制。如<input>元素，又有按钮又有文本框的，采用分类选择器。 1）语法：元素选择器.className样式声明 例如： p.myClass color:red;font-size:27px <h2>h2中的文本</h2> <p>p1中的文本</p> <p>p2中的文本</p>

4元素id选择器
以某个元素id的值作为选择器。比较特殊的、页面整体结构的划分一般使用id选择器。 1）语法：定义id选择器时，选择器前面需要有一个“#”号，选择器本身则为文档中某个元素的id属性的值。 例如：#header color:red;background:yellow; <h1 id="header">This is Title<h1>
u 注意事项：
v html文件中，所有元素都有一个id属性。且某个id选择器仅使用一次。

5派生选择器
依靠元素的层次关系来定义。某一包含元素下的一些相同子元素使用派生选择器。 1）语法：通过依据元素在其位置的上下文关系来定义样式，选择器一端包括两个或多个用空格分隔的选择器。 例如：h1 spancolor:red; <h1>This is a<span>important</span>heading</h1>

6选择器分组
对某些选择器定义一些统一的设置（相同的部分）。 1）语法：选择器声明为以逗号隔开的元素列表。 例如：h1,p,div border:1px solid black;

7伪类选择器
伪类用于向某些选择器添加特殊的效果。 1）语法：使用冒号“：”作为结合符，结合符左边是其他选择器，右边是伪类。 2）常用伪类：有些元素有不同的状态，典型的是<a>元素。 ①:link：未访问过的链接 ②:active：激活 ③:visited：访问过的链接 ④:hover：悬停，鼠标移入，所有元素都能用 ⑤:focus：获得焦点 例如：a:link color:black;font-size:20px; a:visited color:pink;font-size:20px; a:hover font-size:27px; a:active color:red;

8选择器优先级
1）基本规则：内联样式 > id选择器 > 类选择器 > 元素选择器
2）优先级从低到高排序：
div < .class < div.class < #id < div#id < #id.class < div#id.class 例如：<div id="id" style="color:black;"></div> 参考技术A 可以到w3cschool看看全面的

如何正确抛出错误以及Angular HTTP中不同错误捕获器的含义是啥[重复]

【中文标题】如何正确抛出错误以及Angular HTTP中不同错误捕获器的含义是啥[重复]

【英文标题】：How to throwError properly and what are the meaning of different error catchers in Angular HTTP [duplicate]如何正确抛出错误以及Angular HTTP中不同错误捕获器的含义是什么[重复]

【发布时间】：2020-08-21 01:03:33

【问题描述】：

在决定在这里发布问题之前，我做了很多研究。我对 Angular（或一般）如何处理 HTTP 错误的了解非常模糊，因此我正在寻找一些澄清/建议。

为简单起见，假设我有一个休息 API GET http://example.com，它将随机返回 error: 'Error message' 或 data: 'Data is available'，其中 error 表示出现问题（请求成功完成，但存在一些内部错误） data 表示一切正常。

现在，据我了解，有两件事需要处理。第一件事是请求失败时的处理，例如网络错误、被CORS阻塞等，第二件事是处理成功的请求，但看是error还是data。

TL;DR：如何将下面的 jQuery 转换为 Angular？

通常，使用 jQuery，我会这样做：

$.get('http://example.com').done(data => 

    if ('error' in data) console.log('Request completed, but there is an error in the remote server');
    else console.log('Everything completed successfully');

).fail(error => 

    console.log('Error while requesting data', error);

);

现在在 Angular 中，事情变得复杂了，无论我尝试什么，我似乎都无法抛出错误（所有函数都已正确导入）：

//service.ts
    getStatus() 

        return this.http.get('https://test.com/')
        .pipe(
            map(data => 
                if ('error' in data) 
                    //I would like to throw an error that can be caught at subscribe(done, error) later
                    //But this rxjs won't throw anything, subscribe() will still resolve with done()
                    return throwError('Request completed, but there is an error in the remote server');
                
                return data;
            ),
            tap(data => 
                //Process the data, should not be called if map() throwError()?
            ,
            catchError(error => 
                //I assume this is where the HTTP request failed due to network, CORS, etc.
                return throwError('Error while requesting data');
            )
        );

    

//app.ts
    this.service.getStatus().subscribe(data => 

        //I expect this function to be called ONLY if there was no throwError(), but that wasn't the case
        //No matter what I try in `service.ts`, this will always be called

    , (error) => 

       //I expect this to call when throwError() is called from `service.ts` but it never happens

    );

我还阅读了另一个关于在 subscribe() 上使用 catch() 的建议，但 catch() 从来都不是订阅上的方法：

//app.ts
    this.service.getStatus().subscribe(data => 

        //I expect this function to be called ONLY if there was no throwError(), but that wasn't the case
        //No matter what I try in `service.ts`, this will always be called

    ).catch(error => 

        //This is not valid

    );

我尝试过的都没有奏效，管道中有多个地方我可以throwError()，但我不太确定它们的区别是什么（例如，service.ts 中的catchError() 和error 来自subscribe(success, error) 在app.ts。

【问题讨论】：

这实际上会像我预期的那样抛出错误！你能把它作为一个答案，以便我能以某种方式接受它吗？

【参考方案1】：

对我来说似乎有点复杂。如果您不想实现 http 拦截器，我会简单地做这样的事情

//service.ts
  getStatus() 
    return this.http.get('http://www.test.com');
  

然后

//app.ts
    this.testService.getStatus()
      .subscribe(data => 
        if ('error' in data) 
          // process Error       
          return;
        
        // process data
        console.log(data);
      , error => 
        // http error
        console.log(error);
      );

对于 tap 操作符，它用于执行您想要的任何涉及数据或不涉及数据的操作（例如日志记录），但它始终会返回与其源相同的 observable。

【讨论】：

哇。这比我想象的要简单。我可能想多了。即使http()返回错误，tap()也会被激活吗？

不，如果返回一些数据就会触发。