css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器

伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点特点 1.默认是 inline 元素 2.必须包含 content 属性 3.content 属性的值 : 字符串或者CSS的函数(url(), attr(), counter()) 多个字符串使用空格连接注意事项: 规范要求是用::, 实际开发使用: 为了支持IE低版本浏览器. 使用场景: 1.清除浮动 e:after{ content: ""…

css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

后代选择器祖先元素后代元素{ } 子元素选择器(直接子元素选择器) 父元素>子元素{ } 兄弟选择器元素+兄弟元素(紧邻该元素之后的下一个兄弟元素) 所有兄弟元素选择器元素~兄弟元素(该元素之后的所有兄弟元素) <!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8">…

（4）《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型；div与span；<a>元素的链接色；伪类

1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif-----------这个系列包括有衬线的字体,很像新闻报纸的文字排版. monospace-这个系列的字体包含固定宽度的字符(即每个字母在水平方向所占的宽度都是相同的),主要用于显示软件代码示例.(代码很重视对齐.缩进,所以对宽度要求高) cursive-------这个系列的字体包含看似手写的字体…

CSS选择器详解（伪类）转 http://blog.csdn.net/Panda_m/article/details/50084699

CSS选择器详解之伪类伪类对大小写不敏感结构伪类选择器结构伪类是CSS3新增的类型选择器,利用DOM树实现元素过滤,通过文档结构的相互关系来匹配元素,可以减少class和id属性的定义,使文档变得更加简洁. :root 选择元素所在文档的根元素.在(X)HTML文档中,根元素始终是html元素. :not() 否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素. e.g. HTML: <body> <div id="header&q…

CSS之 :before && :after的用法，伪类和伪元素的区别

一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before{content:'you before'; color:red;} <div class="before"> me</div> 在这里我们给伪元素 :before 添加了属性 content,并赋值为 you before.我们来看效果: //在指定元素的内容 m…

E:in-range伪类选择器与E:out-of-range伪类选择器

E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),且实际输入值在该范围内时使用的样式.E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内(通常通过min属性值与max属性值来限定),但实际输入值在该范围之外时使用的样式.代码清单19-27为一个E:in-range伪类选择器与E:out-of-range伪类选择器的使用示例.示例页面中包含一个数值输入控件(type属性值为number的input元素…

清除系统默认样式，文本样式,高级选择器(权重),边界圆角，a标签的四大伪类，背景图片

清除系统默认样式大多系统预定义标签,有默认样式,不满足实际开发需求,反倒影响布局通常清除系统样式,利于开发 body,h1-h6,p,table { margin:; } ul { margin:; padding:; list-style:none; #清除列表样式 } a { text-decoration:none; #清除a标签下划线 color:black; # 设置a标签字体颜色 } 文本样式简写: font: 字重字体大小/行高字族 …

css清除浏览器默认样式

css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/reset/ License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, a…

CSS样式表及选择器相关内容(二)-伪类与伪元素选择器

伪类与伪元素选择器归纳: 一.伪类选择器(伪类以":"开头,用在选择器后,用于指明元素在某种特殊的状态下才能被选中) 1.a标签伪类选择器,其他标签类似 eg: <style type="text/css"> /*设置a标签未访问样式*/ a:link{ /*coral:珊瑚色*/ color: coral; } /*设置标签访问后样式*/ a:visited{ color:red; } /*设置鼠标悬停a标签时的样式*/ a:hov…

CSS 高级：尺寸、分类、伪类、伪元素

CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度. CSS 伪类:用于向某些选择器添加特殊的效果. CSS 伪元素:用于将特殊的效果添加到某些选择器. CSS 尺寸属性 CSS 尺寸属性允许你控制元素的高度和宽度.同样,还允许你增加行间距. 属性描述 height 设置元素的高度. line-height 设置行高. max-height…

CSS躬行记（2）——伪类和伪元素

一.伪类选择器伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器不会出现在HTML文档中(有几个例外,如:lang.::placeholder等).并且它的关键字大小写不敏感,也就是说empty和EMPTY完全相同.伪选择器分为两种:伪类选择器和伪元素选择器.注意,伪选择器会以一个或两个冒号(:)开头,并且如果要与其它选择器组合使用,那么只能与类型选择器(即元素…

CSS篇-样式表、选择器、权重、伪类

CSS定义 CSS:Cascading Style Sheet(层叠样式表) // 写法选择器 { 属性名: 属性值; } CSS样式表 (1)三种样式表使用 // 内联样式 <div style="width: 100px; height: 100px;"></div> // 内部样式表 <style type="text/css"> div { width: 100px; height: 100px; } </styl…

css选择器用法，使用css定位元素，css和xpath元素定位的区别

css定位元素 1.什么是css? CSS(Cascading Style Sheets)层叠样式表,是一种语言,用来描述html或者xml的显示样式.在css语言中有css选择器,在selenium中同样适用. 提示:在selenium中相比较xpath,更推荐使用css选择器,因为css速度更快 2.css定位方法 driver.find_element_by_css_selector() 3.css定位常用策略 id选择器,通过id属性定位 class选择器,通过class属性定位元素选…

css宽度+字体+颜色+边框+文本+光标+伪类选择器

常用属性: width:宽 height:高 min-width:最小宽度 :可以设置如果宽度变小了,有个滑动效果(常常在我们布局的过程中需要去设置) min-height;最小高度 max-width:最大宽度 max-height:最大高度溢出隐藏:overflow:hidden; 设置滚动条:overflow:scroll; overflow:auto;超出自动会生成滚动条在这里科普一下浏览器默认的字体大小为16像素:16px px(pixel) 我们开发常用12,…

CSS入门(定位之浮动定位、伪类之鼠标悬停、光标修改和透明度修改和列表样式)

一.定位所为定位,实际上就是定义元素框相对于其正常位置,应该出现在哪儿定位就是改变元素在页面上的默认位置分类: 普通流定位(元素默认的定位方式) 浮动定位相对定位绝对定位固定定位 1.普通流定位文档流是页面元素默认的定位方式块级:从上到下排列(独占一行) 行级:从左到右排列(不独占一行) 2.浮动定位如果将元素的定位方式设置了浮动定位那么具有以下几个特点 1.浮动元素会脱离文档流,其他未浮动的元素要上前补位 2.浮动元素会停靠在父元素的左边或者右边,或者停靠在其他浮动元素的边缘…

理解是最好的记忆方法之 CSS中a链接的4个伪类为何有顺序

在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之外的效果. 大部分人,都会用自己的方式,对这个顺序死记硬背. 熟记顺序,无疑是写样式时最快捷的方法,牛人们的记忆方法也是五花八门. 我见过有酱婶的:lv的包包hao,这倒是实话. 比较奇葩的,我在baidu上输入lvha,竟然自动关联出鹿晗. 还有歪果仁们,则戏称LvHa为爱恨原则. 记是记住了,但…

清除浏览器默认样式——css reset & normalize.css

css reset 自己挨个清除很麻烦可以使用网上一些css库——css reset 把模板复制到css文件最上方,其他的样式我们自己编写来覆盖它们但是这个也有一些弊端,会把一些本来需要的样式给清除了,比如h标签,本来是分级别的,但是使用css reset后,所有都变得一样了 normalize css 所以改用normalize css 我们可以使用 npm安装:npm install normalize.css 也可以用百度静态资源库:cdn.code.baidu.com 如果打不开可以…

伪类：after的使用以及结合attr来添加属性的技巧

本案例以实现侧边栏的效果为例来说明直接上代码看效果: css <style type="text/css"> *{;;list-style: none;} ul{;top:50%; transform: translate(0,-50%); } li{width:20px; height:20px; background:#666 url(img/i1.png) no-repeat center center;padding:5px; margin: 10px 0; bo…

状态伪类选择器(E::selection)

E::selection选择器: E::selection{background:#FF6600; color:#fff;} //当文字被选中时,背景是红色,文字是白色 E::-moz-selection{background:#FF6600; color:#fff;} //为了让火狐浏览器支持 *IE6/7/8 不支持 selection:[sɪ'lekʃn]选择.挑选…

清除浏览器默认样式的reset.css(转载于reset.css的官方)

/* http://meyerweb.com/eric/tools/css/reset/ v2.0-modified | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em…

一起学HTML基础-CSS样式表常用样式属性

样式属性背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ background-attachment:fixed; /*背景是固定的,不随字体滚动*/ background-attachment:scroll; /*背景随字体滚动*/ background-repeat:no-repeat; /*no-repeat,不平铺,repeat,平铺,repeat-x,横向平…

CSS公共清除浏览器默认样式

/*Vue隐藏*/ [v-cloak] { display: none; } /*清除样式*/ body, ol, ul, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea,select{ margin:; padding:; } article, aside, details, figcaption, figure, footer, header,…