Κοινή χρήση τεχνολογίας

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

CSS Επιλογέας στυλ, που χρησιμοποιείται για την επιλογή στοιχείων html στη σελίδα για την προσθήκη στυλ CSS.

Ταξινόμηση ανά απόδοση απόδοσης από υψηλή σε χαμηλή Ακολουθούμενη από:

ταυτότητα Εκλέκτορας #id

Επιλέξτε στοιχεία με βάση το χαρακτηριστικό id τους, με διάκριση πεζών-κεφαλαίων

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

#p1{
  color: red;
}
1
2
3

Όμως η χρήση του δεν συνιστάται γιατί:

• Ο επιλογέας αναγνωριστικού έχει υψηλότερη προτεραιότητα και δεν είναι βολικό να επαναφέρετε το στυλ.
• Ο επιλογέας id χρησιμοποιείται κυρίως από την JS

επιλογέας τάξης .class

Μέσω της ιδιότητας class του στοιχείουστυλΤο όνομα κλάσης του επιλεγμένου στοιχείου κάνει διάκριση πεζών-κεφαλαίων

Ο πιο συνιστώμενος επιλογέας CSS είναι ότι οι επιλογείς κλάσεων έχουν ισχυρή σημασιολογία και είναι εύκολο να επαναφέρουν τα στυλ.

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

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

Μπορούν να προστεθούν πολλές κατηγορίες στυλ στο ίδιο στοιχείο, χωρισμένες με κενά.

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

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

επιλογέας ετικετών 标签名

Επιλέξτε στοιχεία με τα ονόματα των ετικετών τους, χωρίς διάκριση πεζών-κεφαλαίων

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

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

Δεν συνιστάται λόγω κακής απόδοσης επιλογέα ετικέτας και υψηλού κόστους συντήρησης

επιλογέας μπαλαντέρ *

Επιλέξτε όλα τα στοιχεία html στη σελίδα εκτός από ψευδοστοιχεία Χρησιμοποιείται συχνά για την εκκαθάριση του προεπιλεγμένου στυλ του προγράμματος περιήγησης, αλλά δεν συνιστάται επειδή καταναλώνει απόδοση.

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

επιλογέας χαρακτηριστικών [属性]

Επιλέξτε στοιχεία με βάση τα χαρακτηριστικά και τις τιμές των χαρακτηριστικών Τα χαρακτηριστικά δεν κάνουν διάκριση πεζών-κεφαλαίων και οι τιμές χαρακτηριστικών είναι διάκριση πεζών-κεφαλαίων.

Ψευδοεπιλογέας κλάσης :状态名

Επιλέξτε στοιχεία με βάση τις διαφορετικές καταστάσεις τους

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

Χρησιμοποιήστε επιλογείς ψευδο-κλάσεων σε λίστες

Το n σημαίνει 0,1,2,3,4,5,6,7,8...(Δεν είναι έγκυρο όταν το n είναι μικρότερο από 1, επειδή το n = 0 δεν θα επιλεγεί)

Χρησιμοποιήστε επιλογείς ψευδο-κλάσεων σε πίνακες

• tr:nth-child(odd)：Ταιριάζει με τις σειρές 1, 3 και 5 του πίνακα, που ισοδυναμεί μεtr:nth-child(2n+1)。
• tr:nth-child(even): Ταιριάζει με τις σειρές 2, 4 και 6 του πίνακα, που ισοδυναμεί μεtr:nth-child(2n)。

