【静态页面架构】CSS之选择器

2021-02-13 01:20

阅读：482

标签：select content 高亮 -- 速度 normal 问题 love sci

CSS架构

基本选择器

元素选择器:通过元素名称定位页面元素
类选择器:通过元素的class属性定位页面元素
ID选择器:通过元素的ID属性定位页面元素;id属性必须是唯一的
通配符选择器:匹配当前页面中所有元素


爱新觉罗
呼延觉罗
犬夜叉

层级选择器

后代选择器: 祖先空格后代 { 声明块 }后代元素包括父级元素
子选择器:父级 > 子级 { 声明块 }下一个子级元素一类
相邻兄弟选择器:匹配指定元素的下一个相邻兄弟元素
普通兄弟选择器:匹配指定元素的后面所有兄弟元素

    
犬夜叉
   
    七龙珠
    九龙珠
   
   拳皇97
   拳皇97
   拳皇97

属性选择器:

[属性名称]通过属性名称来对属性值的筛选

 
犬夜叉
九龙珠
海贼王
木叶村
七龙珠

组合选择器

并集选择器:中间要以逗号分开

结果是并集

交集选择器:

中间没有逗号分开
结果是交集


犬夜叉
七龙珠
海贼王

伪类:是以在属性名后面加上:hover进行鼠标悬停


呼延觉罗

伪元素

经常用的几种伪元素:
是以p（选择器)::after(伪元素)
before和after:


爱新觉罗

first-letter:匹配指定元素文本内容中的第一个字母


I Love You.
爱新觉罗

first-line:匹配指定元素文本内容的第一行文本内容


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, accusantium amet at consequatur dolorem eos iure laudantium modi nostrum obcaecati odit pariatur praesentium quisquam recusandae unde. Debitis iste nisi obcaecati!

selection:匹配指定元素被高亮的文本内容


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, aspernatur consequatur consequuntur, dolorem doloremque facere id illo incidunt, magnam placeat provident sit suscipit! Cupiditate dolores earum fuga necessitatibus praesentium, ut!

【静态页面架构】CSS之选择器

标签：select content 高亮 -- 速度 normal 问题 love sci

原文地址：https://www.cnblogs.com/baimeishaoxia/p/13024074.html

上一篇：JS事件循环机制(宏任务，微任务)

下一篇：windows

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：【静态页面架构】CSS之选择器
文章链接：http://soscw.com/index.php/essay/54687.html

亲，登录后才可以留言！

【静态页面架构】CSS之选择器

CSS架构

呼延觉罗

犬夜叉

七龙珠

拳皇97

拳皇97

拳皇97

七龙珠

呼延觉罗

爱新觉罗

I Love You.

爱新觉罗

评论

热门文章

推荐文章

最新文章

置顶文章