Rumah >hujung hadapan web >tutorial css >css选择器有哪些类型?css常用选择器的简单介绍

css选择器有哪些类型?css常用选择器的简单介绍

不言
不言asal
2018-08-09 15:59:484063semak imbas

本篇文章给大家带来的内容是关于如何使用css选择器有哪些类型?css常用选择器的简单介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

css标签选择器

作用:选中页面中的所有指定元素

语法:标签名:{}

id选择器

作用:通过元素的id属性值钻中唯一一个元素

语法:#id{}

css类选择器

作用:通过元素的class属性值选中一组元素

语法:.class属性值{}

可以同时为一个元素设置多个class属性值,多个值之间用空格隔开

选择器分组(并集选择器)

作用: 通过选择器分组可以同时选中多个选择器对应的元素

语法:选择器1,选择器2,选择器N{}

例:选中id为p3、class属性值包含p2、h1标签

                 #p3,.p2,h1{
                                  background-color: yellow;
                            }

css通配选择器

作用:选中页面中所有的元素

语法:*{}

css交集选择器(复合选择器)

作用:可以选择同时满足多个选择器的元素

语法:选择器1选择器2选择器N{}

注意:因为id可以唯一确定一个元素,因此不要对id使用交集选择器

例:选中class属性值包含p4的span

span.p4{
                                    background-color:#4169E1;
                           }

元素之间的关系:

父元素:直接包含子元素的元素。

子元素:直接被父元素包含的元素。

祖先元素:直接或简介包含后代元素的元素,父元素也是祖先元素。

后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素。

 兄弟元素:拥有相同父元素的元素。

css后代元素选择器

作用:选中指定元素的后代元素

语法:祖先元素 后代元素{}

例:选中div中的span

  div span {
                                        color: chartreuse;
                                }

css子元素选择器(IE6及以下的浏览器不支持)

作用:选中指定父元素的指定子元素

语法:父元素>子元素

 例:选中div中的span

                 div>span{
                              background-color: yellow;
                     }

伪类选择器用来表示元素的一种特殊的状态。

如:访问过的超链接,普通超链接,获取焦点的文本框

当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类给连接定义的样式

正常链接:a:link

访问过的链接:a:visited(只能定义颜色)

鼠标滑过的连接:a:hover

正在点击的链接:a:active

a:link和a:visited之间的顺序没规定,但他们必须在a:hover和a:active前面,a:hover又必须在a:active前面

 hover和active也可以为其他元素设置 如 p:hover p:active 不过ie6及以下不支持

其他伪类:

:focus   获取焦点

:before  指定元素前

:after   指定元素后

::selection   选中的元素(火狐中应该这样用::-moz-selection)

使用伪元素来表示元素中的一些特殊位置

:first-letter : 第一个字符

:fist-line    : 第一行字符

 :before       : 表示元素最前边的部分

一般before都需要结合content这个样式一起使用,

通过content可以向before或after的位置添加一些内容

:after        : 表示元素的最后边

将p标签中的第一个字符设置为黄色25px 

   p:first-letter{
                        color:yellow;
                        font-size: 25px;
                    }
                   p:first-line{
                       background: #FF0000;
                   }
                  将content的内容添加到p元素的最前面
                   p:before{
                       content: "ABC";
                   }
                   将content的内容添加到p元素的最后面
                   p:after{
                       content: "DEF";
                   }

css属性选择器

作用:可以根据元素中的属性或属性值来选取指定的元素

语法:[属性名]选取具有指定属性的元素

[属性名=属性值 ]选取含有指定属性值的元素

[属性名^=属性值]选取属性值以指定内容开头的元素

[属性名$=属性值]选取属性值以指定内容结尾的元素

[属性值*=属性值]选取属性值包含指定内容的元素

    /*为具有title属性的p元素设置背景颜色*/
                p[title]{
                     color: darkorchid;
                }
                /*为title属性值为hello的元素设置一个背景颜色*/
                p[title=hello]{
                     background-color: cornflowerblue;
                }
                /*为title属性是ab开头的元素设置一个背景颜色*/
                p[title^="ab"]{
                     background-color: chartreuse;
                }
                p[title$="d"]{
                     font-size: 28px;
                }

伪类子元素选择器

:first-child  : 可以选中第一个子元素

:last-child   : 可以选中最后一个元素

:nth-child    : 可以选中任意位置的子元素

该选择器后边可以指定一个参数,指定要选择第几个元素

even:偶数

odd:  奇数                        

first-of-type

 last-of-type

 nth-of-type

和xxx-chlid类似,不过xxx-child是在所有元素中选择,xxx-of-type是在指定类型中选择

例:选中第一个p标签

p:first-child{
                           color:coral;
                      }
                     选中第3个p标签
                     p:nth-child(3){
                           color:chartreuse;
                     }
                     设置表格奇偶行背景颜色不同
                     tr:nth(even){
                                background-color:pink; 
                     }
                    
                     tr:nth(odd){
                                background-color:skyblue; 
                     }

 后一个兄弟元素选择器

 作用:可以选中一个元素后紧挨着的指定兄弟元素

语法:前一个+后一个

例:选中p标签后的相邻的兄弟span(p和span不一定相邻)

  p+span{
                                     color:red;
                            }

选中后边的所有兄弟元素

语法:前一个~后边所有 

否定伪类:

 作用:从选种的元素中剔除某些元素

语法: :not(选择器)

例:为所有的p元素设置一个背景颜色,出了class为hello或hello2的元素

              p:not(.hello):not(.hello2){
                                  background-color: antiquewhite;
                          }

相关文章推荐:

什么是css?css三种样式以及文字属性的介绍

CSS布局有哪些?css常见的布局方式(附代码)

Atas ialah kandungan terperinci css选择器有哪些类型?css常用选择器的简单介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn