CSS选择器:
一个样式的语法是由选择器+属性+属性值三部分组成;
到底什么是选择器呢?
答:个人直白的理解为:选择一种要对它进行操作的标签的方法就叫做选择器。也就是说选择器就是一种选择元素的方式。
1,元素选择器
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type ="text/css">
div{
collor:red;
}
</style>
</head>
<body>
<p>长风破浪会有时,直挂云帆济沧海</p>
<div>会当凌绝顶,一览众山小</div>
<span>天生我材必有用,千金散尽还复来</span>
</body>
</html>
2,id选择器 <!--同一页面不能出现两个相同的id-->
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type ="text/css">
#neo{
collor:red;
}
</style>
</head>
<body>
<p>长风破浪会有时,直挂云帆济沧海</p>
<div id="neo">会当凌绝顶,一览众山小</div>
<span>天生我材必有用,千金散尽还复来</span>
<div>数风流人物,还看今朝</div>
</body>
</html>
3,class选择器 <!--同一页面可以出现两个相同的class-->
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type ="text/css">
.neo{
collor:red;
}
</style>
</head>
<body>
<p class="neo">长风破浪会有时,直挂云帆济沧海</p>
<div class="neo">会当凌绝顶,一览众山小</div>
<span>天生我材必有用,千金散尽还复来</span>
<div>数风流人物,还看今朝</div>
</body>
</html>
4,子元素选择器
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type ="text/css">
#neo #number1{
collor:red;
} <!--表示选择“id为neo的父元素”下的number1子元素的内容-->
#neo2{
color:blue
} <!--表示选择“id为neo2的父元素所有内容-->
</style>
</head>
<body>
<div id="neo">
<p id="number1">长风破浪会有时,直挂云帆济沧海</p>
<p id="number2">会当凌绝顶,一览众山小</p>
</div>
<div id="neo2">
<p id="subject1">长风破浪会有时,直挂云帆济沧海</p>
<p id="subject2">会当凌绝顶,一览众山小</p>
</div>
</body>
</html>
5,群组选择器
<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type ="text/css">
#number1,#number2,#subject1,#subject2{color:#eee;font-szie:18px;}
</style>
</head>
<body>
<div id="neo">
<p id="number1">长风破浪会有时,直挂云帆济沧海</p>
<p id="number2">会当凌绝顶,一览众山小</p>
</div>
<div id="neo2">
<p id="subject1">长风破浪会有时,直挂云帆济沧海</p>
<p id="subject2">会当凌绝顶,一览众山小</p>
</div>
</body>
</html>
6,伪类选择器
1,:after与content属性一起连用,用于定义在对象后面的内容
语法:选择符::after{content:"文字";}
选择符::after{content:url(图片路径);}
2,:before与content属性一起连用,用于定义在对象后面的内容
语法:选择符::before{content:"文字";}
选择符::before{content:url(图片路径);}
3,:first-letter:定义对象内第一个字符的样式。
说明:*(该伪元素只能用于块级元素。)
4,:first-line:定义对象内第一行的样式。
说明:*(该伪元素只能用于块级元素。)
!!!ie6以下版本浏览器不支持伪对象选择器
10:53:17 2017-11-05
以上就是几种常见的选择器,也是css必须掌握的要点,希望大家勤加练习,共同进步!