CSS选择器_css选择器代码复用-CSDN博客

本文链接：https://blog.csdn.net/jy1106/article/details/103410533

1. id选择器
#elem{ } id=“elem”
代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      #div1{background:red;}
      #div2{background:blue;}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <div id="div2">这是另一个块</div>
</body>
</html>

注：
1.在一个页面中，ID值是唯一的，出现多次是不符合规范的。
2.命名规范，字母— _ 数字（命名的第一位不能是数字）。
3.命名方式，驼峰式（如：searchButtom），下划线式，短线（中划线）式。

２． class选择器
.elem{ } class=“elem”
代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      .box{background:red;}
      .content{font-size:30px;}
    </style>
</head>
<body>
    <div class="box content">这是一个块</div>\
    <p class="box">这是一个段落</p>
</body>
</html>

注：
１.class选择器是可以复用的。
２.可以添加多个class样式。
３.多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
４.标签+类的写法(p.box)

3.标签选择器(TAG选择器)
div{ }
＜div＞　
＜／div＞
使用的场景：
１.去掉某些标签的默认样式。
２.复杂的选择器中，如：层次选择器。

4.群组选择器(分组选择器）
CSS:div,p,span{}
代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      div, #text, .title{backgroung:red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2>
</body>
</html>

注：可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。

5.通配选择器
*{ }(包含所有的标签)
代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     *{ border:1px red solid;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2>
</body>
</html>

注：尽量避免使用统配选择器。
使用场景：去掉所有标签的默认样式。

6.层次选择器
代码示例如下：

1.后代 M N { }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #list  li {border:1px red solid;}
    </style>
</head>
<body>
    <ul id="list">
         <li>
              <ul>
                  <li></li>
                  <li></li>
                  <li></li>
              </ul>
          </li>
         <li></li>
         <li></li>
    </ul>
    <ol>
         <li></li>
         <li></li>
         <li></li>
        </ol>
</body>
</html>

2.父子 M > N {}
代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #list > li {border:1px red solid;}
    </style>
</head>
<body>
    <ul id="list">
         <li>
              <ul>
                  <li></li>
                  <li></li>
                  <li></li>
              </ul>
          </li>
         <li></li>
         <li></li>
    </ul>
    <ol>
         <li></li>
         <li></li>
         <li></li>
        </ol>
</body>
</html>

3.兄弟 M ～ N {}
当前M下的所有兄弟N标签
4.相邻 M + N {} 当前M下面相邻的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      div + h2 {backgroung:red;}
    </style>
</head>
<body>
      <div>这是一个段落</div>
      <h2>这是一个标题</h2>
    
</body>
</html>

7.属性选择器
　M[ attr ] {}
　代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      <div>[class] {background:red;}
      </style>
</head>
<body>
   <div>aaaaa</div>
   <div  class="box">bbbbb</div>
   <div  class="search">cccc</div>//带有class属性
</body>
</html>

注： 1. *=：部分匹配（只要search出现就可以选中）

div[class*=search]{background:red;}
<div  class="search">cccc</div>
<div  class="search-bottom">cccc</div>
／／注：仅为关键代码示例

= ：完全匹配
^ = : 起始匹配

 div[class^=search]{background:red;}
<div  class="search">cccc</div>
<div  class="search-bottom">cccc</div>
<div  class="bottom-search">cccc</div>
//注：只有前两个块变为红色
	仅为关键代码示例

$ = : 结束匹配
[ ][ ][ ]: 组合匹配*

PS：除过上述的选择器，还有伪类选择器，这里的相关知识点较多，将会另外写一篇博客介绍。