css选择器（基础）
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必须掌握的要点，希望大家勤加练习，共同进步！
css选择器（基础）的更多相关文章
- css 选择器基础
有时在看别人代码时,看到一长串的选择器经常有点懵,今天来夯实一下基础 选择器有: 1.标签选择器 :就是HTML 中的标签 如<p> <h1> <body>等 2. ...
- Scrapy基础------css选择器基础
基本语法: * 选择所有节点 #container 选择id为container的节点 .container 选择所有class包含container的节点 li a 选取所有li 下所有a节点 ul ...
- Scrapy基础(五) ------css选择器基础
基本语法: * 选择所有节点#container 选择id为container的节点.container 选择所有class包含contai ...
- 2天驾驭DIV+CSS （基础篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- css 选择器；盒模型
一.引入方式:(1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 二.css选择器 基础选择器 * 通配 ...
- HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- css以及选择器基础
CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px: ...
- html基础和CSS选择器
一.html简单基础 什么是HTML HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言: HyperText Markup Language HTML 不是一种编程语言,而是一种标 ...
- css基础,css选择器
07.29自我总结 css基础 一.什么是CSS CSS是级联样式表 CSS术语标记语言,没有逻辑 CSS作用 完成网页内容的样式与布局 二.CSS的三种引入方式 1. 内联式 书写位置:在 head ...
随机推荐
- Tomcat 安装之后，双击Tomcat.exe，无法运行成功，怎么办？
Log形式多种多样,有的时候跟下面一样: 首先的解决方案就是:修改server.xml中所有的端口,因为不只8080端口可能被占用! 我在出问题的时候就修改8080端口.结果死活运行不了,纠结一些时间 ...
- POJ2752(next原理理解)
Seek the Name, Seek the Fame Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 15536 Ac ...
- 爬虫中Xpath有时候是无效的
http://www.cnblogs.com/lchzls/p/6282790.html给出了两种方案
- 3.16 使用Zookeeper对HDFS HA配置自动故障转移及测试
一.说明 从上一节可看出,虽然搭建好了HA架构,但是只能手动进行active与standby的切换: 接下来看一下用zookeeper进行自动故障转移: # 在启动HA之后,两个NameNode都是s ...
- java web 学习-网络资源
[网络收集] 1. JavaWeb学习总结——JSP中的九个内置对象 2. Jsp九大内置对象以及四个作用域 他人学习汇总资源 1. http://www.cnblogs.com/xdp-gacl/t ...
- ANGULAR 使用 ng build --prod 编译报内存错误的解决办法
如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...
- Unity亚洲开发者大会会议简录之技术篇,Profiler的一些参数的意思
2014Unity亚洲开发者大会会议简录之技术篇 拖公司的福,有幸去了一趟北京参加了一场Unity3D的交流盛宴,在为期两天的时间内,不仅有着技术上收获,也有心灵上的震撼.现在先来说说技术方面的一些比 ...
- Unity中资源动态加载的几种方式比较
http://blog.csdn.net/leonwei/article/details/18406103 初学Unity的过程中,会发现打包发布程序后,unity会自动将场景需要引用到的资源打包到安 ...
- hoj2188 WordStack
WordStack My Tags (Edit) Source : Mid-Atlantic 2005 Time limit : 5 sec Memory limit : 32 M S ...
- IT兄弟连 JavaWeb教程 使用JSTL函数
在JSTL Functions标签库中提供了一组常用的EL函数,主要用于处理字符串,在JSP中可以直接使用这些函数. 在JSP中使用Functions标签库,需要通过taglib指令引入该标签库: & ...