css选择器类型有哪些?下面本篇文章就来给大家简单介绍一下CSS中常用的选择器。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
标签选择器
作用:选中页面中的所有指定元素
语法:标签名:{}
id选择器
作用:通过元素的id属性值钻中唯一一个元素
语法:#id{}
css类选择器
作用:通过元素的class属性值选中一组元素
语法:.class属性值{}
可以同时为一个元素设置多个class属性值,多个值之间用空格隔开
选择器分组(并集选择器)
作用: 通过选择器分组可以同时选中多个选择器对应的元素
语法:选择器1,选择器2,选择器N{}
例:选中id为p3、class属性值包含p2、h1标签#p3,.p2,h1{
background-color: yellow;
}
通配选择器
作用:选中页面中所有的元素
语法:*{}
交集选择器(复合选择器)
作用:可以选择同时满足多个选择器的元素
语法:选择器1选择器2选择器N{}
注意:因为id可以唯一确定一个元素,因此不要对id使用交集选择器
例:选中class属性值包含p4的spanspan.p4{
background-color:#4169E1;
}
元素之间的关系:父元素:直接包含子元素的元素。
子元素:直接被父元素包含的元素。
祖先元素:直接或简介包含后代元素的元素,父元素也是祖先元素。
后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素。
兄弟元素:拥有相同父元素的元素。
后代元素选择器
作用:选中指定元素的后代元素
语法:祖先元素 后代元素{}
例:选中div中的spandiv span {
color: chartreuse;
}
子元素选择器(IE6及以下的浏览器不支持)
作用:选中指定父元素的指定子元素
语法:父元素>子元素
例:选中div中的spandiv>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标签中的第一个字符设置为黄色25pxp:first-letter {
color: yellow;
font-size: 25px;
}
p:first-line {
background: #FF0000;
}
/*将content的内容添加到p元素的最前面*/
p:before {
content: "ABC";
}
/*将content的内容添加到p元素的最后面*/
p:after {
content: "DEF";
}
否定伪类:
作用:从选种的元素中剔除某些元素
语法: :not(选择器)
例:为所有的p元素设置一个背景颜色,出了class为hello或hello2的元素p:not(.hello):not(.hello2){
background-color: antiquewhite;
}
属性选择器
作用:可以根据元素中的属性或属性值来选取指定的元素
语法:[属性名] 选取具有指定属性的元素
[属性名=属性值 ]选取含有指定属性值的元素
[属性名^=属性值]选取属性值以指定内容开头的元素
[属性名$=属性值]选取属性值以指定内容结尾的元素
[属性值*=属性值]选取属性值包含指定内容的元素/*为具有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;
}
相邻兄弟选择器
作用:可以选中一个元素后紧挨着的指定兄弟元素
语法:前一个+后一个
例:选中p标签后的相邻的兄弟span(p和span不一定相邻)p+span{
color:red;
}
通用兄弟选择器
语法:前一个~后边所有 (E~F)
更多前端开发知识,请查阅 HTML中文网 !!