css选择器一览

来源：互联网发布：优酷软件编辑：程序博客网时间：2024/06/16 18:54

本例中css代码在<style>标签里，html代码在<template>标签里，类似vue的写法。

1.（*，通配符选择器）选择所有元素：

<style>    *{        color: red;    }</style><template><div></div><span><span></template>

2.（id选择器）选择相同id名的所有元素，一般一个id名只能对应一个标签，不能使用同名id。如下面是非法的，但是一般浏览器会忽视这个错误：

<style>    #a{color:red;}</style><template><div id='a'>aa</div><div id='a'>bb</div></template>

3.（class选择器）选择相同class名的所有元素：

<style>    .a{color:red;}</style><template><div class='a'>aa</div><div class='a'>bb</div></template>

4.（元素选择器）选择所有相同元素名的所有元素：

<style>    div{color:red;}</style><template><div>aa</div><div>bb</div></template>

5.（ele1,ele2，群组选择器）选择所有元素名为ele1、ele2的所有元素 :

<style>    div,span{color:red;}</style><template><div>aa</div><span>bb</span></template>

6.（ele1 ele2，后代选择器）选择所有在ele1元素下面的所有ele2元素：

<style>    div span{color:red;}</style><template><div>    <span>aa</span>    <span>bb</span></div></template>

7.（ele1>ele2，子选择器）选择父元素为ele1的所有ele2元素：

<style>    div>p{color:red;}</style><template><div>    <p>aa</p>    <p>bb</p></div><p>cc</p></template>

8.（ele1+ele2，相邻兄弟选择器）选择ele1元素后的一个ele2元素：

<style>    div+p{color:red;}</style><template><div>aa</div><p>bb</p><p>cc</p></template>

9.（ele1~ele2选择器） css3属性，选择前面有ele1的每个ele2元素，注意是前面：

<style>    div~p{color:red;}</style><template><p>aa</p><div>bb</div><p>cc</p><p>dd</p></template>

10.（属性选择器）选择属性名为某个值的所有元素：

<style>    [name]{color:red;}</style><template><div name='a'>aa</div><p name='a'>bb</p></template>

属性选择器前边可以写元素名或者id名、class名设置是*来进一步确定元素。如：

<style>    [name]{        color: red;    }    div[name]{        color: green;    }    .b[name]{        color:yellow;    }    #c[name]{        color:blue;    }</style><template>    <div>pp</div>    <p name='a' class='b'>aa</p>    <p name='a' id='c'>bb</p>    <p name='a'>cc</p>    <div name='a'>dd</div></template>

属性选择器有另外的三种写法，一种是[ele=value]，一种是[ele~=value]，另一种是[ele|=value]。第一种的意思是选择属性值等于value的元素，第二种的意思是选择属性值包含value的元素，第三种的意思是选择属性值以value开头的元素。注意，value值是一个单词，如：

<style>    [name]{        color: red;   }   [name=a]{     color: green;   }   [name~=b]{     color:yellow;   }   [name|=c]{     color:blue;   }</style><template>    <div>pp</div>   <p name='a' class='b'>aa</p>   <p name='a b' id='c'>bb</p>   <p name='c-a'>cc</p>   <div name='d'>dd</div></template>

如果上面的a b没有隔开，c-a没有一个减号隔开，则不会出现上面的效果。如果想要像正则表达式一样可以通过一段字符串来查找属性的话，在css3中属性选择器增加了三个属性，一个是[ele^=value]，一个是[ele$=value]，另一个是[ele*=value]。第一个的意思是选择以value字符串开头的属性值的元素，第二个的意思是选择以value字符串为结尾的属性值的元素，第三个的意思是选择属性值中包含value字符串的元素。如：

<style>    [name]{        color: red;   }   [name$=d]{     color: green;   }   [name*=b]{     color:yellow;   }   [name^=c]{     color:blue;   }</style><template>    <div>pp</div>   <p name='a' class='b'>aa</p>   <p name='ab' id='c'>bb</p>   <p name='cac'>cc</p>   <div name='ddd'>dd</div></template>