• Πρακτικό παράδειγμα επιλογέα ψευδο-κλάσης

  • Χρησιμοποιήστε:nth-child() για να εφαρμόσετε ρίγες ζέβρας, στοίχιση άκρων, επισήμανση λίστας καθορισμένου εύρους και προσαρμοστική διάταξη δυναμικής λίστας
    https://blog.csdn.net/weixin_41192489/article/details/122089484

  • Το CSS υλοποιεί δυναμική εμφάνιση και απόκρυψη (η υπέροχη χρήση των :checked και :target)
    https://blog.csdn.net/weixin_41192489/article/details/126267866

  • Χρήση: στόχευση για περισσότερη επέκταση, σύμπτυξη και εναλλαγή καρτελώνhttps://blog.csdn.net/weixin_41192489/article/details/121969768

  • Χρήση:εμφανίζεται το σύμβολο κράτησης θέσης για την επίτευξη αλληλεπίδρασης στυλ MaterialDesign
    https://blog.csdn.net/weixin_41192489/article/details/121976627

  • Use:placeholder-shown για να επαληθεύσετε τη μηδενική τιμή και η προτροπή δεν μπορεί να είναι κενή.
    https://blog.csdn.net/weixin_41192489/article/details/121977510

  • :checked υλοποιεί επέκταση και κατάρρευση
    https://demo.cssworld.cn/selector/9/2-1.php

  • :checked tools εναλλαγή καρτελών
    https://demo.cssworld.cn/selector/9/2-2.php

  • :checked υλοποιεί προσαρμοσμένα κουμπιά επιλογής, πλαίσια ελέγχου, διακόπτες, ελέγχους ετικετών και επιλογές ραδιοφώνου υλικού
    https://blog.csdn.net/weixin_41192489/article/details/122050069

  • Χρησιμοποιήστε τα :valid και :invalid για να εφαρμόσετε επικύρωση εγγενούς φόρμας
    https://blog.csdn.net/weixin_41192489/article/details/122070084

  • Χρησιμοποιήστε τα :required και :optional για την εφαρμογή του κειμένου προτροπής επαλήθευσης φόρμας
    https://blog.csdn.net/weixin_41192489/article/details/122072879

  • :focus-within implements αναπτυσσόμενη λίστα
    https://blog.csdn.net/weixin_41192489/article/details/121959850

  • Όταν το πλαίσιο εισόδου είναι εστιασμένο, επισημάνετε την ετικέτα μπροστά (δείτε τη μέθοδο 5 στο σύνδεσμο)
    https://blog.csdn.net/weixin_41192489/article/details/121784196

  • Περάστε το ποντίκι για να εμφανιστεί η μεγεθυμένη εικόνα και κάντε κλικ στο ποντίκι για να εμφανιστεί η μεγεθυμένη εικόνα
    https://blog.csdn.net/weixin_41192489/article/details/121944791

  • Το :empty κρύβει κενά στοιχεία και έξυπνες συμβουλές πεδίων που λείπουν
    https://blog.csdn.net/weixin_41192489/article/details/122086159

  • Το :only-child εφαρμόζει κινούμενα σχέδια δυναμικής φόρτωσης πολλαπλών καταστάσεων
    https://blog.csdn.net/weixin_41192489/article/details/122088416

  • : Η πλήρης οθόνη επιτρέπει την προβολή σε πλήρη οθόνη των εικόνων στις οποίες έγινε κλικ
    https://blog.csdn.net/weixin_41192489/article/details/122328725

  Επιλογέας ψευδοστοιχείων ::

  Χρησιμοποιείται για την επιλογή και το στυλ ενός μέρους ενός στοιχείου και όχι ολόκληρου του στοιχείου

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

  ::before και::after

  Πρέπει να χρησιμοποιηθεί μαζί με το χαρακτηριστικό content για να ορίσετε περιεχόμενο πριν και μετά το στοιχείο Για λεπτομέρειες, βλ
  https://blog.csdn.net/weixin_41192489/article/details/115100040

  Πρακτικά παραδείγματα που χρησιμοποιούνται συνήθως:

  • Προσθέστε εικονίδια πριν και μετά τα στοιχεία (η μαγεία του ::πριν και ::μετά)
    https://blog.csdn.net/weixin_41192489/article/details/134858462
  • Το CSS χρησιμοποιεί έξυπνα τα ::after και ::prefore για να εφαρμόσει την πλοήγηση κάθετης κατηγορίας
    https://blog.csdn.net/weixin_41192489/article/details/134885007
  • Το css χρησιμοποιεί έξυπνα το ::after για να επιτύχει κινούμενη εικόνα αλλαγής καρτελών
    https://blog.csdn.net/weixin_41192489/article/details/134881852

  ::first-letter Αρχικά

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

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

  

  ::first-line πρώτη σειρά

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

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

  

  ::selection Σύρετε το ποντίκι για να επιλέξετε την περιοχή

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

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

  

  ::placeholder σύμβολο κράτησης θέσης κειμένου

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

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

  

  Επιλογέας σχέσεων

  Επιλέξτε στοιχεία με βάση τις σχέσεις μεταξύ των στοιχείων

  επιλογέας απογόνων >

  Η ετικέτα πρώτου επιπέδου που είναι τυλιγμένη σε μια ετικέτα είναι ο απόγονός της

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

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

  επιλογέας απογόνων 空格

  Όλες οι ετικέτες μέσα σε μια ετικέτα είναι οι απόγονοί της

    <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

  

  αδερφός επιλογέας ~

  Κάτω από το ίδιο γονικό στοιχείο, επιλέξτε το καθορισμένο στοιχείομετάΌλα τα στοιχεία του ίδιου επιπέδου, τόσο αυστηρά μιλώντας, θα πρέπει να ονομάζονται 后面兄弟选择器

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

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

  

  CSS αρ 前面兄弟选择器 , μπορείτε να ανατρέξετε στον παρακάτω σύνδεσμο για να προσομοιώσετε την υλοποίηση
  https://blog.csdn.net/weixin_41192489/article/details/121784196

  επιλογέας αδερφού γείτονα +

  Επιλέγει το επόμενο στοιχείο αμέσως μετά από ένα στοιχείο

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

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

  

  Επιλογέας διασταύρωσης

  Επιλέξτε στοιχεία στη σελίδα που αντιστοιχούν σε πολλούς επιλογείς ταυτόχρονα

  • Δεν υπάρχουν κενά μεταξύ των επιλογέων (τα κενά είναι επιλογείς απόγονος)
  • Εάν υπάρχει επιλογέας ετικέτας, πρέπει να τοποθετηθεί πρώτος ο επιλογέας ετικέτας

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

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

  

  Επιλογέας της Ένωσης ,

  Μεταξύ των πολλαπλών επιλογέων, εφόσον ένας από αυτούς είναι ικανοποιημένος, θα επιλεγεί.

  • Χρησιμοποιείται μεταξύ πολλαπλών επιλογέων , ξεχωριστός

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

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