元素css选择器

css选择器时间:2021-04-22 阅读:()

CSS选择器

CS S的一个核心特性就是能对一组元素应用某些规则

如 h2{color:yel low;}而不用再像从前那样在每个<h2>标签处修改颜色

一、基本选择器

Demo:

<divclass="demo">

</ul>

</div>

1、 *通配符选择器

用来选择所有元素也可以选择某个元素下的所有元素例如 demo*{border:1pxsol id blue;} demo不被选中

2、元素选择器

元素即文档的元素如html 、 body、 div、 p等

3、类选择器important warning{border:1pxsol id blue;} 选择器仅可以选择同时包含这些类名的元素不计顺序

如<p class="i mportantwa rning urgent"></p>可以被选中

所有浏览器都支持类选择器但多类选择器 className1 className2不被ie6支持。

4、 ID选择器

ID是页面中的唯一值一个ID只能用一次

ID选择器不能像类选择器一样多个合并使用

有一点需要注意什么时候使用类选择器什么时候使用ID选择器。

关键一点是具有唯一性的使用ID选择器公用的具有普遍性的使用类选择器。

注意类选择器和ID选择器是区分大小写的

5、后代选择器E Fulem{border:1pxsol id blue; }可以选中ul下的em而不论em有多深

6、子元素选择器E>F

如果你不希望选择任意的后代元素而是希望缩小范围只选择E的子元素。

7、相邻兄弟元素选择器E+F

