CSSにおけるセレクタ、積層スタイルシートの書き方

セレクタ

        class   div  
         div[class]{
               color：red;
                     }
         class     
        [class]{
             color:red;
              }
      class         ym   
        [class^=ym]{
             color:red;
             }
    class      v  
       [class$=v]{
            color=:red;
                    }
     div     div name    div1
        div[name="div1"]{
            color:orange;
                }
       controls     
       [controls]{
        color:red;
}
          data   
      [data]{
            color：red；
            }
    class     v-     v   
       [class|=v]{
            border:10px solid red;
        }
        
    class  ，  class   ，     mo
        [class~=mo]{
            color:yellow;
        }
        
    class                m     
        [class*=m]{
            color:orange;
        }
---------     ------------
<div class="mydiv" name="div1">div aaaaadiv>
<p class="myp"> p  bbbbp>
<p>p-pbpbpbp>
<div class="mudiv2">div-sssssdiv>
<a href="#" class="mya mo"> a-cccca>
<div>div-ddddddiv>
<li class="myli1" data>li-eeeeeli>
<li class="meli2">li-ieieieili>
<video class="m-v-ideo" src="#" controls>video>
<div class="v-do">div-mmdiv>
<div class="v">div-hhhdiv>
<div class="m-o-v">sdiv>
<div class="am mo me">div-modiv>
<div class="mo me">div-s-modiv>

タイプセレクタ

       p        
    p：first-of-type{
            color：red;
               }
      div     （1， div  ，2。         ）
        div:last-of-type{
            border:1px solid orange;
        }
        
         p  
        p:nth-of-type(3){
            color:red;
        }
        
          p  
        p:nth-last-of-type(1){
            color:red;
        }
                p    
        p:only-of-type{
            color:orange;
        }
-------     -----------
<div class="mydiv" name="div1">div aaaaadiv>
<p class="myp"> p  bbbbp>
<p>p-pbpbpbp>
<div class="mudiv2">div-sssssdiv>
<a href="#" class="mya mo"> a-cccca>
<div>div-ddddddiv>
<li class="myli1" data>li-eeeeeli>
<li class="meli2">li-ieieieili>
<p>p-cccp>
<p>p-dddp>
<a href="#">ssa>

コンストラクション擬似クラスセレクタ

             p:  
            :        
            first:   
            last：    
            child:   
            nth：  
            nth-child:  
            nth-last-child:  
      p        （   p  ）
            p:first-child{
               color:red;
            }
            ，      （   p  ）
          p:nth-child(2){
            color:green;
        }
     p          （     p  ）
        p:last-child{
              color:blue;
           }
        p         
    p:only-child{
            color:orange;
        }
              
     p:nth-last-child(2){
            background-color:#ddd;
        }
-------     --------
  <div>
            <h3>    h3>
            <p>       p>
            <p>       ：       ，    p>
            <p>           p>
            <h2>  br  h2>
        div>
        <div>
            <p>     -P  p>
        div>

アンカーポイントのtarget運用

 h3             ，     
        h3:target{
            color:blue;            
        }
--------     ---------
  <ul>
        <li><a href="#a1">1Fa>li>
  ul>
 <h3 id="a1">      h3>
   <ul>
        <li>111>li>
  ul>

checkedデフォルト値の運用

（ input              ）
   input:checked{
            box-shadow: 2px 2px 5px 4px steelblue;
            color:red;
        }
--------     ---------
<input name="like[]" type="checkbox" checked value="1">  
<input name="like[]" type="checkbox" value="0">   

<input name="sex" type="radio">  
<input name="sex" type="radio" checked>  

Inputの後にフローティングを設定する

      input，span               
           input,span{float:left;}
     input    span          
        input+span{display: none;}
   input[name=username]         ，
        span        ，
          ，   1  ，    ，
         input[name=username]:focus+span{
             display: block;
             color:red;
             border:1px solid red;
         }
---------     ---------
<span>   span><input type="text" name="username"><span>     6   span>

CSS積層スタイルシート

     p                p       
          p：first-letter{
              color:red;
              }
            
     div：first-line{
         color：red;
         }
             （placeholder）
    input:placeholder{
            color:green;
        }
              
        div::selection{
            background-color:pink;
        }
              
  input:placeholder{
            color:green;
        }
  --------     -------
  <p>         p>
        <p>Hello worldp>
        <div>CSS3       (Pseudo-Element Selectors)       (:)      (::)         (Pseudo-Classes Selectors)，          。div>        
        <input type="text" name="username" value="" placeholder="        ">
   h3          ：
        h3        
        h3:before{
            content:"    ";
            color:red;
        }
   h3          
        h3:after{
            color:blue;
            content:"       ";
        }
        （ span     ）
   span:after{
            content:"";
            margin:0 10px;
            border-left:1px solid #ddd;
        }