cssセレクタの分類


セレクタの分類


1、ワイルドカードセレクタ*


重み:0記号:*使用法:*{}
<style>
*{
      
background:red;
}
style>

2、ラベル選択器


重み:10命名:ラベル内class="name"用法:.name{}
<style>
.p2{
      
background:green;
}
style>
<body>
	<p>p1p>
	<p class="p2">p2p>
body>

3、属性選択器


ウェイト:10使用法:
  • [プロパティ]{}(このプロパティに対応するすべてのラベルを選択)
  • [属性=属性値]で、対応する属性値のラベル
  • を選択します.
    <style>
           [index]{
          
               background:darkorange;
           }
          [index="a1"]{
          
              background:darkorchid;
          }
    style>
    

    4、idセレクタ


    ウエイト:100の使用方法:
  • 開始ラベルにid="name"
  • を追加
  • style内で#name{}を用いる選択使用
  • .
    注意:idセレクタはclassセレクタとは異なり、例えばページにid=「name 1」と書かれている場合、このページには2番目に同じものが表示されてはいけません.これは規定です.id=「name 1」は一意です.
    <style>
        #p1{
          
          background:green;  
        }   
    style>
    <body>
    	<p id="p1" class="p1">  1p>
    body>
    

    5、サブセレクタ


    重み:組合せセレクタの和コネクタ:>(重み0)意味:親子関係、例えば次のdiv>h 1は選択したdivの中の息子要素を表し、h 1のラベルである
    <style>
          div>h1{
          
              background:green;
          }
    style>
    <body>
    	<div class="main">
    		<p>p1p>
    		<h1>h1h1>
    		<div>
    			<span>spanspan>
    		div>
    	div>
    body>
    

    6、子孫セレクタ


    ≪ウェイト|Weights|emdw≫:セレクタのウェイトの合計コネクタ:スペースの意味:子孫関係、すなわち または にかかわらず、子孫であれば選択できます.
    <style>
          div span{
          
              background:green;
          }
    style>
    <body>
    	<div class="main">
    		<div>
    			<span>spanspan>
    		div>
    		<span>spanspan>
    	div>
    body>
    

    7、グループ選択器


    重み:結合セレクタの和コネクタ:カンマ,意味:同じコードを抽出し、冗長性を減らす
    <style>
    .box1>p1,.box2{
          
               color:darkorange;
               width:100px;
               height:100px;
               background:green;
    }
    style>
    <body>
    	<div class="box1">
    		<p>p1p>
    	div>
    	<p class="box2">box2p>
    body>
    

    8、交差セレクタ


    ウェイトウェイト(Weight):結合されたセレクタの和記号:意味なし:複数のセレクタを結合したもの
    <style>
        .box1.current{
          
            background:green;
        }
    style>
    <body>
    	<div class="box1 current" >box1div>
    	<div class="box1">box1div>
    	<p class="current">p1p>