网站的安全检查怎么做,江苏网页设计公司,做网站和编程序,建商城网站公司前言 前几天整理了CSS一些技术关键字#xff0c;但是因为自己的知识过于单薄#xff0c;觉得考虑的不充分有欠缺#xff0c;随后便在sf.gg提出了这个问题《关于CSS核心技术关键字都有哪些#xff1f;》#xff0c;也是为了让厉害的人一起参与进来#xff0c;用他们的经验… 前言 前几天整理了CSS一些技术关键字但是因为自己的知识过于单薄觉得考虑的不充分有欠缺随后便在sf.gg提出了这个问题《关于CSS核心技术关键字都有哪些》也是为了让厉害的人一起参与进来用他们的经验告知我们CSS中哪一块的知识点是重要或者说是不可欠缺的也或者说是应该打好基础的。 在整理这份CSS技术关键字的开始首先想到的是选择器它作为最常用的的一个特性几乎天天都在使用但是如果让你说出20种CSS选择器是不是可以脱口而出呢 哎或许我们被浏览器逼的还停留在CSS2.1那些选择器把CSS4规范都要问世了我们还在玩那个 带着这些疑问决定梳理一下之前用到的知识点最终以系列文章的方式说一说我对选择器的理解具体包含的内容如下 选择器的基础使用主要是CSS3也会介绍新增CSS4选择器包括各浏览器对选择器的支持情况选择器的使用技巧使用时常出现的一些问题扒一扒解决方案再说一说效率和优化的部分选择器的优先级理一理比较头疼的权重问题如何更轻松的理解它导图与源码 我在写这篇文章的时候会梳理一份思维导图用于更加直观的查阅所有的CSS选择器并且也有编写示例代码更方便理解文章中的示例。 关于思维导图和示例代码会上传至Github当然也会随着时间的允许不定义补充和更新 仓库地址https://github.com/Alsiso/everyday 思维导图https://github.com/Alsiso/everyday/blob/master/codes/css-selectors/css... 示例代码https://github.com/Alsiso/everyday/tree/master/codes/css-selectors 关于everyday是我每天记录和总结的地方这里有代码布局方案移动端适配方案等等后续会不断的补充和更新欢迎一起聊代码玩前端。 基本选择器 通配符选择器 * 通配符选择器用来选择所有的元素 * {marigin: 0;padding: 0;
}在我之的文章中讨论过CSS RESET其中里面的核心代码就是使用通配符选择器定义的来重置浏览器所有元素的内边距和外边距。 其实通配符选择器还可以选择某一个元素下的所有元素 #demo *{margin:0;
}不过使用通配符要谨慎并不是因为通配符会带来性能问题而是滥用通配符会造成“继承失效”或“继承短路”的问题这种情况会对开发造成一定程度的影响。 元素选择器 E 元素选择器使用也很简单它用于指定HTML文档中元素的样式 ul{list-style:none;
}▲ 这里使用元素选择器选择ul元素并去除列表前面的默认圆点 类选择器.className 类选择器是最常用的一种选择器使用时需要在HTML文档元素上定义类名然后与样式中的.className相匹配它一次定义后在HTML文档元素中是可以多次复用的。 CSS .menu {margin:0 auto;
}HTML div classmenu/div类选择器还可以结合元素选择器来使用假设文档中有两个元素都使用了.menu类名但是你只想选择div元素上类名为.menu的元素 CSS div.menu {margin:0 auto;
}HTML div classmenu/div
ul classmenu/ul类选择器支持多类名使用比如.menu.active这个选择器只对元素中同时包含了menu和active两个类才会起作用 CSS .menu {margin:0 auto;
}
.menu.active {font-weight:bold;
}HTML div classmenu active/div不过多类选择器.className1.className2在 IE6以上才支持关于浏览器对CSS选择器的支持会下面的内容统一整理列出表格。 id选择器#id id选择器与上面的类选择器使用很相似通过在HTML文档中添加ID名称然后与样式中的#id相匹配不过两者的最大的区别在于ID选择器是一个页面中唯一的值不可多次使用而class选择器是可以多次复用的。 CSS #menu{margin:0 auto;
}HTML div idmenu/div群组选择器s1,s2,...,sN 群组选择器在开发中也是很常用的它用于将相同样式的元素分组在一起然后用逗号进行分割。 CSS a:active,a:hover {outline: 0;
}▲ 这里统一去掉了a链接在点击和浮动时的虚线焦点框。 后代选择器E F 后代选择器是最常使用的选择器之一它也被称作包含选择器用于匹配所有被E元素包含的F元素这里F元素不管是E元素的子元素或者是孙元素或者是更深层次的关系都将被选中。 CSS .menu li{padding:0 ;
}HTML ul idmenuliulli/li/ul/li
/ul▲ 这里.menu下的li元素和嵌套的ul元素下的li的元素都会被选择进行清楚内边距。 子元素选择器E F 子元素选择器只能选择某元素的子元素这里的F元素仅仅是E元素的子元素才可以被选中 CSS .menu li{padding:0 ;
}HTML ul idmenuliulli/li/ul/li
/ul▲ 将会对.menu下的li子元素选中但会忽视内部嵌套的li元素 相邻兄弟元素选择器E F 相邻兄弟选择器可以选择紧接在另一元素后的元素但是他们必须有一个相同的父元素。比如E元素和F元素具有一个相同的父元素而且F元素在E元素后面这样我们就可以使用相邻兄弟元素选择器来选择F元素。 CSS h1 p {margin-top:5px;
}HTML divh1标题/h1p内容/p
/div▲ 将会选择h1元素后面的兄弟元素p 通用兄弟选择器E ~ F 通用兄弟元素选择器是CSS3新增加一种选择器用于选择某元素后面的所有兄弟元素。它和相邻兄弟元素选择器用法相似但不同于前者只是选择相邻的后一个元素而通用兄弟元素选择器是选择所有元素。 CSS h1 ~ p {margin-top:5px;
}HTML divh1标题/h1p内容/pp内容/pp内容/p
/div▲ 将会选择h1元素后面的所有的兄弟元素p 属性选择器 选择器描述CSS版本E[attr]匹配所有具有attr属性的E元素2.1E[attrvalue]匹配所有attr属性等于“value”的E元素2.1E[attr~value]匹配所有attr属性具有多个空格分隔的值、其中一个值等于“value”的E元素2.1E[attr^value]匹配所有attr属性值是以val开头的E元素2.1E[attr$value]匹配所有attr属性值是以val结束的E元素3E[attr*value]匹配所有attr属性值包含有“value”的E元素3E[attr] E[attr]属性选择器是CSS3属性选择器最简单的一种用于选择具有att属性的E元素。 CSS img[alt] {margin: 10px;
}HTML img srcurl alt /
img srcurl /▲ 将会选择到第一张图片因为匹配到了alt属性你也可以使用多属性的方式选择元素 img[src][alt] {margin: 10px;
}E[attrvalue] E[attrvalue]是指定了属性值value从而缩小了范围可以更为精确的查找到自己想要的元素。 CSS input[typetext] {border: 2px solid #000;
}HTML input typetext /
input typesubmit /▲ 将会选择到typetext表单元素。 E[attr~value] 如果你要根据属性值中的词列表的某个词来进行选择元素那么就需要使用这种属性选择器E[attr~value]你会发现它和E[attrvalue]极为的相似但是两者的区别是属性选择器中有波浪~时属性值有value时就相匹配没有波浪~时属性值要完全是value时才匹配。 CSS div[class~a] {border: 2px solid #000;
}HTML div classa1/div
div classb2/div
div classa b3/div▲ 将会选择到第1、3个div元素因为匹配到了class属性且属性值中有一个值为a E[attr^value] E[attr^value]属性选择器指的是选择attr属性值以“value”开头的所有元素 CSS div[class^a] {border: 2px solid #000;
}HTML div classabc1/div
div classacb2/div
div classbac3/div▲ 将会选择到第1、2个div元素因为匹配到了class属性且属性值以a开头 E[attr$value] E[attr$value]属性选择器刚好与E[attr^value]选择器相反这里是选择attr属性值以value结尾的所有元素。 CSS div[class$c] {border: 2px solid #000;
}HTML div classabc1/div
div classacb2/div
div classbac3/div▲ 将会选择到第1、3个div元素因为匹配到了class属性且属性值以c结尾 E[attr*value] E[attr*value]属性选择器表示的是选择attr属性值中包含value字符串的所有元素。 CSS div[class*b] {border: 2px solid #000;
}HTML div classabc1/div
div classacb2/div
div classbac3/div▲ 将会选择到所有的元素因为匹配到了class属性且属性值都包含了b E[attr|val] E[attr|val]是属性选择器中的最后一种它被称作为特定属性选择器这个选择器会选择attr属性值等于value或以value-开头的所有元素。 CSS div[class|a] {border: 2px solid #000;
}HTML div classa-test1/div
div classb-test2/div
div classc-test3/div▲ 将会选择第1个div元素因为匹配到了class属性且属性值以紧跟着a-的开头 伪类选择器 动态伪类 一般动态伪类是在用户操作体验时触发的最常见的就是超链接它拥有访问前鼠标悬停被点击已访问4种伪类效果。 E:link 设置超链接a在未被访问前的样式 E:visited 设置超链接a已被访问过时的样式 E:hover 设置元素在其鼠标悬停时的样式 E:active 设置元素在被用户激活时的样式不过在使用时的时候一定要注意书写的顺序不然在不同的浏览器中会带来一些意想不到的错误。 a:link {}
a:visited {}
a:hover {}
a:active {}最可靠的记忆顺序就是遵循爱恨原则l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括。 还有一个用户行为的动态伪类:focus常用于表单元素触发onfocus事件发生时的样式。 input[typetext]:focus{border: 2px solid #000;
}▲ 当用户聚焦到输入框内会给输入框添加一个边框颜色。 表单状态伪类 我们把以下3种状态称作表单状态伪类你会发现这些关键字就是HTML表单元素的属性checked用于typeradio和typecheckbox够选中状态disabled用于typetext禁用的状态而enabled这里表示typetext可用的状态。 E:checked 匹配用户界面上处于选中状态的元素E E:enabled 匹配用户界面上处于可用状态的元素E E:disabled 匹配用户界面上处于禁用状态的元素ECSS input[typetext]:enabled {background: #fff;
}
input[typetext]:disabled{background: #eee;
}
input:checked span {background: red;
}HTML input typetext value可用状态 /
input typetext value可用状态 /
input typetext value禁用状态 disableddisabled /
input typetext value禁用状态 disableddisabled /
labelinput typeradio nameradio /span黑色/span/label▲ 将会给可用状态的文本框设置为白色(#fff)背景禁用状态设置为灰色(#eee)背景如果你选中了radio它兄弟元素span的文本会变成红色 结构伪类 E:first-child 匹配父元素的第一个子元素E E:last-child 匹配父元素的最后一个子元素E E:nth-child(n) 匹配父元素的第n个子元素E假设该子元素不是E则选择符无效 E:nth-last-child(n) 匹配父元素的倒数第n个子元素E假设该子元素不是E则选择符无效 E:first-of-type 匹配同类型中的第一个同级兄弟元素E E:last-of-type 匹配同类型中的最后一个同级兄弟元素E E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E E:only-child 匹配父元素仅有的一个子元素E E:only-of-type 匹配同类型中的唯一的一个同级兄弟元素E E:empty 匹配没有任何子元素包括text节点的元素EE:first-child 和 E:last-childE:first-child是用来选择父元素的第一个子元素E但是它必须为父元素的第一个子元素不然会失效举例说明 CSS p:first-child {color:red;
}HTML divh1标题/h1p段落/p
/div▲ 你会发现p元素的字体并没有变为红色因为p元素前面还有个h1它并不是父元素下的第一个子元素。 divp段落/p
/div▲ 这时需要改变结构效果才会正常。 而E:last-child与E:first-child选择器的作用类似不同的是E:last-child选择是的元素的最后一个子元素。 CSS p:last-child {color:red;
}HTML divh1标题/h1p段落/p
/div▲ 将p元素的字体设置为红色 E:nth-child(n) 和 E:nth-last-child(n)E:nth-child(n)用于匹配父元素的第n个子元素E假设该子元素不是E则选择符无效。 该选择符允许使用一个乘法因子(n)来作为换算方式如下: li:nth-child(2) { background:#fff}▲ 选择第几个标签“2可以是你想要的数字最小从0开始” li:nth-child(n4) { background:#fff}▲ 选择大于等于4标签“n”表示从整数 li:nth-child(-n4) { background:#fff}▲ 选择小于等于4标签 li:nth-child(2n) { background:#fff}
li:nth-child(even) { background:#fff}▲ 选择偶数标签2n也可以是even li:nth-child(2n-1) { background:#fff}
li:nth-child(odd) { background:#fff}▲ 选择奇数标签2n-1也可以是odd li:nth-child(3n1) { background:#fff}▲ 自定义选择标签3n1表示“隔二取一” 而E:nth-last-child(n)又要开始反着来了CSS3选择器有正就有反 li:nth-last-child(3) { background:#fff}▲ 选择倒数第3个标签 E:first-of-type 和 E:last-of-typeE:first-of-type的使用方法类似于我们上面讲过的E:first-child,不过区别在于该选择器只会选择同类型的第一个元素而不是父元素的第一个元素举例说明 CSS p:first-of-type {color:red;
}
p:last-of-type {color:green;
}HTML divh1标题/h1p段落/pp段落/pdiv/div
/div▲ 你会发现第一个p元素的字体被设置为红色第二个p元素的字体被设置为绿色这就是E:first-of-type和E:first-child不同之处。 E:nth-of-type(n) 和 E:nth-last-of-type(n) 这两个选择器的用法类似于:nth-child(n)和E:nth-last-child(n)关于区别也是选择器只会选择同类型的兄弟元素举个栗子 divp第1个p/pp第2个p/pspan第1个span/spanp第3个p/pspan第2个span/spanp第4个p/pp第5个p/p
/divp:nth-child(3) {color:red;
}▲ 如果使用:nth-child(3)你会发现第3个p元素文本并没有变成红色。就像我们之前说的如果第n个子元素不是E则是无效选择符但n会递增。 p:nth-of-type(3) {color:red;
}▲ 但是使用:nth-of-type(3)后会发现第3个p元素文本被设置为红色。 E:only-child 和 E:only-of-typeE:only-child用来匹配父元素仅有的一个子元素E而E:only-of-type是表示一个元素它有很多个子元素但是只会匹配其中只有一个子元素的元素说起来有点绕口来个栗子 HTML divp段落/p
/div
divdiv容器/divp段落/pdiv容器/div
/divp:only-child {color: red;
}▲ 将会对第1个div元素下的p元素文本设置成红色。 p:only-of-type {color: red;
}▲ 不仅会第1个div元素下的p元素文本设置成红色也会对第2个div元素下的p元素文本设置成红色因为它是p元素中唯一的一个同级兄弟元素。 iframe width100% height300 src//jsfiddle.net/Alsiso/15h4ozee/embedded/ allowfullscreenallowfullscreen frameborder0/iframe E:emptyE:empty是用来选择没有任何内容的元素包括text节点也就是意味着连一个空格都不能有 HTML divp /pp/p
/divCSS p:empty {height: 100px;
}▲ 将会对第2个空元素p设置一个高度为什么第一个会失效呢因为该容器里面有一个空格。 否定类 E:not(s)用于匹配不含有s选择符的元素E说起来不好理解那么说一个最常用的开发场景假如我们要对ul元素下的所有li都加上一个下边框用于内容分割但是最后一个不需要如下 HTML ulli列表1/lili列表2/lili列表3/lili列表4/li
/ulCSS ul li:not(:last-child) {border-bottom: 1px solid #ddd;
}▲ 将会对列表中除最后一项外的所有列表项添加一条下边框 伪元素选择器 E:first-letter 选择文本块的第一个字母 E:first-line 选择元素的第一行 E:before 在元素前面插入内容配合content使用 E:after 在元素后面插入内容配合content使用以上四个伪元素选择器在CSS2.1都已经被支持但在CSS3中将伪元素选择符前面的单个冒号(:)修改为双冒号(::)如E::first-letter、E::first-line、E::before、E::after不过之前的单冒号写法也是有效的。 E::first-letter 和 E::first-line p::first-letter {font-weight:bold;
}▲ 将会对文本块的第一个字母进行加粗 p::first-line {font-weight:bold;
}▲ 将会对段落的第一行文本进行加粗 E::before 和 E::after E::before和E::after是用来给元素的前面和后面差入内容配合content使用但它必须有值才能生效。 HTML divme/divCSS div:before{content:you before; color:red;
}
div:after{content:you after; color:green;
}▲ 将会在div容器中的文本me加上添加后的内容并设置其颜色 E::placeholder和 E::selection E::placeholder 选择文本块的第一个字母 E::selection 选择文本块的第一个字母E::placeholder用于设置对象文字占位符的样式但是每个浏览器的CSS选择器都有所差异需要针对每个浏览器做单独的设定举个例子看代码 ::-webkit-input-placeholder { /* WebKit browsers */color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19 */color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10 */color: #999;
}E::selection用于设置文本被选择时的样式被定义的样式属性有3个而且使用时需要对火狐浏览器单独设置。 p::-moz-selection{background:#000;color:#f00;text-shadow:1px 1px rgba(0,0,0,.3);
}
p::selection{background:#000;color:#f00;text-shadow:1px 1px rgba(0,0,0,.3);
}第四代选择器 发展历史 自从哈坤·利提出CSS建议到1996年CSS1.0问世距离今天已经有20个年头。 不过CSS的发展一直在持续1997年组织了专门管CSS的工作组并在1998年发布了CSS2.0之后发布了修订版本的CSS2.1。 CSS2.1 是我们一直再用的也是浏览器支持较为完整的一个版本。 CSS3 的开发工作早在2001年以前就启动了不过发展到今天大多数的现代浏览器对CSS3属性和选择器支持良好除了一些微软IE浏览器的较老版本。 历史前进的步伐并不会停止的新的CSS4也正由W3C编辑团队研发中。在CSS4中引进了许多的新变化不过基本选择器是不会有变化的更多的还是添加一些伪类那么接下来一起看看增加的内容。 提醒目前这些代码功能可能还在实验规范阶段浏览器并没有得到支持所以并不能投入使用 升级内容 否定类 E:not(s,s,s..)E:not其实在选择器已经出现在CSS3了它用于匹配不含有s选择符的元素E上面我们讲过它的使用方法但是它只能用于简单选择器伪类标签id类和类选择器参数。不过在CSS4中得到了升级具体区别 p:not(.header) { font-weight: normal;
} ▲ CSS3将会对除了.header类以外的文本加粗 p:not(.header, .footer) { font-weight: normal;
} ▲ CSS4通过传入一个用逗号将会对除了.header和.footer类以外的文本加粗 关联类 E:has(s) 这个选择器通过一个参数选择符去匹配与某一元素对应的任意选择器举个例子 a:has(img) { border: 1px solid #000;
} ▲ 将会对所有带有img元素的a元素加个黑色的边框 匹配任何伪类E:matches 这个伪类选择器可以规则运用在所有的选择器组中它能帮我们简写多组选择器的规则例子说明 sectionh1标题/h1
/section
navh1标题/h1
/nav▲ 上面的两个容器都有一个h1标题元素如何对容器下的h1字体进行字体颜色设置呢 section h1,nav h1{color:red;
}:matches(section, nav) h1 {color: red;
}▲ 这一种是传统的方法第二种就是:matches方法。 位置伪类E:local-link和E:local-link(n) 位置伪类是访问者在你网站上的位置 :local-link(0) 代表一个超连接元素其target和文档的URL是在同一个源中。 :local-link(1) 代表一个超连接元素其target和文档的URL是在同一个源中。 :local-link(2) 代表一个超连接元素其target和文档的URL是在同一个源中。/* 将会匹配 http://example.com/ link(s) */
:local-link(0) {color: red;
}/* 将会匹配 http://example.com/year/ link(s) */
:local-link(1) {color: red;
}/* 将会匹配 http://example.com/year/month/ link(s) */
:local-link(2) {color: red;
}表单状态伪类 E:indeterminatecheckbox中的indeterminate属性用于展示半选择状态这个属性只是改变checkbox的外观不对它的checked属性产生影响CSS4选择器中也增加了半选择状态的伪类。 :indeterminate {opacity: 0.6;
}表单状态伪类 E:required和 E:optionalrequired属性是HTML5新添加的用于规定必需在提交之前填写输入字段 :required {border: 1px solid red;
}
:optional {border: 1px solid gray;
}input typetext requiredrequired /
input typetext /▲ 第一个设置了required属性的表单元素将会设置一个红色边框而第二个没有设置该属性的将会设置一个灰色边框。 范围限制伪类E:in-range和E:out-of-range 用于表单字段值范围的限制取决于表单的min和max属性 :in-range {background-color:green;
}:out-of-range {background-color:red;
}input typenumber value5 max10 min1 /▲ 如果你输入的值在设置的最小和最大值范围内那么表单背景会呈现为绿色如果超出了限制那么会呈现为红色。 关于更多的CSS4选择器可参考这里的 示例介绍。
