Help us understand the problem. What is going on with this article?

CSS勉強メモ 属性の指定方法

<section id="about">
      <h1 id="main" class="title box" style="color: skyblue;">Main</h1>
</section>
/* <h1>の指定方法 */
#about > #main.title{ color: pink;}
h1 { color: red !important;}
/* important>直接スタイルを書き込む>属性ランキングの順で適用される */
h1#main.box { color: yellow;}
section > #main.title { color: blue}
section#about > h1 {color: green;}

/* 全て書いた場合は[id],[class,属性,擬似クラス],[要素,擬似要素]の数で評価されて、前から値が大きいものが選ばれていき、同点の場合は後に書いた方でスタイルが決まる */

li:empty{
  background: skyblue;
}
li:not(:empty){
  background: skyblue;
}

main > h2:first-of-type{
  background: pink;
}
main > h2:last-of-type{
  background: pink;
}
main > h2:nth-of-type(3){
  background: pink;
} 
/* 指定する要素の〜番目にスタイルをつける */
/* 要素の種類も考慮したい時はnth-of-type */

h1::before,
h2::before{
  content: '- ';
}
h1::after,
h2::after{
  content: attr(data-subtitle);
}
.btn{
  width: 100px;
  background: skyblue;
  text-align: center;
  padding: 4px;
  color: white;
}
.btn:hover{
  opacity: 0.7;
  cursor: pointer;
  擬似クラスはカーソルが当たったときに適用されるクラス
}

main > :nth-child(3){
  background: pink;
} */
main > :nth-child(3n){
  nは自然数を入れてくれる
  background: pink; 
}

main > :nth-child(odd){
  background: pink;
}
main > :nth-child(even){
  background-color: skyblue;
}

main > :first-child{
  background: pink;
}
main > :last-child{
  background: skyblue;
}
u928212h
初めまして。 某ゼネコンで現場監督をしているものです。 現在、日々の業務改善をアプリを用いてできないか、さらにビジネス化を目指してプログラミングの勉強を2020年3月から始めました。 最終目標は日本の現場業務を効率化し、サービス残業をゼロにすることです!! どうぞよろしくお願い致します。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away