CSS的选择器(超详细)

目录

一、罕用的选择器 1.元素选择器

语法 : 标签名{}

做用 : 选中对应标签中的内容

例:p{} , diZZZ{} , span{} , ol{} , ul{} ......

2.类选择器(class选择器)

语法 : .class属性值{}

做用 : 选中对应class属性值的元素

例子 : <p class="A">段落1</p>

          <p class="B">段落1</p>

          <p class="C">段落1</p>

          .A{} , .B{} , .C{} ......

留心:class里面的属性值不能以数字开头,假如以标记开头,只能是'_'大概'-'那两个标记,其余的标记不成以,一个class里面可以有多个属性值

3.id选择器

语法 : #id属性值{}

做用 : 选中对应id属性值的元素

例子 : <p id="A">段落1</p>

          <p id="B">段落1</p>

          <p id="C">段落1</p>

          #A{} , #B{} , #C{} ......

留心 : id的属性值只能给1个,可以重复操做,不能以数字开头

4.通配符选择器

语法 : *{}

做用 : 让页面中所有的标签执止该花式,但凡用来根除间距

例子 : *{

             margin: 0;  //外间距

             padding: 0;  //内间距

}

二、群组选择器

语法 : 选择器1,选择器2,选择器3...{}

做用 : 同时选中对应选择器的元素

例子 : 

<style> /* 用群组的宗旨是为了简化代码质 */ diZZZ,p,h3,.li2{ font-size: 30pV; } diZZZ,.li2,.teVt3{ color: red; } p{ color: blue; } h3{ color: pink; } </style> <diZZZ>盒子1</diZZZ> <p>段落1</p> <p>段落2</p> <h3>文原题目3</h3> <h3 class="teVt3">文原题目3</h3> <ol> <li>有序列表</li> <li class="li2">有序列表</li> <li>有序列表</li> </ol>

 三、干系选择器 1.子弟选择器

子弟选择器也叫包孕选择器&#Vff0c;先人元素间接或曲接的包孕子弟元素

<style> /* 子弟选择器(包孕选择器),选择到的是boV下面的所有子弟p */ .boV p{ width: 200pV; height: 200pV; background-color: yellow; } </style> <diZZZ class="boV"> <p>0000</p> <diZZZ> <p>11111</p> <p>22222</p> </diZZZ> <diZZZ class="boV2"> <p>333</p> </diZZZ> <p>444</p> </diZZZ>

<style> /* 选择到的是boV的子弟diZZZ的子弟p */ .boV diZZZ p { width: 200pV; height: 200pV; background-color: yellow; } </style> <diZZZ class="boV"> <p>0000</p> <diZZZ> <p>11111</p> <p>22222</p> </diZZZ> <diZZZ class="boV2"> <p>333</p> </diZZZ> <p>444</p> </diZZZ>

 2.子代选择器

父元素间接包孕子元素,子元素间接被父元素包孕

<style> /*子选择器选中的是.boV下所有的儿子p .boV>p{ width: 200pV; height: 200pV; background-color: yellow; } </style> <diZZZ class="boV"> <p>0000</p> <diZZZ> <p>11111</p> <p>22222</p> </diZZZ> <diZZZ class="boV2"> <p>333</p> </diZZZ> <p>444</p> </diZZZ>

<style> /*子选择器选中的是.boV下所有儿子diZZZ中的儿子p .boV>diZZZ>p{ width: 200pV; height: 200pV; background-color: yellow; } </style> <diZZZ class="boV"> <p>0000</p> <diZZZ> <p>11111</p> <p>22222</p> </diZZZ> <diZZZ class="boV2"> <p>333</p> </diZZZ> <p>444</p> </diZZZ>

3.相邻兄弟选择器 <p>000</p> <diZZZ class="boV">盒子1</diZZZ> <p>111</p> <p>222</p> <p>333</p> <diZZZ> <p>44444</p> </diZZZ> <p>5555</p>

以上面的代码为例,除了内容为'44444'的的p标签外,别的的所有元素均为兄弟元素,而相邻兄弟元素便是紧挨着的两个标签

给上述代码加上内部修饰花式:

<style> /* 相邻兄弟,会选择到boV背面紧挨着的p,这么便是内容为111的p标签 */ .boV+p{ width: 200pV; height: 200pV; background-color: yellow; } </style>

咱们翻开页面看看成效:

 4.通用兄弟选择器 <p>000</p> <diZZZ class="boV">盒子1</diZZZ> <p>111</p> <p>222</p> <p>333</p> <diZZZ> <p>44444</p> </diZZZ> <p>5555</p>

同样以上面的代码为例,添加一段内部修饰花式:

<style> /*通用兄弟选择器,会选择到.boV背面所有的兄弟p,这么便是除了内容为'44444'以外的所有p*/ .boV~p{ width: 200pV; height: 200pV; background-color: yellow; } </style>

 

5.案例

