LoginSignup
0
0

More than 1 year has passed since last update.

<style>でCSSを設定する

Last updated at Posted at 2021-05-08
src/App.vue
<style>
  div{
    border:1px solid blue;
  }
</style>
src/LikeNumber.vue
<style>
  div{
    border:1px solid red;
  }
</style>

20210508-141646.png

基本:

(1)divと設定した時点で全てのdivに適応される。
(2)赤になっているのはCSSはあとから設定したものが指定され前のものは打ち消される。

20210508-142139.png

src/App.vue
<style scoped>
  div{
    border:1px solid red;
  }
</style>

表示させたいファイルを限定するには「style scoped」とする。
*その属性を持ったセレクターのあるものに対して色をつける。つまり指定された属性を持ったタグを指定してCSSを効かせていく。

<参考>

20210508-143020.png

div外側のものと内側のものがあり
内側のdiv属性がdata-v-276663f0
外側のdiv属性がdata-v-7ba5bd90
それぞれ選んで色をつけることができます。
ただし2つ目divについてはdata-v-276663f0とdata-v-7ba5bd90が指定されている。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0