首页 > 其他分享 >css选择器

css选择器

时间:2023-04-19 10:14:44浏览次数:31  
标签:样式 class important 选中 选择器 css

1、id选择器

#id_name{}
  • 前缀#,后接选中html元素的id属性值
  • 选取单个

2、class选择器

.class_name{}
  • 前缀.,后接选中html元素的class属性值
  • 可以选择多个
  • class_name的第一个字符不能是数字

3、标签/元素选择器

label_name{}
  • 直接使用标签名称,比如p,h1
  • 可以选择多个

4、属性选择器

[属性 比较符 值]
[attr[~=][|=][^=][$=][*=]value]

5、包含选择器

选择器a 选择器b{}
  • 基于空格,选择器b在选择器a中的被选中,在之外的不选

6、子级选择器

选择器a>选择器b{}
  • 基于>字符,选择器b必须是选择器a的直接子代,或者说直接被包含时选中

7、兄弟选择器

选择器a~选择器b{}
  • 基于~字符,选择器b与选择器a同级,且在其之后时被选中
  • 可以选中多个

8、通用选择器

*{}
  • 选择全部元素

9、相邻选择器

选择器a+选择器b{}
  • 和兄弟选取器类似,但只选中一个

10、伪类

a:hover{}
  • 一般是链接的状态选择时使用

11、分组选择器

选择器a,选择器b{}
  • 表示选择了a,也选择了b
  • 为了减少代码,应该尽量使用分组选择器

12、css优先规则

  •  A 选择器都有一个权值,权值越大越优先;
  •  B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
  •  C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
  •  D 继承的CSS 样式不如后来指定的CSS 样式;
  •  E 在同一组属性设置中标有“!important”规则的优先级最大;
内联>内部>外部
id>class=伪类选择器=属性选择器>标签=伪元素选择器

13、!important 规则例外

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.使用 !important 不是一个好习惯,因为它改变了你样式表本来的级联规则,从而使其难以调试。

一些经验法则:

  • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
  • Only 只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important
  • Never 永远不要在全站范围的 css 上使用 !important
  • Never 永远不要在你的插件中使用 !important

标签:样式,class,important,选中,选择器,css
From: https://www.cnblogs.com/wd404/p/17332279.html

相关文章

  • css文本
    1、colorcolor:red;设置字体颜色2、text-aligntext-align:center;设置文本的水平对齐方式,可选项:center居中对齐,right向右对齐,left向左对齐,justify两端对齐3、文本修饰text-decoration:none;可选项:overline上划线,line-through删除线,underline下划线,none没有4、大小......
  • css-背景
    1、背景颜色background-color:red;background-color:#b0c4df;background-color:rgb(255,0,0);设置背景颜色,有三种值,十六进制、RGB方法、颜色名称在线颜色选择器:在线颜色选择器|RGB颜色查询对照表(jb51.net)2、背景图像background-img:url('bg.jpg');默认情况,图像进......
  • css字体
    1、font-family字体系列font-family:"TimesNewRoman",Times,serif;应该设置多个,以作为后备机制,如果浏览器不支持第一种字体,他将尝试下一种字体。字体系列的名称超过一个字,必须使用引号2、字体样式font-style:normal;可选项:normal正常,italic斜体,oblique倾斜的文字,和斜......
  • css一般设置
    1、链接a:link-正常,未访问过的链接a:visited-用户已访问过的链接a:hover-当用户鼠标放在链接上时a:active-链接被点击的那一刻超链接a标签具有四个状态,可以基于css选择器进行选择a:hover必须跟在a:link和a:visited后面a:active必须跟在a:hover后面一个常......
  • css盒子模型
    1、介绍所有HTML元素可以看作盒子,包括:外边距margin边框border内边距(填充)padding实际内容:显示文本和图像,指定元素的width和height属性实际就是内容的宽度和高度2、边框(1)border-style样式none:默认无边框dashed虚线边框solid实线边框double两个边框groove3D沟槽......
  • js 选择器操作相关
    Javascript知识【jQuery选择器】 https://blog.csdn.net/m0_64550837/article/details/126231445 CSS选择器https://blog.csdn.net/weixin_44214326/article/details/128093869 ......
  • css实现艺术字
    最近在写一个新的小活动,本来有涉及艺术字的标题,本来是想用图片展示的,后来面向百度编程的时候,发现可以使用css来实现效果及代码如下font-size:60rpx;color:#fff;text-shadow:005px#FF0200,0010px#727272;text-align:center;margin:30rpxau......
  • CSS3 Media Query CSS3媒介查询
    通过min-width的设置,我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下,为页面指定一个特定的样式表;max-width则反之如下面代码:<style> /*max-width宽度小于600px*/ @mediascreenand(max-width:600px){ .one{background:#F9C;} span.lt600{display:inline......
  • Element Plus错误警告 | Popper: Detected CSS transitions on at least one of the f
    这个错误的解决方案如下:1.禁用"computeStyles"修饰符的adaptive选项:这将允许平滑过渡,但可能会降低性能。禁用"computeStyles"修饰符的adaptive选项,可以在创建Popper实例时指定modifiers参数,并将computeStyles的adaptive属性设置为false。示例如下:import{create......
  • CSS引入方式及link和@import的区别
    1.概述1.1说明在项目开发中,我们经常使用css样式使页面丰富多彩,编写过程中,CSS有四种引入方式。 2.CSS引入方式2.1 引入方式一:内联样式内联样式(行内样式):直接在HTML标签中的style属性中添加CSS<divstyle="width:200px;height:200px;background:red;"></div>内联......