CSS选择器种类及使用方法金沙官网线上

css选择器 有通配符选择器书写格式:*+{声名块} 并集选择器/组合选择器 书写格式;元素或类或id+“”+元素或类或id+“,”+元素或类或id{声明块} 列:h1,h2,h3{color:red;} 层次选择器 : 子集选择器: 格式:父级元素名称+">"+子级元素名称+{声明块} 例:div>p{color:red;} 后代选择器: 格式:祖先元素名称+空格+后代元素名称+{声明块} 例:div p{color:red;} 兄第选择器: 格式: A元素名称+"+"+B元素名称+{声明块} 例:div+P{color:red;} 注:选择A元素后的B元素,AB之间不许有其他元素. 通用选择器: 格式:同级元素A+"~"+同级元素B+{声明块} 例:div~p{color:red;} 注:表示选择与A元素同级别的所有B元素(B的位置是在A后面)。 伪类选择器 动态伪类选择器未访问 (把默认值改为黑色); a:link{color:black;} 鼠标悬停 a:hover{color:pink;} 鼠标点击时 a:active{color:green;} 点击后 a:visited{color:五颜六色;}; 注:hover是可以用于多个元素身上的,但其他三个只能用于具有点击功能的元素上。 a:focus{color:颜色;} 多用于输入框或链接(注:IE7以前不支持:focus注;IE6以前不支持:hover :active) 以上5个的顺序要求: A:link,visited,focus,hover,active B:visited,link,focus,hover,active 结构伪类选择器 格式:元素名称+":nth-child(n)"+{声明块} 例:section:nth-child(2){color:deeppink;} 表示选中html里的第二个section元素,文字设置为deeppink 选中第一个 格式:元素名称+":first-child"+{声明块} 例:p:first-child{color:red;} 选中最后一个 格式:元素名称+":last-child"+{声明块} 例:p:last-child{color:red;} 选中奇数项 格式:元素名称+":nth-child(odd)"+{声明块} 例:section:nth-child(odd){color:red;} 选中偶数项 格式:元素名称+":nth-child(even)"+{声明块} 例:section:nth-child(even){color:red;} 伪元素选择器 元素后面加内容 格式:元素名称+":after"+{content:"要添加的内容";} 例:i:after{content:"姓名";} 元素前面加内容 格式:元素名称+":before"+{content:"要添加的内容";} 例:i:before{content:"姓名";} 元素第一行添加样式 格式:元素名称+":first-line"+{声明块} 例:p:first-line{color:red;} 元素第一个字母或第一个汉字 格式:元素名称+":first-letter"+{声明块} 例:p:first-letter{color:red;} 注:为了解决兼容性,伪元素选择器,建议打两个冒号

选择器:

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

本文由金沙官网线上发布于Web前端,转载请注明出处:CSS选择器种类及使用方法金沙官网线上

您可能还会对下面的文章感兴趣: