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 ...
随机推荐
- 「LOJ#10015」「一本通 1.2 练习 2」扩散（并查集
题目描述 一个点每过一个单位时间就会向 444 个方向扩散一个距离,如图所示:两个点 a .b 连通,记作 e(a,b),当且仅当 a .b的扩散区域有公共部分.连通块的定义是块内的任意两个点 u.v ...
- poj3565Ants——KM算法
题目:http://poj.org/problem?id=3565 首先,我们神奇地发现,没有相交边的匹配可以转化为距离和最小的匹配,所以可以使用KM算法求带权匹配: 要求的是距离和最小,所以把边权转 ...
- Eclipse用Runnable JAR file方式打jar包，并用该jar包进行二次开发
目录: 1.eclipse创建Java项目(带jar包的) 2. eclipse用Export的Runnable JAR file方式打jar包(带jar包的) 打jar包 1)class2json1 ...
- PHP文件操作功能函数大全
PHP文件操作功能函数大全 <?php /* 转换字节大小 */ function transByte($size){ $arr=array("B","KB&quo ...
- PHP之操作数组
https://www.jb51.net/Special/623.htm https://www.php.net/manual/zh/ref.array.php https://www.runoob. ...
- 2013 Noip提高组 Day2
3288积木大赛 正文 题目描述 春春幼儿园举办了一年一度的“积木大赛”.今年比赛的内容是搭建一座宽度为n的大厦,大厦可以看成由n块宽度为1的积木组成,第i块积木的最终高度需要是hi. 在搭建开始之前 ...
- 2013 Noip提高组 Day1
3285 转圈游戏 2013年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 题目描述 Description ...
- P4443 [COCI2017-2018#3] Dojave（线段树）
传送门 设\(lim=2^n-1\),对于一个区间\([l,r]\)来说,如果\(sum\neq lim\)且能换出\(x\)并换进\(y\)来,使得\(sum\bigoplus a_x\bigopl ...
- 洛谷 P1712 [NOI2016]区间（线段树）
传送门 考虑将所有的区间按长度排序 考虑怎么判断点被多少区间覆盖,这个可以离散化之后用一棵权值线段树来搞 然后维护两个指针$l,r$,当被覆盖次数最多的点的覆盖次数小于$m$时不断右移$r$,在覆盖次 ...
- DB2 学习--(1)--安装教程
db2 linux 安装部署 1 解压文件 tar -zxvf db2_v101_linuxx64_expc.tar.gz 2 切换路径 cd expc/ 3 启动安装程序 ./db2_install ...