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标签.逗号前后可以是以上任意选择器,也可以是选择器的组合.

相关推荐
BillKu6 小时前
vue3 样式 css、less、scss、sass 的说明
css·less·sass·scss
乖女子@@@8 小时前
css3新增-网格Grid布局
前端·css·css3
Sapphire~11 小时前
重学前端013 --- 响应式网页设计 CSS网格布局
前端·css
二十雨辰12 小时前
歌词滚动效果
前端·css
dllmayday19 小时前
FontForge 手工扩展 iconfont.ttf
css·qt
BUG创建者1 天前
html获取16个随机颜色并不重复
css·html·css3
面向星辰1 天前
html中css的四种定位方式
前端·css·html
Async Cipher1 天前
CSS 权重(优先级规则)
前端·css
草字1 天前
css flex布局,设置flex-wrap:wrap换行后,如何保证子节点被内容撑高后,每一行的子节点高度一致。
前端·javascript·css
在芜湖工作的二狗子1 天前
如何用AI Agent提高程序员写作效率
css