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

Lowky 发布于2019-08-29 16:32 / 842人阅读

摘要：架构基本选择器元素选择器通过元素名称定位页面元素类选择器通过元素的属性定位页面元素选择器通过元素的属性定位页面元素属性必须是唯一的通配符选择器匹配当前页面中所有元素元素选择器通过元素名称定位页面元素定位页面中一类元素选择器通过元素的属性定位

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!

GPU云服务器云服务器 css选择器基础选择器css 架构之坑系列 jsp 设置页面之

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113810.html

【静态页面架构】CSS之链接和图像

CSS架构一。链接: 链接元素:通过使用a元素的href属性设置跳转到指定页面地址 a{ color: blue; text-decoration: none; } a:hover{ cursor:default; text-decoration:...

jlanglang 2019-08-29 16:32 评论0 收藏0
前端性能优化

摘要：端优谈谈关于前端的缓存的问题我们都知道对页面进行缓存能够有利于减少请求发送，从而达到对页面的优化。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。这种方式主要解决了浅谈前端中的过早优化问题过早优化是万恶之源。优化向：单页应用多路由预渲染指南 Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一...

Dean 2019-08-21 18:19 评论0 收藏0
【静态页面架构】CSS之显示与溢出

摘要：架构显示与溢出显示属性以设置隐藏效果和元素类型设置当前元素为隐藏效果这种方式将元素设置为隐藏后，该元素不会再占有页面空间通过属性将元素显示将元素设置为块级元素将元素设置为内联元素将元素设置为行内元素属性以设置，元素显示或隐藏 CSS架构显示与溢出； 1.显示； display属性；以display设置隐藏效果和元素类型 div { widt...

tolerious 2019-08-29 16:34 评论0 收藏0
【静态页面架构】CSS之定位

摘要：架构浮动是以属性设置容器指定的位置当前元素设置为浮动后，只影响当前元素后面的所有元素的位置块级元素不再独占一行，多元素之间会水平方向排列设置浮动后，会从页面的文档流脱离默认宽度是父级宽度的高度是后者的所有元素高度之和左浮动宽度默认是 CSS架构 1.浮动；是以float属性设置容器指定的位置 div { width: 200px; ...

scq000 2019-08-29 16:34 评论0 收藏0
【静态页面架构】CSS之其它元素

摘要：架构其他元素块级元素与内联元素该元素独占一行只以垂直方向排列内联元素该元素不会独占一行，只以水平方向排列不能设置宽高行内块级元素该元素不会不会独占一行，还是水平方向排列，可设置宽高块级元素元素独占一行，以垂直方向排列内联元素元素不会独占一行 CSS架构其他元素；块级元素与内联元素；该元素独占一行只以垂直方向排列内联元素；该元素不会独占一行，只以水平方向排列(不能设置宽高) 行...

weakish 2019-08-29 16:32 评论0 收藏0