01-css 选择器

-叮当猫

已于 2023-09-14 17:17:43 修改

阅读量44

点赞数 2

分类专栏： css 内容集合文章标签： css 前端

于 2023-09-13 16:42:05 首次发布

本文链接：https://blog.csdn.net/qq_43951465/article/details/132836723

版权

css 内容集合专栏收录该内容

2 篇文章 0 订阅

订阅专栏

选择器

基础选择器
复合选择器
- - 语法
  - 注意
属性选择器
- - 语法
伪类选择器
- - 语法
选择器的优先级
- - - - !important （慎用）：优先级最高，不可被覆盖

基础选择器

语法

类选择器

.类名{
属性名: 属性值；
属性名: 属性值；
}

ID选择器

 #id{  
       属性名: 属性值；
       属性名: 属性值；
      }

标签选择器

 标签名{  
       属性名: 属性值；
       属性名: 属性值；
      }

通配选择器

 *{  
       属性名: 属性值；
       属性名: 属性值；
      }

注意

类名不唯一，多个元素可以指定相同的类名，来设计统一的格式。
ID 唯一
通配符用于选中当前页面的所有标签

示例

//html
<body>
    <p class="aaa" id="bbb"> this is an example.</p>
</body>
//css
<style>
.aaa{
    color: aqua;
    font-size: 15px;
}

#id{
    color: aqua;
    font-size: 15px;
   }
p{
    color: aqua;
    font-size: 15px;
}
*{
    color: aqua;
    font-size: 15px;
    }
    
</style>

复合选择器

语法

交集选择器

条件一条件二{
属性名: 属性值；
属性名: 属性值；
}

并集选择器

 条件一，条件二{  
       属性名: 属性值；
       属性名: 属性值；
      }

后代选择器

 祖先名 后代名{  
       属性名: 属性值；
       属性名: 属性值；
      }

父子选择器

 父>子{  
       属性名: 属性值；
       属性名: 属性值；
      }

兄弟选择器

 兄+弟{  
       属性名: 属性值；
       属性名: 属性值；
      }

注意

在表格中， td 是 tbody 的子元素，而不是 table 的子元素

属性选择器

语法

[属性名] 包含该属性
[属性名=属性值] 包含该属性且等于此值
[属性名^=属性值] 以此值开头
[属性名$=属性值] 以此值结尾
[属性名*=属性值] 包含此值

伪类选择器

语法

child 伪类：按照所有的子元素数

div>li:first-child
div>li:nth-child(3) // div 下的第三个子元素且是li
div>li:nth-child(n) // 选中div 下的每一个li
div>li:nth-child(2n/even) // 选中偶数位
div>li:nth-child(2n+1/ood) // 选中奇数位

of-type 伪类：按照选中元素顺序数

div>li:first- of-type
div>li:nth-of-type(3) // div 下的第三个li
div>li:nth-of-type(n) // 选中div 下的每一个li
div>li:nth-of-type(2n/even) // 选中偶数位
div>li:nth-of-type(2n+1/ood) // 选中奇数位