本篇文章给大家带来的内容是关于css选择器有哪些？css选择器使用总结，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
1.选择符(器)使用基本语法
选择符｛ 属性1：属性值1;
属性2：属性值2;
属性3：属性值3;
…..: …….;
}
2.标记选择器(直接使用html标签做选择器)
second.html
<!doctype html><html><head> <meta charset="utf-8"> <title>标记选择器</title> <link href="second.css" type="text/css" rel="stylesheet"></head><body> <p> 标记选择器(直接使用html标签做选择器)</p></body></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
<!doctype html><html><head> <meta charset="utf-8"> <title>类选择器</title> <link href="second.css" type="text/css" rel="stylesheet"></head><body> <p class="text"> 类选择器(为每一个标签设置一个类名，css可通过类名为标签设置样式，不同标签类名可以相同， 相同可以共用同一个样式)---css中用标签名.类名或者.类名表示 </p></body></html>
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
<!doctype html><html><head> <meta charset="utf-8"> <title>id选择器</title> <link href="second.css" type="text/css" rel="stylesheet"> </head> <body> <p class="text" id="textp1"> id选择器(为每一个html标签设置一个唯一的id，css可以通过id来为标签设置样式) ----css中用#id值{ }来表示 </p> </body> </html>
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
<!doctype html><html><head> <meta charset="utf-8"> <title>包含选择器</title> <link href="second.css" type="text/css" rel="stylesheet"> </head> <body> <p class="text" id="textp1"> <a href="#" class="link">id选择器</a> (为每一个html标签设置一个唯一的id，css可以通过id来为标签设置样式) ----css中用#id值{ }来表示 </p> </body> </html>
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
<!doctype html><html><head> <meta charset="utf-8"> <title>子选择器</title> <link href="second.css" type="text/css" rel="stylesheet"> </head> <body> <p class="text" id="textp1"> <a href="#" class="link">子选择器</a> （ie浏览器不支持）：中间不能包含其他标签；css中 标签1 >标签2（子标签） 表示 </p> </body> </html>
second.css
p>a{ text-decoration:none; font-family:黑体，宋体; }p{ font-size: 23px;}
7.相邻选择器:(css样式作用在最后一个标签)常用设置表格的列属性–css用标签1+….标签n表示
second.html
<!doctype html><html><head> <meta charset="utf-8"> <title>相邻选择器</title> <link href="second.css" type="text/css" rel="stylesheet"> </head> <body> <p class="text" > 子选择器: （ie浏览器不支持）：中间不能包含其他标签；css中 标签1 >标签2（子标签） 表示 </p> <p class="text1"> 相邻选择器(css样式作用在最后一个标签)常用设置表格的列属性--css用标签1+....标签n表示 </p> </body> </html>
second.css
.text+.text1{ color:pink; background-color:gray; font-size:34px; }
8.并集选择器:多个标签一起设置样式，用逗号隔开
second.css
<!doctype html><html><head> <meta charset="utf-8"> <title>并集选择器</title> <link href="second.css" type="text/css" rel="stylesheet"> </head> <body> <p class="text" > 子选择器: （ie浏览器不支持）：中间不能包含其他标签；css中 标签1 >标签2（子标签） 表示 </p> <p class="text1"> 并集选择器:多个标签一起设置样式，用逗号隔开 </p> </body> </html>
second.css
.text,.text1{ color:pink; background-color:gray; font-size:34px;}
9.伪类(元素某一种状态，常用于描述超链接的状态：link(未访问状态); visited(已经访问过的状态);hover(鼠标经过状态);active(正在单击状态)css用标签名：状态表示
second.html
<!doctype html><html><head> <meta charset="utf-8"> <title>伪类</title> <link href="second.css" type="text/css" rel="stylesheet"> </head> <body> <a href="" class="a1">伪类</a> </body> </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
<!doctype html><html><head> <meta charset="utf-8"> <title>伪类</title> <link href="second.css" type="text/css" rel="stylesheet"> </head> <body> <p>伪元素(某个对象中某个元素的状态)css中用标签名： 伪元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行]) <br>伪元素(某个对象中某个元素的状态)css中用标签名： 伪元素常用的有(first-letter[作用于文字首字]，first-line[作用于文字首行]) </p> </body> </html>
second.css
p:first-letter{ font-size:200%; }p:first-line{ color:red; }
11样式优先级：内联选择器>id选择器>类选择器（伪类，属性）>标记选择器
可以用!important;加大优先级
相关推荐：
css 类选择器和id选择器
css之后代选择器与多类选择器
css 标签选择器、id选择器、类选择器实例
以上就是css选择器有哪些？css选择器使用总结的详细内容。