11.a标签的四个重要伪类选择器L-V-H-A（:link,:visited,:hover,:active），如果实际开发中不按照这个顺序写的话，可能就出现一些小bug。link表示选择所有未被访问的链接，visited表示选择所有已被访问的链接，hover表示选择鼠标指针在链接上的链接，active表示选择活动链接。如：

<style>    a:link{color:red;}    a:visited{color:green;},    a:hover{color:blue;},    a:active{color:yellow;}</style><template><a>gaga</a></template>

12.（:focus伪类选择器）选择获得焦点的元素：

<style>    input:focus{border-color:red;}</style><template><input type='text'></input><input type='text'></input></template>

13. （:first-letter、:first-line、:first-child伪类选择器）第一个是获得每个该元素的首字母，第二个是获得每个该元素的第一行，第三个是获得每个该元素的第一个子元素。注意，:first-letter伪类不能直接用在内联样式，如果想用在内联样式的话先设定它的position为absolute或者设定display为block或者inlink-block。如：

<style>            span{                display: inline-block;                /*position: absolute;*/            }            span:first-letter {                color: red;            }            p:first-line {                color: red;            }            div h3:first-child {                color:blue;            }</style><template><span>abc</span>        <p>alsfknvwaginwoifbwalsfknvwaginwoifbwalsf knvwaginwoifbwalsfknvwaginwoifb walsfknvwaginw oifbwalsfknvwaginw oifbwalsfknvwaginwoifbwalsfknvwaginwoif bwalsfknvwaginwoifbwalsfknv waginwoifbwalsfknvwagin woifbwalsfknvwag inwoifbwalsfknvwaginwoifbwalsfknvwaginw oifbwalsfknvwaginwoifbw</p>        <div>            <h3>aaa</h3>            <h3>bbb</h3>        </div></template>

14.（:before，:after伪类选择器）第一个为某元素之前插入内容，第二个是某元素之后插入内容。如：

<style>    p:before{content:"before";}    p:after{content:"after";}</style><template>    <p>now</p></template>

15.（:lang(value)伪类选择器）选择lang的属性值中带有value开头的所有元素，注意，这里写法有点像属性选择器中[ele|=value]的写法：

<style>    p:lang(en){content:"before";}</style><template>    <p lang='en'>aaa</p>    <p lang='en-a'>bbb</p>    <p lang='ena'>ccc</p></template>

16:.（:first-of-type、:last-of-type、:only-of-type伪类选择器）这三个选择器都是css3新添加的选择器，第一个的作用是选择属于其父元素的首个某元素的每个某元素，第二个跟第一个正好相反，是选择属于其父元素的最后某元素的每个某元素，第三个是选择属于其父元素唯一的某元素的每个元素。:first-of-type和:last-of-type例子如下：

<style> p:first-of-type{background:red;}p:last-of-type{background:green;}</style><template><h1>这是标题</h1><div>    <p>adf</p>    <p>adf</p></div><p>这是第一个段落。</p><p>这是第二个段落。</p><p>这是第三个段落。</p><p>这是第四个段落。</p><div>    <p>adf</p>    <p>adf</p></div></template>

:only-of-type例子如下：

