当前位置: 首页 > 开发杂谈 >

#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!


相关文章:

  • Day 25-reverse terraform: terraformer,从 infrastructure 产生 .tf 内容
  • 亚马逊卖家必知的一个好的标题具备什么条件?
  • 如何免费写出好的 App description
  • 【Day26】Git 版本控制 - merge 发生冲突
  • 还在烦恼CSS flex怎麽调整吗?也许你该试试Chrome 90 的新功能 — flexbox Editor
  • Day 29 - 倒数第二篇的胡言乱语
  • [Angular] Day5. Lifecycle hooks
  • 跨境卖家的海外仓备货量要考虑哪些?
  • 外贸人如何应对交货延迟的问题呢
  • Day30 切版笔记 - 文字排版
  • TikTok电商直播的误区
  • 跨境电商如何享受出口退税政策红利?
  • 如何降低速卖通纠纷率
  • 跨境电商如何激活0数据页面,获得关键词排名和流量
  • 外贸人怎样寻找海外客户资料
  • 怎么获得菲律宾手机卡和接受短信验证码
  • vultr.com怎么申请退款教程和方法
  • 海外营销周报:Facebook应用下载量下降30%,TikTok在欧洲测试应用内购买…
  • VPS优惠:搬瓦工香港VPS补货/G口/KVM/月付9.9美元
  • DNS是什么?DNS有什么用?为什么要用DNS解析域名
  • 企业网站如何无损换域名
  • 俄取消商品知识产权限制 盗版游戏、电影等商标合法化
  • Gutenberg最新版如何添加导航间隔
  • 通过CloudFlare Partner计划使用cname接入CloudFlare免费CDN
  • 简单做WordPress网站的方法:最快最便宜的做外贸网站的方法
  • 最好用的云服务器推荐:什么云服务器稳定好用又便宜
  • Astra主题产品方案名称更新,附减价20%优惠码
  • 国外VPS服务器主机为什么比较便宜?
  • Python安装教程:怎么安装Python
  • Python入门教程:Python怎么写