Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 元素样式/选择器及权重
Blogger Information
Blog 11
fans 0
comment 0
visits 6921
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
元素样式/选择器及权重
**
Original
504 people have browsed it

元素样式来源

浏览器默认：用户代理样式

当页面没有设置任何样式时，浏览器将采用浏览器的默认代理样式，如下：

  1. <body>
  2.     <h1>Hello word</h1>
  3. </body>

用户自定义样式

用户自己设置页面内容的显示样式

  1. <body>
  2.     <h1 style="color: red">Hello word</h1>
  3. </body>

基本及上下文选择器

基本选择器

  1. <body>
  2.     <h2>item1</h2>
  3.     <h2 title="hello">item2</h2>
  4.     <h2 id="a">item3</h2>
  5.     <h2 id="a">item4</h2>
  6.     <h2 class="b">item4</h2>
  7.     <style>
  8.       /* 基本选择器：根据元素自身来选择 */
  9.       /* 1. 标签选择器  */
  10.       h2 {
  11.         color: red;
  12.       }
  13.       /* 2. 属性选择器 */
  14.       h2[title="hello"] {
  15.         color: green;
  16.       }
  17.       /* id:用于唯一元素 */
  18.       h2[id="a"] {
  19.         color: blue;
  20.       }
  21.       /* id:用于多个元素 */
  22.       h2[class="b"] {
  23.         color: violet;
  24.       }
  25.       h2#a {
  26.         color: cyan;
  27.       }
  28.       h2.b {
  29.         color: orange;
  30.       }
  31.       /* 3. 群组选择器 */
  32.       h2#a,
  33.       h2.b {
  34.         background-color: yellow;
  35.       }
  36.       /* 4. 通配符选择器 */
  37.       html body * {
  38.         background-color: gray;
  39.       }
  40.     </style>
  41.   </body>

上下文选择器

  1. <body>
  2.     <ul class="list">
  3.       <li class="item">item1</li>
  4.       <li class="item second">item2</li>
  5.       <li class="item">
  6.         item3
  7.         <ul class="inner">
  8.           <li>item3-1</li>
  9.           <li>item3-2</li>
  10.           <li>item3-3</li>
  11.         </ul>
  12.       </li>
  13.       <li class="item">item4</li>
  14.       <li class="item">item5</li>
  15.       <li class="item">item6</li>
  16.       <li class="item">item7</li>
  17.       <li class="item">item8</li>
  18.     </ul>
  19.     <style>
  20.       /* 1. 子元素 > */
  21.       .list > li {
  22.         border: 1px solid #000;
  23.       }
  24.       /* 2. 后代元素 > */
  25.       .list li {
  26.         border: 1px solid #000;
  27.       }
  28.       /* 3. 相邻兄弟 */
  29.       .item.second + * {
  30.         background-color: red;
  31.       }
  32.       /* 4. 选择后面所有兄弟 */
  33.       .item.second ~ * {
  34.         background-color: yellow;
  35.       }
  36.     </style>
  37.   </body>

选择器的权重

  1. <body>
  2.     <h1 class="title" id="active">Hello</h1>
  3.     <style>
  4.       /* 1,1,2 */
  5.       body h1.title#active {
  6.         color: yellow;
  7.       }
  8.       /* 0,1,2 */
  9.       body h1.title {
  10.         color: red;
  11.       }
  12.       /* 0,0,2 */
  13.       body h1 {
  14.         color: green;
  15.       }
  16.       /* 0,0,1 */
  17.       h1 {
  18.         color: darkorange;
  19.       }
  20.       /* 三个权重的位置（从右到左）
  21.       第一位：标签数量
  22.       第二位：class数量
  23.       第三位：id数量 */
  24.     </style>
  25.   </body>

总结：id: 因为权重太高，代码弹性弱，一般不用；标签数量又太少，而class可以任意命名，所以，在实际生产环境，尽可能用class。

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post