CSS 选择器的常见用法

CSS选择器的主要功能就是选中⻚⾯指定的标签元素.选中了元素,才可以设置元素的属性.

CSS选择器主要分以下⼏种:

  1. 标签选择器

  2. class选择器

  3. id选择器

  4. 复合选择器

  5. 通配符选择器

html 复制代码
<body>
    <div class="font32"> 我是一个div,class为front32</div>
    <div class="font32"> 我是一个div,class为front32</div>
    <div><a href="#"> 我是一个div</a></div>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#">ccc</a></li>
    </ul>
    <ol>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ol>
    <button id="submit">提交</button>
</body>

1.标签选择器

html 复制代码
<style>
//选择所有的a标签,设置设置颜色为红色
    a{
        color: red;
    }
//选择所有的div标签,设置颜色为绿色
    div{
        color: green;
    }
</style>

2.类选择器

⼀个类可以被多个标签使⽤,⼀个标签也能使⽤多个类(多个类名要使⽤空格分割,这种做法可以让代码更好复⽤)

html 复制代码
<style> 
//选择class为font32的元素,设置字体大小为32px
    .font32 {
        font-size: 32px;
     }
</style>

3.Id选择器

• id是唯⼀的,不能被多个标签使⽤(是和类选择器最⼤的区别)

html 复制代码
//选择id 为submit的元素,设置颜色为红色 
#submit {
     color: red;
 }

4.通配符选择器

html 复制代码
//设置页面所有元素,颜色为红色 
* {
    color: red;
 }

5.复合选择器

html 复制代码
//只设置ul标签下的li标签下的a标签,颜色为红色
ul li a {
     color:blue;
}
  1. 以上三个标签选择器 ul li a 中的任意,都可以替换成类选择器,或者id选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合

  2. 不⼀定是相邻的标签,也可以是"孙⼦"标签

  3. 如果需要选择多种标签,可以使⽤ , 分割,如 p, div { } 表⽰同时选中p标签和div标签.逗号前后可以是以上任意选择器,也可以是选择器的组合.

相关推荐
像风一样自由202010 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
拾光拾趣录12 小时前
HTML行内元素与块级元素
前端·css·html
奶丝兔蜜柚13 小时前
物理像素&逻辑像素&DPR
css
还是大剑师兰特19 小时前
CSS面试题及详细答案140道之(41-60)
前端·css·大剑师·css面试·css示例
精神小伙2号20 小时前
css position
前端·css·html
PanZonghui21 小时前
移动端适配全景指南:从原理到实战的完整解决方案
前端·javascript·css
PanZonghui21 小时前
告别布局困惑:彻底搞懂CSS标准盒模型与IE盒模型
前端·css
qq_589568101 天前
javaweb学习开发代码_HTML-CSS-JS
前端·javascript·css·javaweb
北北~Simple2 天前
css 如何实现大屏4个占位 中屏2个 小屏幕1个
前端·css
han_2 天前
CSS关键字:initial、revert、unset傻傻分不清
前端·css·html