css选择器学习
本片文章主要讲解html5中css选择器,通过选择器定位到想要进行样式设置的元素。当前css选择已经发布到第三代,也就是css3选择器。css3选择器分为:基本选择器,复合选择器,伪元素选择器。
一:css选择器总汇
1.1:*代表通用选择器,选择所有元素
1.2:type选择器(元素选择器),选择指定的元素
1.3:id选择器,选择指定id属性的元素
1.4:class选择器,选择指定class属性的元素
1.5:[attr]属性选择器,选择指定attr属性的元素
1.6:s1,s2,s3分组选择器,选择多个选择器的元素
1.7:s1 s2-后代选择器,选择指定选择器的后代元素
1.8:s1>s2子选择器,选择指定选择器的子元素
1.9:s1+s2相邻兄弟选择器,选择指定选择器相邻的元素
1.10:s1~s2普通兄弟选择器,选择指定选择器后面的元素
1.11:::first-line 伪元素选择器,选择块级元素文本的首行
1.12:::first-letter 伪元素选择器,选择块级元素文本的首字母
1.13:::before 伪元素选择器 选择元素之前插入内容
1.14:::after 伪元素选择器 选择元素之后插入内容
二:基本选择器
在实际编写css样式中使用简单而且频率高的选择器归于基本选择器。
2.1 通用选择器
*{
border:1px solid blud;
}
“*”号选择器便是通用选择器,该选择器匹配html元素的所有选择器,包括html和body标签。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
*{
border:1px solid blue;
}
</style>
</head>
<body>
<p>我是p</p>
<b>我是b</b> <br/><br/>
<span>我是span</span>
</body>
</html>
运行上面代码你会发现页面有5个边框,通用选择器给所有的html元素的选择器添加边框。声明一点,在实际项目中通用选择器的使用非常少,一般不用。
2.2:元素选择器
直接使用元素名称作为选择器就是元素选择器。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
p{
color:red;
font-size:20px;
}
</style>
</head>
<body>
<p>我是p</p>
<b>我是b</b> <br/><br/>
<span>我是span</span>
</body>
</html>
上面的代码就是使用元素选择器给p元素添加字体颜色样式。凡是p标签其内容字体都是红色并且字体大小为20像素。
2.3:id选择器
id选择器是在html页面中给某一个元素的唯一标识。使用#id值来锁定我们想要的进行css样式的元素。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
#mySpan{
color:blue;
font-size: 30px;
}
</style>
</head>
<body>
<p>我是p</p>
<b>我是b</b> <br/><br/>
<span id="mySpan" >我是span</span>
</body>
</html>
在实际项目中id选择器的使用频率很高,因为它可以高效准确地锁定某一个元素。
2.4:类选择器
html页面的元素都可以有一属性class,比如下面的
<p class="pClass"></p>
解释:给p标签一个class属性,属性值为:pClass.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
.spanClass{
border:1px solid orange;
}
</style>
</head>
<body>
<p>我是p</p>
<b>我是b</b> <br/><br/>
<span class="spanClass" >我是span</span>
<p>我是p</p>
<b class="spanClass">我是b</b> <br/><br/>
<span>我是span</span>
</body>
</html>
解释:.class属性值代表类选择器,可以选择多个元素的选择器。
代码中只要元素的class的值为spanClass,都会有一个橘黄色的边框。
2.5:属性选择器
匹配属性的选择器:直接使用中括号包含属性名即可。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
[href]{
border:1px solid red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.aiqiyi.com">爱奇艺</a>
</body>
</html>
上面两个链接都会有边框。
匹配属性值的选择器:[href=”http://www.baidu.com”]{}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
[href="http://www.baidu.com"]{
border:1px solid red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.aiqiyi.com">爱奇艺</a>
</body>
</html>
两个超链接一个有边框一个没有边框。
属性选择器还有很多扩展和css3新添加的其他属性选择器,在这里只介绍以上几种属性选择器。
三:复合选择器
3.1:分组选择器
将多个选择器用逗号隔开,同时设置一组样式。代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
a,p,span,.myClass{
color:red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">超链接</a>
<p>p标签</p>
<span>span标签</span>
<div class="myClass">div标签</div>
</body>
</html>
style样式代码中的就是复合选择器。
3.2:后代选择器
后代选择器涉及到html标签中元素的嵌套。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
div b{
color:blue;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">超链接</a>
<p>p标签</p>
<span>span标签</span>
<div class="myClass"><br>
<b>div子元素标签b</b>
</div>
</body>
</html>
解释:选择div元素内部所有b元素。不在乎b的层次深度.后代选择器可以混合使用 ID 选择器、类选择器、属性选择器。
css选择器远不止这些。还有很多其他选择器。本片文章只是选择了平常用到的比较多的一些选择器,想要了解更多其他css选择器可以观看本人后续博客。