Teknologian jakaminen

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

CSS Tyylivalitsin, jota käytetään valitsemaan sivulta html-elementtejä CSS-tyylejen lisäämiseksi.

Lajittele renderöimällä suorituskyky korkeasta alhaiseen Jonka jälkeen:

ID Valitsin #id

Valitse elementit niiden id-attribuutin mukaan, kirjainkoolla on merkitystä

<p id="p1" >第一段</p>
1

#p1{
  color: red;
}
1
2
3

Mutta sen käyttöä ei suositella, koska:

• Tunnusvalitsimella on korkeampi prioriteetti, ja sen tyylin nollaaminen on hankalaa.
• Tunnusvalitsinta käyttää pääasiassa JS

luokan valitsin .class

Elementin class-attribuutin kauttatyyliValitun elementin luokan nimessä on isot ja pienet kirjaimet erotteleva

Suosituin CSS-valitsin on, että luokkavalitsimilla on vahva semantiikka ja niiden tyylit on helppo nollata.

<span class="important" >重点词汇</span>
1

.important{
  color: red;
  font-weight: bold;
}
1
2
3
4

Useita tyyliluokkia voidaan lisätä samaan elementtiin välilyönnillä erotettuina.

<span class="important big" >巨大的重点词汇</span>
1

.important {
  color: red;
  font-weight: bold;
}
.big {
  font-size: 60px;
}
1
2
3
4
5
6
7

tunnisteen valitsin 标签名

Valitse elementit tunnisteen nimien perusteella, kirjainkoolla ei ole merkitystä

<a href="https://www.baidu.com/" target="_blank" >百度</a>
1

a {
  text-decoration: none; /* 无文本装饰（消除默认的下划线） */
}
1
2
3

Ei suositella tunnisteen valitsimen heikon suorituskyvyn ja korkeiden ylläpitokustannusten vuoksi

jokerimerkkivalitsin *

Valitse sivulta kaikki html-elementit paitsi pseudoelementit. Sitä käytetään usein tyhjentämään selaimen oletustyyli, mutta sitä ei suositella, koska se kuluttaa suorituskykyä.

