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 ...
随机推荐
- Persistent connections CONN_MAX_AGE django
Persistent connections¶ Persistent connections avoid the overhead of re-establishing a connection to ...
- Markdown Reader 插件改造
Markdown Reader 是一款比较好用的浏览markdown文件的chrome插件 插件地址:https://chrome.google.com/webstore/detail/markdow ...
- 4.js屏蔽浏览器鼠标右键菜单
document.oncontextmenu = function(){return false;} 参考链接:js 屏蔽浏览器事件汇总
- Sudo环境变量继承
sudo中默认配置会重置环境变量,所以使用sudo的时候需要小心这点.如何让sudo继承我们需要的环境变量?有如下两种方法: #sudo visudo 或者 #vi /etc/sudoers ...
- 如何在ubuntu下使用windows下的程序（eg: .exe）
为了在ubutu下安装百度云管家,上网查了下如何在ubuntu 下安装.exe文件,其中遇到一些问题记录如下: 使用的命令: 开始时直接使用的sudo apt-get install wine 在运行 ...
- Valera and Swaps
题意: 定义 $f(p)$ 表示将 $p$ 序列变换为有序序列最少要交换多少次,给一 $1 \sim n$ 的排列 $a$ ,给一整数 $m$, 求问将 $a$ 最少交换多少次能得到 $p$ ,使得 ...
- Spring的自学之路之入门
认识Spring Spring是分层的Java SE/EE 应用一站式的轻量级开源框架,以Ioc(Inverse of Control,控制反转)和AOP(Aspect Oriented Progra ...
- Ubuntu环境下gedit以及vim的一些个简单配置
Gedit的配置: 参见 http://www.cnblogs.com/csulennon/p/4198054.html Gedit插件安装 Gedit快捷键 参见我的博客 添加快捷键 Ctrl + ...
- 2.7 HBase架构深入剖析
一. 1.client 整个HBase集群的访问入口: 使用HBase RPC机制与HMaster和HRegionServer进行通信: 与HMaster进行通信进行管理类操作: 与HRegionSe ...
- linux的grep命令参数全拼详解
今天为了查找文件中某段字符,找了好久,最后成功使用指令: find . -name "*.cpp" |xargs grep -in “get_itemInfo” | grep -v ...