遵化网站开发,营销型的物流网站模板下载,常德招聘网最新招聘,厦门零基础学seo概览在 CSS 中#xff0c;选择器用于选择需要添加样式的元素。CSS 选择器非常丰富#xff0c;现将 CSS 1 - 3 目前所有的选择器列举如下。选择器例子例子描述CSS版本.class.intro选择 classintro 的所有元素。1#id#firstname选择 idfirstname 的元素…概览在 CSS 中选择器用于选择需要添加样式的元素。CSS 选择器非常丰富现将 CSS 1 - 3 目前所有的选择器列举如下。选择器例子例子描述CSS版本.class.intro选择 classintro 的所有元素。1#id#firstname选择 idfirstname 的元素。1**选择所有元素。2elementp选择所有 元素。1selector,selectordiv,p选择所有 元素和所有 元素。1selector selectordiv p选择 元素内部的所有 元素。1selectorselectordivp选择父元素为 元素的所有 元素。2selectorselectordivp选择紧接在 元素之后的所有 元素。2[attribute][target]选择带有 target 属性所有元素。2[attributevalue][target_blank]选择 target_blank 的所有元素。2[attribute~value][title~flower]选择 title 属性包含单词 flower 的所有元素。2[attribute|value][lang|en]选择 lang 属性值以 en 开头的所有元素。2:linka:link选择所有未被访问的链接。1:visiteda:visited选择所有已被访问的链接。1:activea:active选择活动链接。1:hovera:hover选择鼠标指针位于其上的链接。1:focusinput:focus选择获得焦点的 input 元素。2:first-letterp:first-letter选择每个 元素的首字母。1:first-linep:first-line选择每个 元素的首行。1:first-childp:first-child选择属于父元素的第一个子元素的每个 元素。2:beforep:before在每个 元素的内容之前插入内容。2:afterp:after在每个 元素的内容之后插入内容。2:lang(language)p:lang(it)选择带有以 it 开头的 lang 属性值的每个 元素。2selector~selectorp~ul选择前面有 元素的每个 元素。3[attribute^value]a[src^https]选择其 src 属性值以 https 开头的每个 元素。3[attribute$value]a[src$.pdf]选择其 src 属性以 .pdf 结尾的所有 元素。3[attribute*value]a[src*abc]选择其 src 属性中包含 abc 子串的每个 元素。3:first-of-typep:first-of-type选择属于其父元素的首个 元素。3:last-of-typep:last-of-type选择属于其父元素的最后 元素。3:only-of-typep:only-of-type选择属于其父元素只有唯一的 元素。3:only-childp:only-child选择属于其父元素只有唯一的子元素 .3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素 .3:nth-last-child(n)p:nth-last-child(2)同上从最后一个子元素开始计数。3:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 元素。3:nth-last-of-type(n)p:nth-last-of-type(2)同上但是从最后一个子元素开始计数。3:last-childp:last-child选择属于其父元素最后一个子元素 .3:root:root选择文档的根元素。3:emptyp:empty选择没有子元素的每个 元素(包括文本节点)。3:target#news:target选择当前活动的 #news 元素。3:enabledinput:enabled选择每个启用的 元素。3:disabledinput:disabled选择每个禁用的 元素3:checkedinput:checked选择每个被选中的 元素。3:not(selector):not(p)选择非 元素的每个元素。3::selection::selection选择被用户选取的元素部分。3:out-of-rangeinput:out-of-range匹配值在指定区间之外的 元素。3:in-rangeinput:in-range匹配值在指定区间之内的 元素。3:read-writeinput:read-write匹配可读可写的 元素。3:optionalinput:optional匹配可选输入的 元素。3:requiredinput:required匹配必须输入的 元素。3:validinput:valid匹配输入有效的 元素。3:invalidinput:invalid匹配输入无效的 元素。3CSS 选择器这么多都需要掌握吗多吗分组去记忆还是很好掌握的掌握的越多你就越能随心所欲的操纵HTML文档。上面的选择器只是基础掌握了上面的内容只能说明你识字了至于能不能组成句子甚至优美的句子还有很大的距离。记住并使用选择器如何记住这么多选择器呢我个人记忆方式是一是分组二是使用在此分享给大家。基础选择器类选择器.classID选择器#id通配符选择器*元素选择器element是四个最基本的选择器相信你早就记住了。* {color: black;}a {color: blue;}.msg {color: red;}#top {background-color: #ff0000;}选择器组合通过使用特定的符号来连接选择器可以实现更加丰富的选择功能。selector, selector逗号连接两个或多个选择器实现多选的功能。h1, h2, .title {color: black;}h1, h2 标签和 classtitle 的元素的字体颜色都设置为黑色。selector selector空格直接相连的两个或多个选择器可以实现精确定位的功能。#header h3 {color: #fff;}ID为header的元素下面的h3元素字体颜色设置为白色。selector selector大于号连接的两个选择器实现父子选择的功能。HTML文档片段hello,job1...hello,job2...hi,job3...hi,job4...CSS样式.info p {background-color: yellow;}.info下的所有直接子元素 p(带有hello的段落)背景被设置为黄色其余的(带有hi的段落不是子元素或不是直接子元素)不受影响。selector selector加号相连的两个选择器实现同级紧邻的元素选择的功能。HTML部分文档欢迎来到我到的主页我是唐老鸭。我最好的朋友是米老鼠。我的样式会改变。CSS样式div p p {background-color: yellow;}div 紧挨的第一个同级元素 p 是“我最好的朋友是米老鼠。”然后又一个 连着 p 最终选中最后一个 p.selector ~ selector波浪线连接的两个选择器实现同级并在其下面所有选择器指定元素的选择功能(好绕看例子吧)。HTML文档A div element.CoffeeTeaMilkThe first paragraph.CoffeeTeaMilkAnother listCoffeeTeaMilkCSS样式p ~ ul{background:#ff0000;}p 元素同级的 ul 并且 ul 元素是在 p 的下面。注意这个是CSS3新增的选择器。选择器结合结合的意思嘛就是连着写在一起呗。div#user {color: black;}我是黑色字体常用的就是 element#id,element.class.也有一种多类选择器也算选择器结合HTML文档This paragraph is very important.This is a warning.This paragraph is a very important warning.CSS样式.important {font-weight: bold;}.warning {font-style: italic;}.important.warning {background: silver;}注意在 IE7 之前的版本中不能正确地处理多类选择器。属性选择器HTML标签可以定义若干属性我们可以通过属性选择器进行元素的选取。注意区分CSS3新增的属性选择器。[attribute]选取包含某属性的元素。a[href]选取包含href属性的a标签。[attributevalue]选择某个属性attribute并且属性值为value的元素。.info[refgood][attribute~value]选择某个属性attribute并且属性值中有value这个单词的元素。这里是指单词属性值如果是 boy man 则有两个单词。p[class~man][attribute|value]属性起始值为value的元素。p[class|cls]以上是CSS2开始提供的属性选择器下面的将是CSS3提供的选择器注意区别使用。[attribute^value]属性值以value开始的元素。[attribute$value]属性值以value结尾的元素。[attribute*value]属性值包含value的元素不一定是单词哟。伪类选择器所谓的伪类你可以简单的理解为带 : 的选择器。伪类很好理解一般从名称上就可以知道其作用了。可以从以下几个方面去记。下面的归类只用来方便记忆这些选择器并不局限于我所列举的场景。跟 a 紧密关联的a:link所有未被访问的链接。a:hover鼠标移动到链接上面。a:active鼠标点按在链接上不松开。a:visited链接已经点击过。注意: 为了产生预期的效果在CSS定义中尽量采用上面四个的顺序去定义。:target是CSS3中新增的选择器用于标示当前处于活动的锚标记。HTML文档This is a headingJump to New content 1Jump to New content 2Click on the links above and the :target selector highlight the current active HTML anchor.New content 1...New content 2...CSS样式:target {border: 2px solid #D4D4D4;background-color: #e5eecc;}当点击锚定位a标签时相应的锚元素会设置为指定样式。跟 input 紧密关联的:focus选择具有焦点的元素一般都是输入元素。除了 :focus 是CSS2开始有的下面的都是CSS3新增的伪类。:enabled可用的输入元素。:disabled不可用的输入元素。input[typetext]:disabled {background:#dddddd;}:valid匹配输入合法的元素例如email,number等等。:invalid不合法的。input:invalid {border:2px solid red;}:optional匹配可选输入元素。:required匹配设置了“required”的元素。input:required {background-color: yellow;}:read-write匹配可读可写的元素。:read-only匹配设置了“readonly”的元素。input:read-only {background-color: yellow;}readonly 和 disabled 可以实现同样的功能禁止用户输入和更改。:out-of-range匹配设置范围且值范围超出范围的元素。input:out-of-range {border:2px solid red;}:in-range匹配在设置值范围内的元素。:checked匹配被选中的元素。父子及排序关系相关先说一下常用于 p 的:first-letter第一个字母一般用于实现首字母大写。:first-line选取第一行。比较通用的:before在元素之前插入内容。:after在元素之后插入内容。示例p:before {content:Read this -;}之前之后是指元素内部的前面和后面。::beforexxxx::after上面几个是CSS1或2开始支持的下面的除了:first-child 是CSS2开始的其余的都是CSS3伪类。:root选择文档的根元素基本就是 标签。:empty没有任何子级(包括文本内容)的元素。父子关系伪类有两种一种是*-type 的作用于父元素另一种是*-child的作用于子元素还是看例子好理解。:first-of-type选取一个元素的父元素的第一个这个元素。HTML文档This is a headingThe first paragraph.The second paragraph.The third paragraph.The fourth paragraph.CSS样式p:first-of-type {background:#ff0000;}第一个 p 标签将被设置背景色。p 的父元素是body,body的第一个p元素被选中。:last-of-type这个元素的父元素的最后一个这个元素被选中。:only-of-type这个元素的父元素只有一个这个元素可以有其他元素不影响唯一的这个元素被选中。:nth-of-type(n)这个元素的父元素的第n个元素被选中。n 可以是一个数字一个关键字或者一个公式。数字从1开始代表第一个元素关键字奇数 odd 偶数 even表达式公式(anb) a 代表一个循环的大小n是计数器(从0开始)b是偏移量。示例tr:nth-of-type(2n1) {background:#ff0000;}奇数行(1,3,5,7...)设置背景。:nth-last-of-type(n)从后往前计算。说完 type 该说 child 了。:first-child这个是CSS2开始有的伪类选择器选取这个元素的第一个子元素。示例ul:first-child {color: blue;}让ul的第一个li的字体为蓝色。:last-child最后一个子元素。:nth-child(n)第几个子元素n配置同上。:nth-last-child(n)从后开始找子元素。还剩下几个单独列出来吧。其他:lang(language)选取lang属性的起始值为language的元素。:not(selector)选择器的取反这个很好理解。示例:not(a) {color: black;}所有的非a标签。::selection匹配元素中被用户选中或处于高亮状态的部分。示例::selection {color:#ff0000;background-color:blue;}鼠标拉选中的部分字体设置为红色背景设置为蓝色。后续会再跟进和补充一些东西先发这些吧。