<style> p:only-of-type{background:#ff0000;}</style><template><p>这是一个段落。</p><div><p>这是一个段落。</p></div><div><p>这是一个段落。</p><p>这是一个段落。</p></div></template>

17.（:only-child、:last-child伪类选择器）同样，这两个元素css3的新选择器。第一个表示的是选择所有其父元素只有一个子元素的元素。第二个表示的是选择所有其父元素的最后某个元素的元素。先展示:only-child，然后展示:last-child。在IE浏览器中不支持:only-child选择器

<style> p:only-child{background:#ff0000;}</style><template><div><p>这是一个段落。</p></div><div><span>这是一个 span。</span><p>这是一个段落。</p></div></template>

<style> p:last-child{background:#ff0000;}</style><template><div>    <p>a</p>    <p>b</p></div><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p>第五个段落。</p></template>

18.（:nth-child(n)、:nth-of-type(n)伪类选择器）下面所讲的选择器都是css3的新选择器。第一个表示的是选择属于其父元素的第n个子元素的每个某元素。第二个表示的是选择属于其父元素第n个某元素的每个某元素。注意，这两个用法是不同，下面这个例子就看得出来。在IE浏览器中，是不支持:nth-child()选择器的。：

<style> p:nth-child(2){background:#ff0000;}</style><template><div>    <p>aa</p>    <p>bb</p></div><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><div>    <p>aa</p>    <p>bb</p></div></template>

<style> p:nth-of-type(2){background:#ff0000;}</style><template><div>    <p>aa</p>    <p>bb</p></div><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><div>    <p>aa</p>    <p>bb</p></div></template>

除此之外，:nth-child(n)内的参数可以写表达式，写法比较丰富：

:nth-child(length);/*参数是具体数字*/:nth-child(n);/*参数是n,n从0开始计算*/:nth-child(n*length)/*n的倍数选择，n从0开始算*/:nth-child(n+length);/*选择大于length后面的元素*/:nth-child(-n+length)/*选择小于length前面的元素*/:nth-child(n*length+1);/*表示隔几选一*/

其中，上面的length为一个具体的数字，n可以直接写成n，这样子:nth-child(n)将会选择所有的子元素。可以:nth-child(2n)或者:nth-child(even)表示选择偶数的子元素，同理，这样子写:nth-child(2n-1)或者:nth-child(odd)表示的是选择奇数的子元素。下面的:nth-last-of-type(n)也可以像:nth-child(n)的写法。

19.（:nth-last-child(n)、:nth-last-of-type(n)伪类选择器）与上面类似，只不过是从最后一位开始计数，例子就略。
20.（:root伪类选择器）该选择器是选择文档的根元素，在HTML中，根元素始终都是html元素：

<style>    :root{        background:red;    }</style><template><p>a</p></template>

21.（:empty伪类选择器）选择所有没有子元素包括文本节点的元素：

<style> p:empty{width:100px;height:20px;background:#ff0000;}</style><template><p>第一个段落。</p><p></p><p>第三个段落。</p><p>第四个段落。</p><p>第五个段落。</p></template>

22.（:target伪类选择器） URL带有后面跟有锚名称#，指向文档内某个具体的元素。这个被链接的元素就是目标元素。:target选择器可用于选取当前活动的目标元素。注意，在IE8及早期版本是不支持这个选择器的：

<style>:target{border: 2px solid #D4D4D4;background-color: #e5eecc;}</style><template><p><a href="#news1">跳转至内容 1</a></p><p><a href="#news2">跳转至内容 2</a></p><p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p><p id="news1"><b>内容 1...</b></p><p id="news2"><b>内容 2...</b></p></template>

23.（:enabled、:disabled伪类选择器）第一个的意思是选择每个被启用的某元素，第二个意思是选择每个禁用的某元素：

<style> input[type="text"]:enabled{background:#ffff00;}input[type="text"]:disabled{background:#dddddd;}</style><template>First name: <input type="text" value="Mickey" /><br>Last name: <input type="text" value="Mouse" /><br>Country: <input type="text" disabled="disabled" value="Disneyland" /></template>

24.（:checked伪类选择器）选择每个被选中的某元素，这个选择器只有Opera浏览器支持：

<style> input:checked{color:red;}</style><template><input type="radio" checked="checked" value="male" name="gender" /> Male<br><input type="radio" value="female" name="gender" /> Female<br><input type="checkbox" checked="checked" value="Bike" /> I have a bike<br><input type="checkbox" value="Car" /> I have a car </template>

25.（:not(selector)伪类选择器）选择所有非selector的元素：

<style>p{color:#000000;}:not(p){color:#ff0000;}</style><template><h1>这是标题</h1><p>这是一个段落。</p><p>这是另一个段落。</p><div>这是 div 元素中的文本。</div></template>

26.（::selection选择器）选择被用户选取的部分，该选择器中只有少量的css属性，分别是color、background、cursor和outline：

<style>::selection{color:#ff0000;}::-moz-selection{color:#ff0000;}</style><template><h1>请试着选取页面上的文本</h1><p>这是一个段落。</p><div>这是 div 元素中的文本。</div><br><a href="http://www.w3school.com.cn" target="_blank">访问 W3School ！</a></template>

阅读全文

0 0