前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >5-css选择器

5-css选择器

作者头像
达达前端
发布2020-05-18 16:36:29
2490
发布2020-05-18 16:36:29
举报
文章被收录于专栏:达达前端

标签选择器

通过标签的名字,修改css样式

代码语言:javascript
复制
div{
    width: 200px;
    height: 300xp;
}

通配符选择器

*选择页面中所有的元素

代码语言:javascript
复制
* {
    margin: 0;
    padding: 0;
}

一级子元素选择器

选择某个父元素的直接子元素

后代选择器是选择父元素的所有子孙元素,一级子元素原则只选择第一级子元素,不会再向下查找元素

代码语言:javascript
复制
.box > p {
    background-color: red;
}

id选择器

通过id查找页面中唯一的标签,用#表示id

代码语言:javascript
复制
#dada {
    width: 200px;
    height: 200px;
}

class选择器

通过特定的class来查找页面中对应的标签

代码语言:javascript
复制
.box{
    width: 200px;
    height: 300px;
}
<div class="box"></div>

伪类选择器

:hover鼠标移入某个元素

代码语言:javascript
复制
.box:hover {
    color: red;
}

:before在某个元素的前面插入内容

代码语言:javascript
复制
div:before {
    content: '-dadaqianduan';
    background-color: yellow;
    color: red;
}

:afer在某个元素的后面插入内容

代码语言:javascript
复制
div:after{
    content: '-dadaqianduan';
    color: red;
}

群组选择器

  • 可以对多个不同的选择器设置相同的样式
代码语言:javascript
复制
.box, .box1, .box2 {
    width: 200px;
    height: 300px;
}

选择器的优先级

当有不同的选择器对同一个对象进行样式指定时,并且两个选择器有相同的属性被赋予不同的值时。

通过测算那个选择器的权重值最高,应用哪一个选择器的样式

权重计算方式

  • 标签选择器:1
  • class选择器:10
  • id选择器:100
  • 行内样式:1000
  • !important最高级别,提高样式权重,拥有最高级别

注意:

如果两个选择器的权重值一样高,应用距离对象最近的css样式

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档