/* 清除所有html标签默认的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}
1
2
3
4
5

määritteen valitsin [属性]

Valitse elementit attribuuttien ja attribuuttien arvojen perusteella.

Pseudoluokan valitsin :状态名

Valitse elementit niiden eri tilojen perusteella

同一个标签，不同的状态，有不同的样式，就叫做“伪类”
1

Käytä pseudoluokan valitsimia listoissa

n tarkoittaa 0,1,2,3,4,5,6,7,8...(Se on virheellinen, kun n on pienempi kuin 1, koska n = 0 ei valita)

Käytä pseudoluokan valitsimia taulukoissa

• tr:nth-child(odd)：Vastaa taulukon rivejä 1, 3 ja 5, mikä vastaatr:nth-child(2n+1)。
• tr:nth-child(even): Vastaa taulukon rivejä 2, 4 ja 6, mikä vastaatr:nth-child(2n)。

• Käytännön esimerkki pseudoluokan valitsimesta

  • Käytä:nth-child()-komentoa seepraraitojen, reunojen kohdistuksen, määritetyn alueluettelon korostuksen ja dynaamisen luettelon mukautuvan asettelun toteuttamiseen
    https://blog.csdn.net/weixin_41192489/article/details/122089484

  • CSS toteuttaa dynaamisen näytön ja piilottamisen (ihana käyttö :checked ja :target)
    https://blog.csdn.net/weixin_41192489/article/details/126267866

  • Käytä: kohdistaa laajentaaksesi lisää, tiivistämiseen ja välilehtien vaihtamiseenhttps://blog.csdn.net/weixin_41192489/article/details/121969768

  • Käytä:paikkamerkki-näytetty saavuttaaksesi MaterialDesign-tyylisen vuorovaikutuksen
    https://blog.csdn.net/weixin_41192489/article/details/121976627

  • Käytä:placeholder-shown tarkistaaksesi nolla-arvon, ja kehote ei voi olla tyhjä.
    https://blog.csdn.net/weixin_41192489/article/details/121977510

  • :tarkistettu työvälineiden laajeneminen ja romahtaminen
    https://demo.cssworld.cn/selector/9/2-1.php

  • :tarkistettu työkoneiden välilehden vaihto
    https://demo.cssworld.cn/selector/9/2-2.php

  • :checked toteuttaa mukautettuja valintanappeja, valintaruutuja, kytkimiä, tarratarkistuksia ja materiaaliradion valintoja
    https://blog.csdn.net/weixin_41192489/article/details/122050069

  • Käytä muotoja :valid ja :invalid alkuperäisen lomakkeen vahvistuksen toteuttamiseen
    https://blog.csdn.net/weixin_41192489/article/details/122070084

  • Käytä :pakollinen ja :valinnainen toteuttaaksesi lomakkeen vahvistuskehotetekstiä
    https://blog.csdn.net/weixin_41192489/article/details/122072879

  • :focus-internal tools avattava luettelo
    https://blog.csdn.net/weixin_41192489/article/details/121959850

  • Kun syöttöruutu on tarkennettu, korosta edessä oleva tarra (katso linkin tapa 5)
    https://blog.csdn.net/weixin_41192489/article/details/121784196

  • Näytä suurennettu kuva viemällä hiiren osoitinta ja näytä suurennettu kuva napsauttamalla hiirtä
    https://blog.csdn.net/weixin_41192489/article/details/121944791

  • :empty piilottaa tyhjät elementit ja puuttuvat kentät älykkäitä vinkkejä
    https://blog.csdn.net/weixin_41192489/article/details/122086159

  • :only-child toteuttaa monitiladynaamisen latausanimaatiota
    https://blog.csdn.net/weixin_41192489/article/details/122088416

  • :fullscreen mahdollistaa napsautettujen kuvien koko näytön näytön
    https://blog.csdn.net/weixin_41192489/article/details/122328725

  Pseudoelementin valitsin ::

  Käytetään elementin osan valitsemiseen ja tyyliin koko elementin sijaan

  CSS2中伪元素采用单冒号前缀语法， CSS2.1中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀
  1

  ::before ja::after

  Sitä on käytettävä yhdessä content-attribuutin kanssa sisällön asettamiseen ennen ja jälkeen elementin
  https://blog.csdn.net/weixin_41192489/article/details/115100040

  Yleisesti käytettyjä käytännön esimerkkejä:

  • Lisää kuvakkeita ennen ja jälkeen elementtejä (::ennen ja ::jälkeen taika)
    https://blog.csdn.net/weixin_41192489/article/details/134858462
  • CSS käyttää taitavasti ::jälkeen ja ::ennen pystysuuntaisen luokkanavigoinnin toteuttamista
    https://blog.csdn.net/weixin_41192489/article/details/134885007
  • css käyttää taitavasti ::afteria välilehtien vaihtoanimaatioiden aikaansaamiseksi
    https://blog.csdn.net/weixin_41192489/article/details/134881852

  ::first-letter Nimikirjaimet

  <p>很久很久以前</p>
  <p>Long long ago</p>
  1
  2

  p::first-letter {
    font-size: 2em;
    color: red;
  }
  1
  2
  3
  4

  

  ::first-line ensimmäinen rivi

    <div style="width: 120px">
      <p>很久很久以前，有一个白发苍苍的老人</p>
    </div>
  1
  2
  3

  p::first-line {
    color: red;
  }
  1
  2
  3

  

  ::selection Valitse alue vetämällä hiirtä

  <p>很久很久以前，有一个白发苍苍的老人</p>
  1

  p::selection {
    color: red;
    background-color: yellow;
  }
  1
  2
  3
  4

  

  ::placeholder tekstin paikkamerkki

  <input placeholder="请输入" />
  1

  /* input 不写，则会选中页面所有元素的占位符 */
  input::placeholder {
    color: red;
  }
  1
  2
  3
  4

  

  Suhteen valitsin

  Valitse elementit elementtien välisten suhteiden perusteella

  jälkeläisten valitsin >

  Tunnisteen sisään kääritty ensimmäisen tason tagi on sen jälkeläinen

  <div>
      <p>我是div的儿子</p>
  </div>
  1
  2
  3

  div>p{
    color:red;
  }
  1
  2
  3

  jälkeläisten valitsin 空格

  Kaikki tunnisteen tagit ovat sen jälkeläisiä

    <div class="parent">
      <p class="red">我是子代（属于后代）</p>
      <p>我是子代（属于后代，但没有 .red）</p>
      <div>
        <div class="red">我是孙代（也属于后代）</div>
      </div>
    </div>
  1
  2
  3
  4
  5
  6
  7

  /* 所有属于.parent元素内部的.red元素都将被染成红色。*/
  .parent .red {
    color: red;
  }
  1
  2
  3
  4

  

  sisarusten valitsin ~

  Valitse määritetty elementti saman pääelementin altajälkeenKaikki saman tason elementit, niin tarkasti ottaen, pitäisi kutsua 后面兄弟选择器

  <div>
    <button>按钮1(不会变红)</button>
    <p>段落</p>
    <button>按钮2（会变红）</button>
  </div>
  1
  2
  3
  4
  5

  p ~ button {
    color: red;
  }
  1
  2
  3

  

  CSS nro 前面兄弟选择器 , voit simuloida toteutusta alla olevasta linkistä
  https://blog.csdn.net/weixin_41192489/article/details/121784196

  naapurin sisaruksen valitsin +

  Valitsee seuraavan elementin välittömästi seuraavan elementin

    <div class="parent">
      <p>段落</p>
      <button>按钮1</button>
      <button>按钮2</button>
    </div>
  1
  2
  3
  4
  5

  p + button {
    color: red;
  }
  1
  2
  3

  

  Risteyksen valitsin

  Valitse sivulta elementtejä, jotka vastaavat useita valitsimia samanaikaisesti

  • Valitsimien välillä ei ole välilyöntejä (välilyönnit ovat jälkeläisiä valitsimia)
  • Jos tunnisteen valitsin on olemassa, tunnisteen valitsin on asetettava ensin

      <p class="red">很久很久以前1</p>
      <p>很久很久以前2</p>
  1
  2

  /* 选中 p 标签中class值含 red 的元素 */
  p.red {
    color: red;
  }
  1
  2
  3
  4

  

  Liiton valitsin ,

  Useiden valittajien joukosta, niin kauan kuin yksi niistä on tyytyväinen, se valitaan.

  • Käytetään useiden valitsimien välillä , erillinen

   <p class="error">报错信息</p>
   <p class="important">重要信息</p>
   <p>其他信息</p>
  1
  2
  3

  .error,
  .important {
    color: red;
  }
  1
  2
  3
  4