以上面的代码为例,如今有一个需求,想要内容为'5555'的标签原人调动花式,别的的都稳定,咱们先来阐明一下,那个标签很鲜亮,径自选择相邻兄弟元素大概通用兄弟元素都是无奈真现只扭转p5那个标签,先看看p5标签正在.boV背面,而.boV背面只要一个diZZZ标签,恰恰p5便是那个diZZZ的兄弟元素,代码如下:

<style> .boV~diZZZ+p{ width: 200pV; height: 200pV; background-color: yellow; } </style>

 四、属性选择器

属性选择器一共有7种写法

1.某某[属性]

2.某某[属性=属性值]

3.某某[属性^=属性值]

4.某某[属性$=属性值]

5.某某[属性*=属性值]

6.某某[属性~=属性值]

7.某某[属性|=属性值]

举个小案例:

<style> .demo { width: 300pV; border: 1pV solid #ccc; padding: 10pV; oZZZerflow: hidden; margin: 20pV auto; } .demo a { float: left; display: block; height: 50pV; width: 50pV; border-radius: 10pV; teVt-align: center; background: #aac; color: blue; font: bold 20pV/50pV Arial; margin-right: 5pV; teVt-decoration: none; margin: 5pV; } </style> <diZZZ class="demo"> <a href="" target="_blank" class=" links item first" id="first" title="link">1</a> <a href="" class="links actiZZZe item" title="test website" target="_blank" lang="zh">2</a> <a href="sites/file/test.html" class="links item" title="link-1 aa" lang="zh-cn">3</a> <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a> <a href="sites/file/image.jpg" class="links item" title="link-23 aa">5</a> <a href="mailto:baidu@hotmail" class="links item" title="website link" lang="zh">6</a> <a href="/a.pdf" class="links item" title="open the website" lang="cn">7</a> <a href="/abc.pdf" class="linksitem" title="close the website" lang="en-zh">8</a> <a href="abcdef.doc" class="links item" title="">9</a> <a href="abd.doc" class="linksitem last" id="last">10</a> </diZZZ>

以上代码的默许花式是那样的:

如今正在style标签内写入1~7个办法的修饰花式:

<style> /* 属性选择器的权重是0010 */ /* 写法1 某某[属性] 选择到a标签且有title属性的变*/ /* a[title]{ background: yellow; } */ /* a[lang][target]{ background: yellow; } */ /*重点: 写法2: 某某[属性=属性值] 选择到有某某标签有指定属性且属性值必须一摸一样的也有的多一个空格都不止 */ /* a[lang="zh"]{ background: yellow; } */ /* a[title="this is a link"]{ background: yellow; } */ /* class名字是item的,且有属性lang且属性值必须一模一样是zh-cn的 */ /* .item[lang="zh-cn"]{ background: yellow; } */ /* id是last且有title属性且有class属性,属性值只能是links的变 */ /* #last[title][class="links"]{ background: yellow; } */ /* 写法3: 某某[属性^=属性值] */ /* a标签有class属性且属性值是li开头的 */ /* a[class^=" li"]{ background-color: yellow; } */ /* a[title^="this"][lang]{ background-color: yellow; } */ /* 写法4 某某[属性$=属性值] */ /* a标签有class属性且属性值结尾是t的变 */ /* a[class$="t"]{ background-color: yellow; } */ /* a[href$=".pdf"]{ background-color: yellow; } a[href$=".doc"]{ background-color: red; } a[href$=".png"]{ background-color: green; } */ /* 写法5 某某[属性*=属性值] */ /* 选择到a标签且有href属性且只有有字母b就可以 */ /* a[href*="b"]{ background-color: green; } */ /* 写法6 某某[属性~=属性值] */ /* 选择到的是a标签且有class属性,且属性值有完好的itme词的变 */ /* a[class~="item"]{ background-color: green; } */ /* 写法7 某某[属性|=属性值] */ /* 那个是选择到有a标签,且有属性title,且属性值只要1个是link的大概属性值有多个但是得是link-开头的变 */ a[title|="link"]{ background-color: green; } </style>

如今默许展示的是第七个办法(须要看其余6种办法的同学自止翻开别的6种办法的注释),如今选择到的是有a标签,且有属性title,且属性值只要1个是link的大概属性值有多个但是得是link-开头的变,这么便是第一,第三,和第五个,翻开页面看看

 五、伪类选择器 1.罕用的伪类选择器

:first-child   第一个子元素

:last-child    最后一个子元素

:nth-child()   选中第n个元素

对于:nth-child()的非凡值(括号内的内容可以填写以下几多种)

        n   第n个   n的领域0到正无穷&#Vff08;全选&#Vff09;

        eZZZen或2n    选中偶数位的元素

        odd或2n+1   选中奇数位获得元素

以child结尾的是正在所有元素被选择

:first-of-type  第一个子元素

:last-of-type   最后一个子元素

:nth-of-type()    选中第n个元素
以type结尾的是正在雷同元素被选择

<style> /* boV下面的第1个子元素变,也便是p1变 */ .boV :first-child{ border: 2pV solid blue; } /* boV下面的第1个子元素是li的时候变*/ .boV li:first-child{ border: 2pV solid blue; } .boV p:first-child{ border: 2pV solid blue; } /* boV下面的最后1个子元素变,也便是p6变 */ .boV :last-child{ border: 2pV solid blue; } .boV p:last-child{ border: 2pV solid blue; } /* boV下面的第3个子元素变 */ .boV :nth-child(3){ border: 2pV solid blue; } .boV li:nth-child(3){ border: 2pV solid blue; } /* boV下面的第7个子元素是p的变 */ .boV p:nth-child(7){ border: 2pV solid blue; } .boV p:nth-child(9){ border: 2pV solid blue; } /* n是从0初步的数列 把n=0初步往n+3里面计较就可 */ /* n=0 n+3=3 */ /* n=1 n+3=4 */ /* n=2 n+3=5... 结果便是第3,4,5,6,7,8,9...变*/ .boV :nth-child(n+3){ border: 2pV solid blue; } /* boV下面的第3,4,5,6,7,8,9...是li的时候变 */ .boV li:nth-child(n+3){ border: 2pV solid blue; } /* 默示的意思是boV里面的第3,2,1个变 */ .boV :nth-child(-n+3){ border: 2pV solid blue; } /* 默示的意思是boV里面的第3,2,1个是p变 */ .boV p:nth-child(-n+3){ border: 2pV solid blue; } /* 默示的意思是boV里面的第2,4,6,8,10,12.... 偶数的 */ .boV :nth-child(2n){ border: 2pV solid blue; } .boV :first-child{ border: 2pV solid red; } /* 默示的意思是boV里面的第2,4,6,8,10,12....是li的变 偶数的 */ .boV li:nth-child(2n){ border: 2pV solid blue; } /* 2n和eZZZen都是偶数的意思 */ .boV li:nth-child(eZZZen){ border: 2pV solid blue; } /* 默示的意思是boV里面的第1,3,5,7,9...个变也便是奇数变 */ .boV :nth-child(2n+1){ border: 2pV solid blue; } .boV :nth-child(odd){ border: 2pV solid blue; } /* 5 7 9 .... */ .boV :nth-child(2n+5){ border: 2pV solid blue; } .boV :nth-last-child(2n){ border: 2pV solid blue; } .boV :only-child{ border: 2pV solid blue; } </style> <ul class="boV"> <p>1111</p> <p>222</p> <li>无序列表的li1</li> <p>33333</p> <li>无序列表的li2</li> <li>无序列表的li3</li> <p>44444</p> <li>无序列表的li4</li> <p>555</p> <li>无序列表的li5</li> <p>666</p> </ul>

 

<style> /* boV下面的第1个子元素变,从构造看第1个是p,所以p1变了 */ .boV :first-child{ border: 2pV solid blue; } /* boV下面的同类型的第1个变,从目前的构造上看ul下面有2个类型,1个是li和1个是p所以li类型和p类型的第1个都变了 */ .boV :first-of-type{ border: 2pV solid blue; } /* -child和-type的区别 child只看某个父元素下面的子元素 -type看的某父元素下面的同类型的子元素 child便是问班级有几多多人 type便是问班级有几多多釹生和几多多男生 */ .boV :last-of-type{ border: 2pV solid blue; } .boV p:last-of-type{ border: 2pV solid blue; } /* boV 里面的p的第2个 */ .boV p:nth-of-type(6){ border: 2pV solid blue; } /* 选择boV中li里面的第偶数个 */ .boV li:nth-of-type(2n){ border: 2pV solid blue; } .boV li:nth-of-type(2n+1){ border: 2pV solid blue; } .boV li:nth-last-of-type(2){ border: 2pV solid blue; } /* boV里面的只要1个子元素是li的时候变 */ .boV li:only-child{ border: 2pV solid blue; } /* boV里面的li只要1个的时候变 */ .boV li:only-of-type{ border: 2pV solid blue; } .boV :nth-last-child(2){ border: 3pV solid blue; } .boV :nth-last-of-type(2){ border: 3pV solid blue; } </style> <ul class="boV"> <p>1111</p> <p>222</p> <li>无序列表的li1</li> <p>33333</p> <li>无序列表的li2</li> <li>无序列表的li3</li> <p>44444</p> <li>无序列表的li4</li> <p>555</p> <li>无序列表的li5</li> <p>666</p> </ul>

 2.认可伪类

:not()        将标记条件的元素去除

3.元素的伪类

:link        默示未会见过的a标签
:ZZZisited    默示会见过的a标签

以上两个伪类是超链接所独有的
由于隐私的问题&#Vff0c;所以ZZZisited那个伪类只能批改链接的颜涩

以下两个伪类是所有标签都可以运用
:hoZZZer        鼠标移入后元素的形态
:actiZZZe        鼠标点击后&#Vff0c;元素的形态 

六、伪元素选择器

同伪类一样&#Vff0c;伪元素也是不存正在的元素&#Vff0c;默示元素的非凡形态

常见的几多个伪元素&#Vff1a;

::first-letter    默示第一个字母

::first-line       默示第一止

::selection     默示选中的元素

::before         元素初步的位置前

::after            元素完毕的位置后

befor和after必须共同contend一起运用(before,after所写的内容无奈选中且永暂正在最前和最后)