CSSでは、要素のスタイルを定義する必要があります。まず、この要素を選択する必要があります。インターネットで多くの記事を読み、教師の話の本質と組み合わせて、より一般的に使用されるセレクターを整理し、あなたと共有します。ハハは一緒に勉強して一緒に進歩します！
目次
ワイルドカードセレクター
（*）
すべての要素が選択されていることを示します。
*{
margin: 0;
padding: 0;
}
/*设置所有的HTML标签的外边距和内边距为0*/
IDセレクター
(#ID)
要素にid属性を追加し、スタイルシートで＃を使用して要素を選択します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
height: 50px;
width: 100px;
background-color: #FFFF00;
}
</style>
</head>
<body>
<div id="box1">
I am box1
</div>
</body>
</html>
クラスセレクター
（.className）
スタイルを設定する必要がある要素のタイプにクラス属性を追加してから、.aaを使用して要素のタイプを選択します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{
color: #FFFFFF;
background-color: blue;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="aa">I am one</div>
<div class="aa">I am two</div>
<div class="aa">I am three</div>
</body>
</html>
ラベルセレクター
ラベル名を直接使用して選択します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: coral;
width: 200px;
height: 60px;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
</div>
<span class="pig">Hello, I am a pig. I don't have any decorations because I'm not a p tag</span>
</body>
</html>
運用結果は
はは…お気に入りの写真をダウンロードして遊ぶことができます
子孫セレクター
(父元素 子元素)
要素の子孫を選択します。これは息子または孫になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1 a{
background-color: #FF7F50;
}
img{
width: 350px;
height: 300px;
}
</style>
</head>
<body>
<div id="box1">
<a href="###">I am the son of box1</a>
<ol>
<a href="###">I am the grandson of the box1</a>
</ol>
</div>
<span class="pig">Hello, I am a pig. I don't have any decorations because I'm not an a tag</span>
<img src="img/pig.jpg"/>
</body>
</html>
運用結果
子セレクター
(>)
記号は>で、孫とその子孫ではなく、息子だけが選択されます。（これと子孫の違いに注意してください）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1>a{
background-color: #FF7F50;
}
#box1>p{
background-color: #FF7F50;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
<a href="###">I am the son of box1</a>
<ol>
<a href="###">I am the grandson of the box1</a>
</ol>
</div>
<span class="pig">Hello, I am a pig. I don't have any decorations because I'm not a p and a tag</span>
</body>
</html>
運用結果
コンビネーションセレクター
個々のセレクターをコンマで区切ることは、これらのセレクターの選択結果の結合です。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a,p,div,span{
color: red;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
<a href="###">I am the son of box1</a>
<ol>
<a href="###">I am the grandson of the box1</a>
</ol>
</div>
<span class="pig">Hello, I am a pig. I have a style because I use the combination selector</span>
</body>
</html>
運用結果
疑似クラスセレクター（強調）
：
a:link{
/*未访问状态*/
}
a:visited{
/*已访问状态*/
}
a:hover{
/*鼠标悬停状态*/
}
a:active{
/*激活选定状态（鼠标点击未释放时）*/
}
注：この順序は変更できません。
覚えやすいです：「LOVEHATE」
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a:link{
color: black;
}
a:visited{
color: yellow;
}
a:hover{
color: red;
}
a:active{
color: green;
}
</style>
</head>
<body>
<a href="https://www.qq.com/">我是腾讯，点点我</a>
</body>
</html>
隣人の兄弟セレクター
隣接するセレクター
+
+記号の後の（隣接する）ものが影響を受けます
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h2+p{
color: red;
}
</style>
</head>
<body>
<div id="Jay">
<h2>兰亭序</h2>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
</div>
</body>
</html>
ブラザーセレクター
~
兄弟は影響を受けますが、1人ではありません
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h2~p{
color: red;
}
</style>
</head>
<body>
<div id="Jay">
<h2>兰亭序</h2>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
</div>
</body>
</html>
属性セレクター
语法：标签名[属性名]{规则}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a[href] {
color:red;}
</style>
</head>
<body>
<div id="Jay">
<h2>兰亭序</h2>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p>
<a href="https://baike.baidu.com/item/%E5%85%B0%E4%BA%AD%E5%BA%8F/2879867?fr=aladdin">兰亭序，点我</a>
</div>
</body>
</html>
これは私が編集したすべての一般的に使用されるセレクターです。それがあなたに役立つなら、あなたの貴重な小さな手形を残してくださいハハハ、いいね+コメント+フォローへようこそ！一緒に勉強し、一緒に進歩します。学ぶことで人生が美しくなります！
