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 ...
随机推荐
- 「LuoguP2252」 取石子游戏（威佐夫博弈
[P2252]取石子游戏 - 洛谷 题目背景 无 题目描述 有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以 ...
- HDU 1627 Krypton Factor
回溯法:避免无用判断,强化回溯代码的实现过程 题目的大意就是以字典序为准,排列字符串,但要保证一个字符串中不包含相邻的重复子串. Problem Description For example, th ...
- Windows下安装zip包解压版mysql
Windows下安装zip包解压版mysql 虽然官方提供了非常好的安装文件,但是有的时候不想每次再重装系统之后都要安装一遍MySQL,需要使用zip包版本的MySQL.在安装时需如下三步: 1. 新 ...
- 【218】◀▶ IDL 操作符号说明
参考:Operators —— 运算符 01 Relational_Operators 比较运算符. 02 Mathematical_Operators 数学运算符. 03 Logical ...
- CodeForces 1098F. Ж-function
题目简述:给定字符串$s[1 \dots n](n \leq 2 \times 10^5)$,以及$Q \leq 2 \times 10^5$个询问,每个询问有两个参数$1 \leq l \leq r ...
- B. Vanya and Food Processor【转】
B. Vanya and Food Processor time limit per test 1 second memory limit per test 256 megabytes input s ...
- sql语句之连表操作
内连接 select * from employee inner join department on employee.dep_id = department.id 左连接 在内连接的基础上保留左表 ...
- 20个Flutter实例视频教程-第12节: 流式布局 模拟添加照片效果
视频地址: https://www.bilibili.com/video/av39709290/?p=12 博客地址: https://jspang.com/post/flutterDemo.html ...
- Flutter实战视频-移动电商-52.购物车_数据模型建立和Provide修改
52.购物车_数据模型建立和Provide修改 根据json数据生成模型类 {,"price":830.0,"images":"http://imag ...
- shell脚本函数与数组
前言 之前写过一篇关于shell脚本流程控制总结,这次继续写关于shell脚本的问题.本篇文章主要包含shell脚本中的函数以及数组的用法介绍.同时也涵盖了一些字符串处理以及shell脚本比较使用的小 ...