Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 元素样式及选择器
Blogger Information
Blog 34
fans 0
comment 0
visits 19963
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
元素样式及选择器
OC的PHP大牛之路
Original
341 people have browsed it

元素的样式

颜色、字体、背景可继承
优先级：自定义>继承>默认

  1. 内联样式：style属性，适用于当前特定的某个元素

    1. <body>
    2.  <h1 style="color:red">xxx</h1>
    3.  <h1 style="color:red">xxx</h1>
    4.  <h1 style="color:red">xxx</h1>
    5. </body>

  2. 文档样式：<style></style>标签，适用于当前html文档

    1. <body>
    2.  <h1 >xxx</h1>
    3.  <h1 >xxx</h1>
    4.  <h1 >xxx</h1>
    5.  <style>
    6.      h1{
    7.          color: red;
    8.      }
    9.  </style>
    10. </body>

  3. 外部样式：<link rel="stylesheet" href="css文件">首选

    1.  <link rel="stylesheet" href="01.css">
    2. </head>
    3. <body>
    4.  <h1 >xxx</h1>
    5.  <h1 >xxx</h1>
    6.  <h1 >xxx</h1>
    7. </body>

选择器

基本选择器

  1. 标签选择器
    标签选择器
    html:
    1.  <link rel="stylesheet" href="01.css">
    2. </head>
    3. <body>
    4.  <h1 >xxx1</h1>
    5.  <h1 >xxx2</h1>
    6.  <h1 >xxx3</h1>
    7.  <h1 >xxx4</h1>
    8.  <h1 >xxx5</h1>
    9.  <h1 >xxx6</h1>
    10. </body>
    css:
    1. /* 标签选择器 */
    2. h1{
    3.  color: red;
    4. }

2.属性选择器id# class.
属性选择器
html

  1.     <link rel="stylesheet" href="01.css">
  2. </head>
  3. <body>
  4.     <h1>xxx1</h1>
  5.     <h1 title="welcome">xxx2</h1>
  6.     <h1 class="three">xxx3</h1>
  7.     <h1 id="active">xxx4</h1>
  8.     <h1>xxx5</h1>
  9.     <h1>xxx6</h1>
  10. </body>

css

  1. /* 标签选择器 */
  2. h1{
  3.     color: red;
  4. }
  6. /* 属性选择器 */
  7. h1[title="welcome"]{
  8.     color:green;
  9. }
  11. /* h1[class="three"]{  */
  12.     /* color: blue;  */
  13.  /* }   */
  14. h1.three{
  15.     color: blue;
  16. }
  18. /* h1[id="active"]{ */
  19. /*     color: blueviolet; */
  20. /* } */
  21. h1#active{
  22.     color: blueviolet;
  23. }

3.群组选择器,
群组选择器
html

  1.     <link rel="stylesheet" href="01.css">
  2. </head>
  3. <body>
  4.     <h1>xxx1</h1>
  5.     <h1 title="welcome">xxx2</h1>
  6.     <h1 class="three">xxx3</h1>
  7.     <h1 id="active">xxx4</h1>
  8.     <h1 id="hello">xxx5</h1>
  9.     <h1 class="world">xxx6</h1>
  10. </body>

css

  1. /* 标签选择器 */
  2. h1{
  3.     color: red;
  4. }
  6. /* 属性选择器 */
  7. h1[title="welcome"]{
  8.     color:green;
  9. }
  11. /* h1[class="three"]{  */
  12.     /* color: blue;  */
  13.  /* }   */
  14. h1.three{
  15.     color: blue;
  16. }
  18. /* h1[id="active"]{ */
  19. /*     color: blueviolet; */
  20. /* } */
  21. h1#active{
  22.     color: blueviolet;
  23. }
  25. /* 群组选择器 */
  26. h1#hello,h1.world{
  27.     background-color: aqua;
  28. }

4.通配选择器*
通配选择器
!important用于临时提权，用于调试
html

  1.     <link rel="stylesheet" href="01.css">
  2. </head>
  3. <body>
  4.     <h1>xxx1</h1>
  5.     <h1 title="welcome">xxx2</h1>
  6.     <h1 class="three">xxx3</h1>
  7.     <h1 id="active">xxx4</h1>
  8.     <h1 id="hello">xxx5</h1>
  9.     <h1 class="world">xxx6</h1>
  10.     <h2>大家看这里</h2>
  11. </body>

