本篇文章给大家带来的内容是关于如何使用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常见的布局方式（附代码）
以上就是css选择器有哪些类型？css常用选择器的简单介绍的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610995.html
微信扫一扫 
支付宝扫一扫 
