选择器

Posted 梦想起航我起床

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选择器相关的知识,希望对你有一定的参考价值。

选择器:

1.基础选择器

         通配符选择器

                   *{}

         元素选择器

                   h1{}

         组合选择器/并集选择器

                   h1,h2,h3{}

         类选择器

                   选择html标签中属性名为class的值得标签

                   <h1 class="tit"></h1>

.tit{}

                   注意

                            必须要以英文点号开始

                            包含字母、数字、连字符、下划线

                            点号后面必须是字母开始

                            区分大小写

                            一个类选择器(类名)可以应用到多个标签

                   p.home   p元素下类为home的p选中

         ID选择器

                   <h1 id="tit"></h1>

#tit{}

2.层次选择器

         后代选择器

                   祖先元素  后代元素{}

         子级选择器

                   父级元素>子级元素{}

         兄弟选择器

                   兄弟元素A+兄弟元素B{}

                   选择元素A后面的元素B,且必须是紧邻的,即两元素间不能有其他元素

         通用选择器    

                   兄弟元素A~兄弟元素B

                            选择匹配的B元素,即A元素后的所有B元素

                            p~span{}

3.伪类选择器

         静态伪类选择器

                   链接未访问使用:link

                            a:link{}

                   已访问时使用:visited

                            a:visited{}

         动态伪类选择器

                   获取焦点:focus

                            使用tab触发焦点时的样式

                            a:focus{}

                   鼠标悬停时使用:hover

                            a:hover{}

                   鼠标点击时使用:active

                            a:active{}

         结构伪类选择器

                   没有其他类型的兄弟元素

                            选择li下的第一个li

                                     li:first-child{}

                            选择li下的最后一个li

                                     li:last-child{}

                            选择第n个li

                                     li:nth-child(n){}

                            选择倒数第n个li

                                     li:nth-last-child(n){}

                            取奇数项li

                                     li:nth-child(2n+1){}      n取0、1、2

                                     li:nth-child(odd){}

                            取偶数项li

                                     li:nth-child(2n){}      n取0、1、2

                                     li:nth-child(even){}

                   其他类型的兄弟元素

                            选中p类型下的第n个p元素

                                     p:nth-of-type(n){}

                   选中没元素内容的p标签

                            p:empty{}

                   选中父级只有一个子级标签的子级标签

                            div>em:only-child{}

                   否定伪类选择器

                            除了li下面的第n个li元素不选,其他全部选中

                            li:not(:nth-child(n)){}

4.伪元素选择器

         以两个冒号开始

         元素::selection{}

                   规则中只有color和background

         只适用块元素

                   元素::first-letter{}

                            选中第一个字母

                   元素::first-line{}

                            选中第一行

         在标签前加内容

                   元素::before{content:"";

color: red;}

         在标签后加内容

                   元素::after{content:"";

color: red;}

5.属性选择器

         input[type="text"]{}

                   选中属性值为text的input

         input[type|="text"]{}

                   选中以text-开始的input的type属性值

                   <input type="text-sadads">

         input[type^="text"]{}

                   选中标签中type属性以text属性值开始

                   注:该声明表示属性值有多个并每一个属性值之间用空格隔开

                   <input type="text sadads">

         input[type*="text"]{}

                   选中input标签中type属性包含text属性值,属性值之间可不隔开

                   <input type="sadtextsadads">

         input[type~="text"]{}

                   选中input标签中type属性包含text属性值

                   注:该声明表示属性值有多个并每一个属性值之间用空格隔开

                   <input type="sadds text sadads">

         input[type$="text"]{}

                   选中标签中type属性以text属性值结束

                   <input type="ssd text">

         通常用在input

以上是关于选择器的主要内容,如果未能解决你的问题,请参考以下文章

CSS选择器(属性选择器,关系选择器,伪类选择器,伪元素选择器)

标记选择器、类选择器、id选择器、伪类选择器的先后顺序是啥?

jQuery选择器介绍:基本选择器层次选择器过滤选择器表单选择器

前端基础css 选择器

JavaScript之jQuery-2 jQuery选择器(jQuery选择器基本选择器层次选择器过滤选择器表单选择器)

CSSCSS 复合选择器 ③ ( 并集选择器 | 并集选择器与后代选择器示例 )