css

  1. /* 标签选择器 */
  2. h1{
  3.     color: red;
  4. }
  6. /* 属性选择器 */
  7. h1[title="welcome"]{
  8.     color:green;
  9. }
  11. /* h1[class="three"]{  */
  12.     /* color: blue;  */
  13.  /* }   */
  14. h1.three{
  15.     color: blue;
  16. }
  18. /* h1[id="active"]{ */
  19. /*     color: blueviolet; */
  20. /* } */
  21. h1#active{
  22.     color: blueviolet;
  23. }
  25. /* 群组选择器 */
  26. h1#hello,h1.world{
  27.     background-color: aqua;
  28. }
  30. /* 通配选择器 */
  31. body *{
  32.     background-color: grey !important;
  33. }

上下文选择器

1.子元素>
html

  1.     <link rel="stylesheet" href="demo.css">
  2. </head>
  3. <body>
  4.     <ul class="list">
  5.     <li class="item">item1</li>
  6.     <li class="item">item2</li>
  7.     <li class="item">item3</li>
  8.     <li class="item">item4</li>
  9.     <li class="item">item5</li>
  10.     <li class="item">item6</li>
  11.     <li class="item">item7</li>
  12.     <li class="item">item8</li>
  13.     </ul>
  14. </body>

css

  1. /* 1.子元素 */
  2. .list>.item{
  3.     border: 1px solid;
  4. }

2.后代元素空格
html

  1.     <link rel="stylesheet" href="demo.css">
  2. </head>
  3. <body>
  4.     <ul class="list">
  5.     <li class="item">item1</li>
  6.     <li class="item">item2</li>
  7.     <li class="item">item3
  8.         <ul>
  9.             <li class="item">item3-1</li>
  10.             <li class="item">item3-2</li>
  11.             <li class="item">item3-3</li>
  12.         </ul>
  13.     </li>
  14.     <li class="item">item4</li>
  15.     <li class="item">item5</li>
  16.     <li class="item">item6</li>
  17.     <li class="item">item7</li>
  18.     <li class="item">item8</li>
  19.     </ul>
  20. </body>

css

  1. /* 1.子元素 */
  2. .list>.item{
  3.     border: 1px solid;
  4. }
  6. /* 2.后代元素 */
  7. .list .item{
  8.     border: 1px solid;
  9. }

3.相邻兄弟+
html

  1.     <link rel="stylesheet" href="demo.css">
  2. </head>
  3. <body>
  4.     <ul class="list">
  5.        <li class="item">item1</li>
  6.        <li class="item">item2</li>
  7.        <li class="item">item3</li>
  8.        <li class="item">item4</li>
  9.        <li class="item five">item5</li>
  10.        <li class="item">item6</li>
  11.        <li class="item">item7</li>
  12.        <li class="item">item8</li>
  13.     </ul>
  14. </body>

css

  1. /* 1.子元素 */
  2. .list>.item{
  3.     border: 1px solid;
  4. }
  6. /* 2.后代元素 */
  7. .list .item{
  8.     border: 1px solid;
  9. }
  11. /* 3.相邻兄弟 */
  12. .list>.item.five {
  13.     background-color:aqua;
  14. }
  15. .list>.item.five + *{
  16.     background-color: aquamarine;
  17. }

4.所有兄弟~
html

  1.     <link rel="stylesheet" href="demo.css">
  2. </head>
  3. <body>
  4.     <ul class="list">
  5.        <li class="item">item1</li>
  6.        <li class="item">item2</li>
  7.        <li class="item">item3</li>
  8.        <li class="item">item4</li>
  9.        <li class="item five">item5</li>
  10.        <li class="item">item6</li>
  11.        <li class="item">item7</li>
  12.        <li class="item">item8</li>
  13.     </ul>
  14. </body>

css

  1. /* 1.子元素 */
  2. .list>.item{
  3.     border: 1px solid;
  4. }
  6. /* 2.后代元素 */
  7. .list .item{
  8.     border: 1px solid;
  9. }
  11. /* 3.相邻兄弟 */
  12. .list>.item.five {
  13.     background-color:aqua;
  14. }
  15. .list>.item.five + *{
  16.     background-color: aquamarine;
  17. }
  19. /* 4.所有兄弟 */
  20. .list>.item.five ~ *{
  21.     background-color: blueviolet;
  22. }

选择器的权重

(0,0,0)表示选择器因子的权重，
对应(百位<id>,十位<class>，个位<tag>)

增加权重的方法：
1.增加标签（可以是父级标签），这样就可以不依
序，如html body h1{xxx}

2.增加代码，如.title{xxx}可增加至.title.go {xxx}

注：尽量少用或者不用id,权重过大

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