CSS中的各种各样挑选器与款式优先选择级小结

日期:2020-10-18 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

优先选择级:由高到低(从上到下)

!important
内联(1,0,0,0)
id: (0,1,0,0)
类:(0,0,1,0)
伪类/特性
元素:(0,0,0,1)
通配符
类挑选器
class="web",好几个元素能够有着同1个类名

id挑选器
id="web",具备唯1性

伪类挑选器
CSS伪类(pseudo-class)是加在挑选器后边的用来特定元素情况的重要字。

连接有关
a:link 未浏览的连接
a:visited 已浏览的连接
a:hover 电脑鼠标挪动到连接上
a:active 选定的连接
:target 能用于选择当今主题活动的总体目标元素,href="#222"(內容自动跳转)

表模块素有关
:focus 伪类在元素得到聚焦点时向元素加上独特的款式
:disabled 配对每一个被禁用的元素(大多数用在表模块素上)。
:enabled 表明任何开启的(enabled)元素
:checked 配对每一个已被选定的 input 元素(只用于单选按钮和复选框)(仅有opera适用)

父子有关
:empty 意味着沒有子元素的元素,只测算元素结点及文字(包含空格),注解、运作命令不考虑到在内。

:first-child 意味着了某个元素,这个元素是它父元素的的第1个子元素

CSS Code拷贝內容到剪贴板
  1. :first-of-type   
  2. :last-of-type  

:nth-clild(n) 挑选器配对属于其父元素的第 N 个子元素,无论元素的种类
n 能够是数据、重要词或公式(2,an + b,odd)(n 是计数器(从 0 刚开始),b 是偏位值)
:nth-last-child(n)倒数
:nth-of-type(n)

特性挑选器
E[attr]
E[attr=value]
E[attr~=value] 挑选器用于选择特性值中包括特定语汇的元素

E[attr^=value] 挑选器配对特性值以特定值开始的每一个元素。
父子关联
A E 任何是元素A的子孙后代元素E (子孙后代连接点指A的子连接点,子连接点的子连接点,以此类推)
A > E 任何元素A的子元素(立即)

CSS Code拷贝內容到剪贴板
  1. E[attr*=value]   
  2. E[attr$=value]  

根据关联的挑选器

弟兄关联
B + E 任何元素B的下1个弟兄元素E(立即)
B ~ E B元素后边的有着相互父元素的弟兄元素E


.class1.class2 另外包括class1和class2特性的元素
F#id 具备某id的F元素


E,F 全部E或F元素

伪元素
E:first-line 向文字的首行加上独特款式。
E:first-letter 向文字的第1个字母加上独特款式。
E:before 在元素以前加上內容。
E:after 在元素以后加上內容。