E和F具有相同的父元素且F元素紧接在E元素后面l i +l i {background:green;color:yel low;border: 1pxsol id#ccc;}

上述css操作案例HTML可以选中第2至第10个l i 共9个因为第二个是第一个的兄弟元素第三个是第二个的兄弟元素active+l i {background:green;color:yel low;border: 1pxsol id#ccc;}

只会选中第三个元素

8、通用兄弟选择器E~F

这种选择器将选择某元素后面的所有兄弟元素他们也和相邻兄弟元素类似需要在同一个父元素之中换句话说 E和F元素是属于同一父元素之内并且F元素在E元素之后那么E~F选择器将选择中所有E元素后面的F元素

active~l i {background:green;color:yel low;border: 1pxsol id#ccc;}

可以选中第三个到最后一个元素。

9、群组选择器h2,p{}和h2p{}是完全不同的前者是群组选择器后面是后代选择器。

二、属性选择器

属性选择器早在CSS2中就被引入了其主要作用就是对带有指定属性的HTML元素设置样式。

使用CS S 3属性选择器你可以只指定元素的某个属性或者你还可以同时指定元素的某个属性和其对应的属性值。E[attr] 如果你只是选择有这个属性值的元素而不管其属性值是什么可多个组合使用demo a[href] [title]

E[attr="value"] 指定属性名并指定了该属性的属性值注意属性值必须完全匹配特别是对于属性值是多个的时候

<a href="" class="l inks item" title="open the website">7</a>demo a[class="l inks"]{color:red};/*这是一种写法不能和上面的html所匹配*/demo a[class="l inks item"]{color:red};/*这样才是匹配的记得中间的空格不能少的哟*/

E[attr~="value"] 指定属性名并且具有属性值此属性值是一个词列表并且以空格隔开其中词列表中包含了一个value词。

这个是为了解决上述情况不能限制太死的问题这个value只要是词列表中的一个就可以匹配即含有部分词即可以匹配。E[attr|="value"] 指定了属性名并且属性值是value或者以“value-”开头的值比如说zh-cn ;

比如说你页面中有很多图片图片文件名都是以"fi gu re-1","fi gu re-2"这样的方式来命名的那么使用这种选择器选中图片就很方便了

以下三个是CSS3新增的属性选择器

E[attr^="value"] 指定了属性名并且有属性值属性值是以value开头的

比如选择以href属性并且以"http://"和"mai lto:"开头的属性值的所有a元素

E[attr$="value"] 指定了属性名并且有属性值而且属性值是以value结束的

这个运用在给一些特殊的链接加背景图片很方便 比如说给pdf,png,doc等不同文件加上不同icon我们就可以使用这个属

性来实现

E[attr*="value"] 指定了属性名并且有属性值而且属值中包含了value

属性选择器除了IE6不支持外其他的浏览器都能支持

七种属性选择器中E[attr="value"]和E[attr*="value"]是最实用的其中E[attr="value"]能帮我们定位不同类型的元素特别是表单form元素的操作 比如说input[type="text"],input[type="checkbox"]等而E[attr*="value"]能在网站中帮助我们匹配不同类型的文件 比如说你的网站上不同的文件类型的链接需要使用不同的icon图标用来帮助你的网站提高用户体验就像前面的实例可以通过这个属性给"doc"," pdf","png","ppt"配置不同的icon图标。

三、伪类选择器

第一类基本属性选择器和第二类属性选择器都是来源于DOM树而伪类和伪元素是预定义的独立于文档元素的。它们获取元素的途径也不是基于i d、 cl a s s、属性这些基础的元素特征而是在处于特殊状态的元素伪类或者是元素中特别的内容伪元素。当然伪类和伪元素的表示形式也使用“:” 英文冒号与其它选择器相区分。

De mo

<divclass="demo clearfix">

</ul>

</div>

1、伪元素选择器

与伪类针对特殊状态的元素不同的是伪元素是对元素中的特定内容进行操作它所操作的层次比伪类更深了一层也因此它的动态性比伪类要低得多。实际上设计伪元素的目的就是去选取诸如元素内容第一个字母、第一行选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的但是它本身只是基于元素的抽象并不存在于文档中所以叫伪元素。用来匹配特定元素里面的部分内容 即匹配的是虚拟元素相对于I D和CLASS来说first-line:匹配某个元素中的第一行文字内容p:fi rst-l inefirst-letter:匹配某个元素中的第一个字母或文字主要运用于段落排版上多 比如说首字下沉befor:用来在某个元素之前插入内容l i :before{content:"->"}在l i前插入"->"

主要用来给元素的前面或后面插入内容这两个常用"content"配合使用见过最多的就是清除浮动after:之后

在CSS3中对伪元素进行了一定的调整在以前的基础上增加了一个“”也就是现在变成了“: :first-letter,: :first-l ine,: :before,: :after”css3中主要用来区分伪类和伪元素到目前来说这两种方式都是被接受的也就是说不管使用哪种写法所起的作用都是一样的只是一个书写格式不同而以。

2、保留的伪类选择器

伪类选择元素基于的是当前元素处于的状态或者说元素当前所具有的特性而不是元素的i d、 cl a s s、属性等静态的标志。由于状态是动态变化的所以一个元素达到一个特定状态时它可能得到一个伪类的样式 当状态改变时它又会失去个样式。由此可以看出它的功能和class有些类似但它是基于文档之外的抽象所以叫伪这类。a:l ink{color:gray;}/*链接没有被访问时前景色为灰色*/a:visited{color:yel low;}/*链接被访问过后前景色为黄色*/a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/ 发生在点的那一下松开鼠标此动作也就完成了

3、新增的UI元素状态伪类选择器

E:enabled/E:disabledinput[type="text"] :disabled{border:1pxsol id#999;background-color:#fefefe;}

IE6-8不支持":checked",":enabled",":disabled"这三种选择器。

E:checked

E:fo cus

E:val id/E:inval id

E: :sele ction用来匹配被鼠标选中的文字其只能设置两个属性其他的属性无效如

P: :selection{background:red;color:#fff;

}

4、结构性伪类选择器

利用文档的结构树的相互关系来匹配特定的元素从而减少文档内对CLASS和ID属性的定义使文档更简洁。

E:root用来匹配E的根元素对H T M L页面来说就是匹配h t m l元素 E为变量哦可能为p

E:not(s)用来匹配除了s之外的所有元素,比如你想对form中所有input加边框但又不想submit也起变化input:not( [type="submit"] )

{border: 1pxsol id red;}

E:e m pty用来匹配没有任何内容的E这里没有内容指的是一点内容都没有哪怕是一个空格

E:target匹配相关U R L指向的E元素

E:lang(quote){color:red;quotes:"'""'"

}

<qlang="quote">有志者事竟成</q>

E:first-child匹配父元素的第一个子元素E

E:last-child匹配父元素的最后一个子元素E

E:nth-child(n)匹配父元素的第n个子元素En=0没有选中元素 n=odd/even选中奇偶元素 n=n+5选中从第五个到最后 n=n选中所有元素n=n+5选中从第五个到最后

我们来看他的计算过程n=0时 n+5=5选中第五个n=1时 n+5=6选中第六个

以此类推n=-n+5呢 n=4n+1呢

E:f i rst-of-type/E:last-of-type

E:first-chi ld选择器是css2中定义的选择器从字面意思上来看也很好理解就是第一个子元素。比如有段代码

p:first-chi ld 匹配到的是p元素,因为p元素是div的第一个子元素h1:first-chi ld 匹配不到任何元素 因为在这里h1是div的第二个子元素而不是第一个span:first-chi ld 匹配不到任何元素 因为在这里两个span元素都不是div的第一个子元素

:first-chi ld 匹配到的是p元素,因为在这里div的第一个子元素就是p。

然后在css3中又定义了:first-of-type这个选择器这个跟:first-child有什么区别呢还是看那段代码p:fi rst-of-type 匹配到的是p元素,因为p是di v的所有为p的子元素中的第一个事实上这里也只有一个为p的子元素h1:fi rst-of-type 匹配到的是h1元素 因为h1是div的所有为h1的子元素中的第一个事实上也只有一个为h1的子元素span:first-of-type 匹配到的是第三个子元素span。这里div有两个为span的子元素匹配到的是第一个。

:fi rst-of-type 匹配到的是p元素

所以通过以上两个例子可以得出结论

:first-chi ld匹配的是某父元素的第一个子元素可以说是结构上的第一个子元素。

:fi rst-of-type匹配的是该类型的第一个类型是指什么呢就是冒号前面匹配到的东西 比如p:fi rst-of-type就是指所有p元素中的第一个。这里不再限制是第一个子元素了只要是该类型元素的第一个就行了当然这些元素的范围都是属于同一级的也就是同辈的

E:nth-of-ty pe(n)

E:n th-of-type类似于E:n th-chi l d不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处 比如说我们divdemo下有好多p元素 l i元素 img元素等但我只需要选择p元素并让他每隔一个p元素就有不同的样式那我们就可以简单的写成demo p:nth-of-type(even) {background-color: l ime;}

其实这种使用和:nth-chi ld使用是一样的也可以使用:nth-chi ld的那些表达式和使用方法唯一不同的是这种指定了元素的类型而以。

E:nth-l a st-of-ty pe

这个选择器不用说大家都能想得到了他和前面的E:nth-last-chi ld一样使用只是他指定了元素的类型而以。

E:only-child和E:only-of-type

E:only-chi ld"表示的是一个元素是它的父元素的唯一一个子元素。

E:only-of-type是表示一个元素他有很多个子元素而其中只有一个子元素是唯一的那么我们使用这种选择方法就可以选择中这个唯一的子元素

展开全文