cssセレクタの分類

16186 ワード

セレクタの分類

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>

css単位

delphi呼び出しC#DLLプログラムセット