current position:Home>CSS selector

CSS selector

2021-08-27 10:07:20 noBug123

This is my participation 8 The fourth of the yuegengwen challenge 23 God , Check out the activity details :8 Yuegengwen challenge

  1. tag chooser .

Label selectors usually select a HTML Elements , such as p、h1、em、a, It could even be html In itself .

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
 Copy code 
  1. ID Selectors .
#intro {font-weight:bold;}
 Copy code 
  1. Class selectors .
.class-name {font-weight:bold;}
 Copy code 
  1. wildcard *.

seeing the name of a thing one thinks of its function : It means to match all , Apply a style to all .

*{ color: red; }
 Copy code 
  1. descendent selector .

Connect multiple selectors with spaces , Indicates that the back edge is a descendant of the front edge selector , Can alternate generations .

The derived selector allows you to determine the style of a label based on the context of the document . By using derived selectors properly , We can make HTML Code gets Cleaner .

li strong {
    font-style: italic;
    font-weight: normal;
 Copy code 
  1. Child Selector .

With > Connect multiple selectors , Indicates that the back edge is a child element of the front edge selector , Can't alternate generations .

 .parent>.child {
    color: red;
 Copy code 
  1. Adjacent selector .

With + Connect multiple selectors , It means to follow ... Brother element of .

The adjacent sibling selector can select the element immediately after another element , And they have the same parent element .

.aa + p {margin-top:50px;}// Choose classa name by aa After the element of p Elements 
 Copy code 
  1. Group selector .

Connect multiple selectors with commas , At the same time, select these non associated selectors .

.aa, .bb, .cc {margin-top:50px;}// Match to class name  by  aa,bb,cc Add style to the elements of .
 Copy code 
  1. Attribute selector .

With [] To select the element with corresponding information according to the attribute name and attribute value of the element , Can write multiple [] To multi-attribute matching , It can also be matched according to the specific attribute value , More complex matches can also be made through regularization .

 choice   Yes href  Property anchor (a  Elements ) Application style :

a[href] {color:red;}
 Copy code 
  1. pseudo-classes .

Start with a single colon , You can find that you can't get the nonexistence with a regular selector DOM The information in the tree , You can use multiple pseudo classes at the same time .

a:link {
  color: #FF0000;
 Copy code 
  1. Pseudo elements .

Start with a double colon , You can show behavior like real elements , But not the real element , Only one pseudo element can be used at the same time .

// Set all  <p>  The initial style of the text in the element 
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
 Copy code 

copyright notice
author[noBug123],Please bring the original link to reprint, thank you.

Random recommended