css选择器（基础）
2018-06-24 01:59:57来源：未知 阅读 ()
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必须掌握的要点，希望大家勤加练习，共同进步！
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
