#5 Types of CSS Selector

After the previous 2 articles of CSS basic introducttion, let's talk about 5 Types of CSS Selector today...

1. Tag Name Selector

body{
	font-size:16;font-family:"Arial"
}
h3{
	font-size:24;text-decoration:underline;
}

2. Class Selector

  • Add a “dot” before the class. Also, we can connect a specific tag before the class if we want it to be the exclusive use of the tag.
div.content{
	padding:10px;border:1px dashed #888888;
}

https://ithelp.ithome.com.tw/upload/images/20210905/20130362jTl2JN3X1R.png

3. id Selector

  • Add a “#” before the id
#btn{
	border:1px solid #888888;
	background-color:#ffffff;padding:5px;
}

4. Pseudo-classes Selector

  • Often used with other selectors
  • Example1. #:hover--for button clicking design
#btn:hover{
	background-color:#888888;
}

https://ithelp.ithome.com.tw/upload/images/20210905/20130362QMBmsmsP92.png

  • Example2. #:focus--for getting cursor’s focus
input:focus{
	border:2px solid #ff0000;
}

https://ithelp.ithome.com.tw/upload/images/20210905/201303622nkigxoRVI.png

5. Cascading Selector

  • Often used with other selectors
.content1 a{
	color:#0000ff;
}
.content2 a{
	color:#008800;
}

https://ithelp.ithome.com.tw/upload/images/20210905/20130362Y9Mhrv4DQR.png


Music of Today: Peaches covered by 吱吱郭芝吟ChihChih


Like/Share/Follow

If you guys find this article helpful, please kindly do the writer a favor — LIKE this article./images/emoticon/emoticon12.gif
Feel free to comment and share your ideas below to learn together!


<<:  #5 -Modules and require()

>>:  #4. Covid 19 Tracker(Vue版)

【Day28】React Query 简易说明及使用 (´∀`)

What's React Query !? React Query 是一个适合用於React Hoo...

Nice day 28 (iphone10s 功能挖掘)-常用资料选择器

前言 嗨嗨!笔者在这跟大家晚安,不知各位今天过得如何啊!有没有利用客制化的读书规划工具,来不断的提升...

怎么恢复安卓系统被删除的短信呢?

您可能会因为错误的点击而意外删除重要的短信,或者在恢复出厂设置、系统崩溃、Android 更新、ro...

连续 30 天 玩玩看 ProtoPie - Day 20

突然注意到信件夹出现ProtoPie 寄来的信,分享更多不同的教学。 很好奇他们是怎麽找到这些人,并...

[C 语言笔记--Day04] C 语言的 function call 如何被组合语言实作

这篇文章是用 x86-64 的架构作为例子,因为多数人的电脑是用 x86-64 的架构 只要依照 在...