本文包含CSS1&2和CSS3所有的选择器介绍。
文章目录
CSS选择器
了解各种选择器的使用，我们就可以更好地去完成文本样式！
1. 类选择器
在一个HTML文件中，类选择器可以多次被调用。
<!--命名：-->
.name{}
<!--调用：-->
<p class="name"></p>
- 也可以这样定义样式： p.name{}
2. 标签选择器（又称元素 / 类型选择器）
比如说<html>,<body>,<p>等等，只要符合标签，都可自动调用。
<!--命名：-->
p{} <!--标签名{}-->
<!--调用：-->
<p></p> <!--<标签>-->
3. ID选择器
在一个HTML文件中， ID选择器只能被调用一次。
<!--命名：-->
#name{}
<!--调用：-->
<p id="name"></p>
4. 伪类选择器
伪类用于当已有元素处于的某个状态时，为其添加对应的样式。即在默认状态下不生效。
（1） 动态伪类选择器
每个元素都会有以下状态：( 比较常见的是超链接a.)
:link{}
/*访问前的状态*/
:hover{
/*鼠标悬停时的状态*/
:active{}
/*鼠标点击时的状态*/
:visited{}
/*访问后的状态*/
:focus{}
/*访问时获取焦点，比如说表单元素内容框被选中*/
（2）结构伪类选择器
以某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类。
- E:root（匹配E元素在文档的根元素）
只用于页面中存在元素的地方，在E:root根选择器中，html页面的根永远都是html元素。
比如说下面的这个例子：
<html>
<head>
<title>E:root 根选择器</title>
<style>
html:root{
color:darkblue;
font-size: 28px;
}
</style>
</head>
<body>
<p>我有一亿个美好的愿望</p>
</body>
</html>
结果显示：
-
E: first-child（匹配父元素的第一个子元素并且是E，如果第一个子元素不是E元素，不符合）
E: last-child（匹配父元素的最后一个子元素并且是E）
E: only-child（匹配父元素仅有的一个子元素并且是E）
E: nth-child(n)（匹配父元素的第n个子元素并且是E）
E: nth-last-child(n)（匹配父元素的倒数第n个子元素并且是E） -
E: first-of-type（匹配同类型中的同级兄弟的第一个元素E）
E: last-of-type
E: only-of-type
E: nth-of-type(n)
E: nth-last-of-type(n)
形式相对类似，选一个做举例：
<html>
<head>
<title>结构伪类选择符</title>
<style>
p:first-of-type{color:firebrick;}
p:first-child{background: lightgreen;}
</style>
</head>
<body>
<div id="A">
<h4>我是父亲的第1个子元素</h4>
<p>我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了</p>
</div>
<hr />
<div id="B">
<p>我不仅是父亲的第1个子元素，我还是父亲的第一个p标签，所以我被双重选中了</p>
<p>我是父亲的第2个子元素</p>
</div>
</body>
</html>
结果显示：
总结而来，-child和-of-type的区别：
（1）-child必须要满足父元素的第某个元素是E元素，否则不符合。
（2）-of-type只需要去找第某个E元素即可。
- E:empty（匹配没有任何子元素（内容）的元素E，元素内容为空白）
举例子：
<html>
<head>
<title> E:empty</title>
<style>
p:empty{
height: 20px;
background: aqua;
}
</style>
</head>
<body>
<p>11111111111111111111</p>
<P></P>
<P>33333333333333333333</P>
</body>
</html>
结果显示：
（3）UI元素状态伪类选择器
- E：checked （仅限于input中type="radio"或者type=“checkbox”)
匹配用户界面上处于选中状态的元素E - E：enabled
匹配用户界面上处于可用状态的元素E（默认状态） - E：disabled
匹配用户界面上处于禁用状态的元素E
来看一个整体的例子：
<!DOCTYPE html>
<html>
<head>
<title>UI元素状态伪类选择器</title>
<style>
fieldset{
height: 100px;
}
input:disabled{
background: sienna;
color: red;
}
input:enabled{
background: darkseagreen;
color: hotpink;
}
/*radio或者checkbox被checked时，它的相邻兄弟元素span的样式*/
input:checked+span{
background: red;
}
</style>
</head>
<body>
<form method="post" action="">
<!--表单分组-->
<fieldset>
<legend>disabled和enabled</legend>
<ul>
<li><label>
<input type="text" name="id" value="99" disabled /><span>ID</span>
</label></li>
<li><label>
<input type="text" name="user" value="" />
<span>昵称</span>
</label></li>
<li><label>
<input type="text" name="pwd" value="" enabled />
<span>密码</span>
</label></li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试(单选按钮)</legend>
<ul>
<li><label><input type="radio" name="sex" value="0" /><span>男</span></label></li>
<li><label><input type="radio" name="sex" value="1" /><span>女</span></label></li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试(多选按钮)</legend>
<ul>
<li><label><input type="checkbox" name="like" value="0" /><span>蓝色</span></label></li>
<li><label><input type="checkbox" name="like" value="1" /><span>红色</span></label></li>
<li><label><input type="checkbox" name="like" value="2" checked /><span>黑色</span></label></li>
</ul>
</fieldset>
</form>
</body>
</html>
结果如下：
（4）否定伪类选择器
- E：not(F) （匹配所有除去元素F以外的E元素）
例如：p:not（:nth-last-of-type(2)）{}
5. 伪元素选择器（又称伪对象元素）
在CSS3之后，要求写为:: ，由于兼容性的原因，我们可以根据自己的喜好选择写成单冒号或者双冒号，都可以。不过有的强制要求写双冒号的必须记清楚。
（1) E:first-line
设置对象内第一行的样式
举个例子：
<html>
<head>
<title>first-letter</title>
<style>
p:first-line{
font-size: 20px;
color:turquoise;
margin-left: 20px;
}
</style>
</head>
<body>
<p>春晓</p>
<p>春眠不觉晓</p>
<p>处处闻啼鸟 <br>
闻啼鸟</p>
</body>
</html>
结果显示：
(2) E:first-letter
设置对象内第一个字符的样式
用上一个同样的例子修改一下样式：
<style>
p:first-letter{
color:#ff9900;
}
</style>
结果显示：
(3) E:before
设置在对象前（与content属性一起使用）
(4) E:after
设置在对象后（与content属性一起使用）
举例子：
<style>
p::after{
content: "";
position: absolute;
top: 40px;
left: 85px;
width: 20px;
height: 20px;
background: red;
}
</style>
结果显示：
(5) E::selection （必须是双冒号）
设置对象被选中状态时触发的效果，可应用少量的CSS属性：color,background, cursor,outline.
比如：
<style>
p::selection{
background: red;
}
</style>
结果显示：（当你用鼠标选中这些文字时）
总结伪类选择器和伪元素选择器的本质区别：
（1）伪类是指已有元素处于的某个状态，可以说是为了弥补常规选择器的不足，以便获得更多的信息。
（2）伪元素是文档树中不存在的信息，相当于创建了一个内容的虚拟容器，比如说::before是不存在，
（3）可以同时使用多个伪类，而伪元素同时只能使用一个。
6. 关系选择器
（1）后代选择器（又称包含选择器）
- E F : 选择所有被E元素包含的F元素
<style>
/*格式：父元素/祖先元素 子元素*/
div a{ }
</style>
（2）父子选择器
- E>F : 选择所有作为E元素的子元素F
<style>
/*格式：父元素>子元素*/
.box>a{ }
</style>
（3）相邻兄弟选择器
- E+F: 选择紧跟在E元素后面的F元素 ，且两者有相同的父元素
- 比如说div+p 是指div标签之后紧跟的p,在</div>之后。
例如：
<html>
<head>
<title>相邻兄弟选择器</title>
<style>
h3+p{
color:red;
}
</style>
</head>
<body>
<h3>三字经</h3>
<p>人之初</p>
<p>性本善</p>
</body>
</html>
结果显示：
（4）兄弟选择器
- E~F: E元素后面所有的兄弟F元素，两者有相同的父元素。
例如：同上一个例子，改变它的样式
<style>
h3~p{
color:red;
}
</style>
结果显示：
因此对于相邻兄弟选择器和兄弟选择器的区别就在于： 两元素是否相邻。
7. 选择器分组 / 通用选择器
- 选择器分组：为了使得样式表更加简洁，可以将有相同样式定义的元素放在一起，并用逗号（,）隔开。
<style>
h1,p,.class{
color:red;
text-align:center;
}
</style>
- 在其中，有个特例就是通用选择器，它可以对所有元素进行设置。
*{
padding:0;
margin:0;
box-sizing:border-box;
}
8. 派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
比如说：
<strong>This is a example </strong>
我们可以根据自己的需求重新定义该标签的样式：
strong {
color: red;
font-style: italic;
}
9. 属性选择器
- 在使用属性选择器时，需要使用 [ ]
- 属性选择器的选择符有7种：
(1) E[attr]
选择具有attr属性的E元素
(2) E[attr=“value”]
选择具有attr属性并且属性值为value的E元素
(3) E[attr~=“value”]
选择具有attr属性，且包含空格，属性值其中一个为value的E元素
(4) E[attr^=“value”]
选择具有attr属性， 且属性值以value开头的E元素
(5) E[attr$=“value”]
选择具有attr属性， 且属性值以value结尾的E元素
(6) E[attr*=“value”]
选择具有attr属性，且属性值中包含value的元素
(7) E[attr|=“value”]
选择具有attr属性，且属性值以value开头并有分隔符的e元素
做一个完整的例子将它们对比一下：
<html>
<head>
<title>属性选择器</title>
<style>
body{
position: relative;
}
p[id]{
font-size: 28px;
}
p[id="green"]{
color:green;
}
p[class~="fl"]{
background: yellow;
}
a[href^="http"]{
color: #ff8800;
text-decoration: none;
}
a[href$="rar"]{
margin-left: 20px;
}
a[href$="rar"]::before{
content:"";
width: 20px;
height: 20px;
position: absolute;
top: 310px;
left: 10px;
background: url("images/rar.jpg") no-repeat;
margin-right: 10px;
}
p[class*="lu"]{
color:blue;
}
p[id|="red"]{
background: red;
}
</style>
</head>
<body>
<p id="red-1">小红</p>
<p id="green">小绿草</p>
<p class="fl yellow">我最喜欢黄色了</p>
<p class="blue">小兰兰</p>
<br>
<a href="http://www.baidu.com">百度一下，你就知道</a><br />
<br>
<a href="down.rar">点此下载前端最新学习教程</a>
</body>
</html>
结果是这样的：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
