CSS3选择符

作者: 六个周 | 来源:发表于2018-12-12 22:40 被阅读114次
今天对新知识的学习充满了疲惫,来点简单的小点心学习,对CSS3的选择器做一个小小的总结。
小黑板:CSS是Cascading Style Sheet(层叠样式表)的缩写,CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。

1.* :通用选择器。

我们一般的页面开发都会用到的一行代码:
{ margin: 0; padding: 0; }
这是最基本的清除默认CSS样式方法。

2.属性选择器。

1️⃣ a[lmz] { color: green; }
匹配具有某属性的标签,例如实例中是匹配具有lmz属性的a标签。
2️⃣ [class*=lmz] { color: #1f6053; }
属于属性选择器,匹配元素的属性class中所有含有lmz的标签。正则匹配
3️⃣[class^=lmz] { color: #1f6053; }
属于属性选择器,匹配元素的属性class中以lmz的标签。正则匹配
4️⃣[class$=.lmz] { color: #1f6053; }
匹配属性中以.lmz结尾的标签,正则匹配,也是属性选择器的一种
5️⃣[class~=lmz] { color: #1f6053; }
匹配属性中具有多个空格分隔的值、其中一个值等于“lmz”的元素

3.伪对象选择符。

before 和after是在选择的标签之前或者之后插入内容,一般用于清除浮动,但是对于IE6、IE7是不可用的

4.*:not(p) { color: green; }。

选择除了()中选择器之外的标签元素。

5.X:nth-child(n) | X:nth-last-child(n) | X:nth-of-type(n)

li:nth-child(3) { color: red; }
匹配X元素中从头数第几个标签,例如上面的代码是匹配的是第三个li标签。
li:nth-last-child(2) { color: red; }
与上一个选择器相反,这个选择器是倒序匹配第几个标签,上面的代码的意思是匹配倒数第二个li标签
ul:nth-of-type(3) { border: 1px solid black; }
与:nth-child()作用类似,但是仅匹配使用同种标签的元素
ul:nth-last-of-type(3) { border: 1px solid black; }
与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素

6.overflow

取值:

visible
对溢出内容不做处理,内容可能会超出容器。
hidden
隐藏溢出容器的内容且不出现滚动条。
scroll
隐藏溢出容器的内容,溢出的内容可以通过滚动呈现。
auto
当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。textarea元素的overflow默认值就是auto。
clip
与hidden一样,clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于,clip是一个完全禁止滚动的容器,而hidden仍然可以通过编程机制让内容可以滚动。

相关文章

  • css学习 第四天

    CSS组合选择符 CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选择器...

  • 一篇搞清CSS3新增选择符

    CSS3新增的选择符其实就是在CSS2选择符的基础上增加了一些,大的种类没变。具体新增如下 关系选择符新增: E ...

  • css组合选择符

    组合选择符说明了两个选择器之间的关系CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了四种组合方...

  • 前端面试题总结【8】:CSS面试必问点!

    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些? CSS 选择符:1.id选...

  • Hack、过渡与变形(变换)

    条件Hack 图片的修复 属性 选择符 CSS3过渡动画 css3圆角 阴影 透明度 运动曲线 图片文字遮罩 变形...

  • 2018-11-28

    ie6png的修复 条件Hack 属性Hack 选择符 CSS3过渡动画 css3圆角 阴影 透明度 运动曲线 图...

  • CSS3结构化伪类

    CSS2中就有第一项的选择符 CSS3又增加了一个可以选择最后一项的选择符: 还有专门针对只有一项的选择符:onl...

  • CSS3 :not() 制作最后一行li不添加边框

    来源:http://itssh.cn/post/925.html CSS3新增的:not()伪类选择符,匹配不含有...

  • CSS3选择符

    今天对新知识的学习充满了疲惫,来点简单的小点心学习,对CSS3的选择器做一个小小的总结。 小黑板:CSS是Casc...

  • 其他试题6~10

    6、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些? 7、列出display...

网友评论

    本文标题:CSS3选择符

    本文链接:https://www.haomeiwen.com/subject/ejhmhqtx.html