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>