选择器

标签选择器

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

类选择器 (可以多类名)

.类名  {   属性1:属性值1; 属性2:属性值2; 属性3:属性值3;
}标签 中  <p class='类名'></p>

id选择器

#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }标签中  <p id="id名"></p>

通配符选择器

* {margin: 0;                    /* 定义外边距*/padding: 0;                   /* 定义内边距*/
}
  • 尽量少用通用选择器 *
  • 尽量少用 ID 选择器
  • 不使用无具体语义定义的标签选择器 div span

复合选择器

后代选择器 (子子孙孙)

父级 子级{属性:属性值;属性:属性值;}

子元素选择器(只选亲儿子)

父级>子级{属性:属性值;属性:属性值;}

交集选择器

第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格

并集选择器

用于集体声明 ,逗号隔开的

链接伪类选择器(重点)

  • a:link /* 未访问的链接 */
  • a:visited /* 已访问的链接 */
  • a:hover /* 鼠标移动到链接上 */
  • a:active /* 选定的链接 */
    顺序尽量不要颠倒 按照 lvha 的顺序
    以上CSS选择器 详见 CSS选择器及CSS书写位置

CSS3选择器

属性选择器

1.[title]

button[disabled] {cursor: default
}

2.[class=“demo”]

span[class^=black] {color: lightgreen;
}

结构伪类选择器

  1. nth-child(n) 选择父元素里面的第几个子元素,不管是第几个类型
  2. nth-of-type(n) 选择指定类型的元素

伪元素选择器

::before和::after

  • beforeafter 必须有 content 属性
  • before 在内容前面,after 在内容后面
  • beforeafter 创建的是一个元素,但是属于行内元素
  • 创建出来的元素在 Dom 中查找不到,所以称为伪元素
  • 伪元素和标签选择器一样,权重为 1

选择器优先级(权重)

继承 或 通配符选择器 0
元素选择器1 伪元素选择器1
class选择器10 伪类选择器10 属性选择器10
id选择器100
内联样式的权重1000
!improtant 权重最大

CSS面试须知--选择器相关推荐

  1. CSS面试须知--显示模式及三大特性

    显示模式 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 块级元素:block div h1-h6 hr p ul ol li dl table address bl ...

  2. CSS面试须知--样式属性

    属性书写顺序: 布局定位属性:display / position / float / clear / visibility / overflow(建议 display 第一个写,关系到模式) 自身属 ...

  3. CSS面试须知--关于图片

    常见的图片格式: jpg图像格式: JPEG(.JPG)对色彩的信息保留较好,高清,颜色较多,产品类的图片经常用jpg格式的 gif图像格式: GIF格式最多只能储存256色,所以通常用来显示简单图形 ...

  4. CSS面试须知--盒子模型、浮动及定位

    盒子模型: 将HTML页面中的布局元素看作是一个矩形的盒子 一个css盒子从外到内可以分成四个部分:margin(外边距),border(边框),padding(内边距),content(内容) 内容 ...

  5. CSS样式中选择器+盒子模型+定位+浮动

    CSS样式中选择器+盒子模型+定位+浮动 一.选择器 选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...

  6. HTML CSS 面试题解(不定期更新)

    1. HTML基础强化 HTML重要属性 a [href,target] img [src,alt] table td [colspan,rowspan] form[target,method,enc ...

  7. CSS样式----标记选择器

    一,概念 CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页信息内容分离的一种标记性语言. 二,标记选择器 <style> ...

  8. 可以对同一个html元素定义不同的样式,CSS的多种选择器的使用.ppt

    什么是样式选择器是样式选择器当定义一条样式规则时必须指定受这条样式规则作用的网页元素在一条规则中定义的网页元素就是选择器也就是选择该样式规则作用于的网页元素选择器有标签就用选择器选择符就是赋予内部或外 ...

  9. CSS中的选择器之类选择器和id选择器

    1.css中的选择器: 1.类选择器,又叫class选择器 2.id选择器 3.html元素选择器(又叫标签选择器) 4.通配符选择器 5.伪类选择器 6.组合选择器(多元素选择器,子元素选择器,后代 ...

最新文章

  1. Luck Club-SDT 去中心化的游戏
  2. CacheDependency缓存依赖里面的 absoluteExpiration(绝对到期时间),弹性到期时间(slidingExpiration)...
  3. 笔记本电脑下载python视频教程-Python的Jupyter Notebook入门教程
  4. 快手,字节面试题,将IP地址转换成整数类型,再转换回来。C++代码
  5. eclipse配置本地连接 hadoop
  6. java实现泛型检索_高级Java泛型:检索泛型类型参数
  7. 利用计算机卸载,电脑使用痕迹彻底清理工具(无影无踪WYWZ)
  8. Linux笔记-rpm与yum的基本概念
  9. 职场中必需修炼的七项意识
  10. ue4渲染速度太慢_UE4实时渲染,不用合成。第一部完全UE4渲染动画片是这样炼成的~...
  11. linux如何回到下一级,linux如何返回上一级目录
  12. Android系统中设置TextView的字符间距
  13. Bootstrap4表单验证(纯JavaScript方法)
  14. mysql用存储过程更新表_如何创建存储过程以更新MySQL表中的值?
  15. 肽基脯氨酰异构酶底物:1926163-51-0,WFY-pSer-PR-AMC
  16. 箱型图/盒图 jupyter Notebook
  17. cmmi实践访谈测试ppt_CMMI3级访谈问题(最新)
  18. 机器人三大定律的发展和演进概述
  19. 数字是有绝对值的,负数的绝对值是它本身取反,非负数的绝对值是它本身。 请定义一个方法,方法能够得到小数类型数字的绝对值并返回。 请定义方法并测试
  20. 【转载】热电偶和热电阻的区别

热门文章

  1. Win11的Credential Manager怎么打开?
  2. 微信网址遮罩引导法升级版,微信自动跳转默认浏览器打开HTML
  3. 解决群晖 “由于系统可用存储空间不足,您将无法登录“ 的问题
  4. 泰国8日自助游攻略(普吉+清迈)
  5. Vmware虚拟机怎么备份?2种简单方法!
  6. 他们竟用后台数据偷窥喜欢的女性!
  7. python中线条颜色_python – 在pandas中指定线条颜色
  8. 浅谈精准提取日志中的URL
  9. 苹果手机3D-Touch这个功能,其实是吃鸡神器!
  10. vue页面跳转打开新的窗口