本篇文章给大家带来的内容是关于css选择器有哪些？css选择器使用总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1.选择符(器)使用基本语法
选择符｛ 属性1：属性值1;
属性2：属性值2;
属性3：属性值3;
…..: …….;
}
2.标记选择器(直接使用HTML标签做选择器)
second.html
标记选择器 标记选择器(直接使用html标签做选择器)
second.css
立即学习“前端免费学习笔记（深入）”；
p{ font-size:34px; text-align:left; text-transform:uppercase; font-family:黑体,宋体; text-indent:3em; text-decoration:line-through; font-weight:bolder; letter-spacing:0.5em; line-height:3px; margin:34px; padding:23px; }
3.类选择器(为每一个标签设置一个类名，CSS可通过类名为标签设置样式，不同标签类名可以相同，相同可以共用同一个样式)-CSS中用标签名.类名或者.类名表示
second.html
类选择器 类选择器(为每一个标签设置一个类名，CSS可通过类名为标签设置样式，不同标签类名可以相同， 相同可以共用同一个样式)---CSS中用标签名.类名或者.类名表示
second.css
立即学习“前端免费学习笔记（深入）”；
.text{ font-variant:small-caps;/*小型大写字母*/ font-family:宋体,黑体; font-style:italic; text-transform:lowercase; font-size:35px; text-indent:3em; text-decoration:overline; font-weight:bold; letter-spacing: 1px; line-height:3em; font-variant:small-caps; text-align:right; }
4.ID选择器(为每一个HTML标签设置一个唯一的ID，CSS可以通过id来为标签设置样式)
—-CSS中用#id值{ }来表示
second.html
ID选择器 ID选择器(为每一个HTML标签设置一个唯一的ID，CSS可以通过id来为标签设置样式) ----CSS中用#id值{ }来表示
second.css
立即学习“前端免费学习笔记（深入）”；
.text{ font-variant:small-caps;/*小型大写字母*/ font-family:宋体,黑体; font-style:italic; text-transform:lowercase; font-size:35px; text-indent:3em; text-decoration:overline; }#textp1{ font-weight:bold; letter-spacing: 1px; line-height:3em; font-variant:small-caps; text-align:right; }
5.包含选择器(后代选择器：可跨代,跨标签)：在一个标签里包含另一个标签
second.html
包含选择器 ID选择器 (为每一个html标签设置一个唯一的ID，CSS可以通过id来为标签设置样式) ----CSS中用#id值{ }来表示
second.css
立即学习“前端免费学习笔记（深入）”；
p a{ text-decoration:none; font-size:25px; background-color:pink; }.text{ font-size:21px; font-style:normal; text-transform:lowercase; text-indent:3em; font-weight:bold; letter-spacing:0.7em; line-height:27px; }
6.子选择符（IE浏览器不支持）：中间不能包含其他标签；CSS中用 标签1 >标签2（子标签） 表示
second.html
子选择器 子选择器 （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示
second.css
立即学习“前端免费学习笔记（深入）”；
p>a{ text-decoration:none; font-family:黑体，宋体; }p{ font-size: 23px;}
7.相邻选择器:(CSS样式作用在最后一个标签)常用设置表格的列属性–CSS用标签1+….标签n表示
second.html
相邻选择器 子选择器: （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示
相邻选择器(CSS样式作用在最后一个标签)常用设置表格的列属性--CSS用标签1+....标签n表示
second.css
立即学习“前端免费学习笔记（深入）”；
.text+.text1{ color:pink; background-color:gray; font-size:34px; }
8.并集选择器:多个标签一起设置样式，用逗号隔开
second.css
立即学习“前端免费学习笔记（深入）”；
并集选择器 子选择器: （IE浏览器不支持）：中间不能包含其他标签；CSS中 标签1 >标签2（子标签） 表示
并集选择器:多个标签一起设置样式，用逗号隔开
second.css
立即学习“前端免费学习笔记（深入）”；
.text,.text1{ color:pink; background-color:gray; font-size:34px;}
9.伪类(元素某一种状态，常用于描述超链接的状态：link(未访问状态); visited(已经访问过的状态);hover(鼠标经过状态);active(正在单击状态)CSS用标签名：状态表示
second.html
伪类 伪类
second.css
立即学习“前端免费学习笔记（深入）”；
a:link { color:blue; font-size:53px; text-decoration: none; }a:visited { color:red; font-size:193px; }a:hover { color:green; font-size:73px; }a:active { color:gray; font-size:183px; }
10.伪元素(某个对象中某个元素的状态)CSS中用标签名：伪类表示
常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])
second.html
伪类 伪元素(某个对象中某个元素的状态)CSS中用标签名： 伪元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])
伪元素(某个对象中某个元素的状态)CSS中用标签名： 伪元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行])
second.css
立即学习“前端免费学习笔记（深入）”；
p:first-letter{ font-size:200%; }p:first-line{ color:red; }
11样式优先级：内联选择器>ID选择器>类选择器（伪类，属性）>标记选择器
可以用!important;加大优先级
相关推荐：
css 类选择器和id选择器
CSS之后代选择器与多类选择器
css 标签选择器、id选择器、类选择器实例
以上就是css选择器有哪些？css选择器使用总结的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611201.html
微信扫一扫 
支付宝扫一扫 
