CSS基础--属性选择器、伪类选择器
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
.red{
color: red;
}
.blue{
color: blue;
}
.darkred{
color: darkred;
}
.blueviolet{
color:blueviolet;
}
/*属性选择器：属性是相对于标签而言。所谓属性选择器就是根据指定名称的属性的值来查找元素*/
/*1.E[attr]:查找指定的拥有attr属性的E标签。如查找拥有style属性的li标签*/
li[style]{
text-decoration: underline;
} /*2.E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签。如想查找拥有class属性并且值为Red的li标签 =是严格匹配*/
li[class=red]{
/*font-size: 30px;*/
}
/*3.E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签*/
li[class*=red]{
/*font-size: 30px;*/
}
/*4.E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签*/
li[class^=blue]{
font-size: 30px;
}
/*5.E[attr$=value]:查找拥有指定的attr属性并且属性值以value开结束的E标签*/
li[class$=blue]{
/*font-size: 30px;*/
}
</style>
</head>
<body>
<p style="">看看能不能也添加样式</p>
<ol>
<li class="red" style="">河南再次发生矿难，死伤人数超过100</li>
<li class="blue">禽流感次发生蔓延，温家宝指示</li>
<li class="darkred" style="">南方农作物减产绝收面积上亩</li>
<li class="blue">猪流感在广减产绝收发</li>
<li class="red">全国多作物减产绝收面积上亩</li>
<li class="blueviolet">猪流感在广东群体性暴发</li>
</ol>
</body>
</html>
兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器 - 兄弟伪类</title>
<style>
.first{
color: red;
}
/*兄弟伪类：
+：获取当前元素的相邻的满足条件的元素
~：获取当前元素的满足条件的兄弟元素*/ /*下面这句样式说明查找 ：添加了.first样式的标签的相邻的li元素
1.相邻
2.必须是指定类型的元素*/
.first + li{
color: blue;
} /*下面样式查找添加了.first样式的元素的所有兄弟li元素
1.必须是指定类型的元素*/
.first ~ li{
color: pink;
}
</style>
</head>
<body>
<ul>
<li class="first">前端与移动开发</li>
<span>能不能变成蓝色</span>
<li>java</li>
<li>javascript</li>
<li>c++</li>
<li>平面设计</li>
</ul>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器 - 相对父元素的伪类</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
width: 700px;
height: 500px;
margin:0 auto;
margin-top:100px;
list-style: none;
border-left:1px solid #ccc;
border-top:1px solid #ccc;
}
ul > li{
float: left;
width:100px;
box-sizing: border-box;
height: 100px;
line-height:100px;
text-align: center;
background-color: #fff;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
}
/*相对于父元素的结构伪类*/
/*E:first-child:查找E元素的父级元素中的第一个E元素。在查找的时候并不会限制查找的元素的类型*/
/*下面这句样式查找：li的父元素中的第一个li元素
1.相对于当前指定元素的父元素
2.查找的类型必须是指定的类型*/
li:first-child{
color: red;
}
/*E:last-child:查找E元素的父元素中最后一个指定类型的子元素*/
li:last-child{
background-color: skyblue;
}
/*查找的时候限制类型 first-of-type*/
/*1.也是相对于父元素
2.在查找的时候只会查找满足类型条件的元素，过渡掉其它类型的元素*/
li:first-of-type{
color: red;
}
li:last-of-type{
color: orange;
} /*指定索引位置 nth-child(从1开始的索引||关键字||表达式)*/
li:nth-child(5){
background-color: lightblue;
}
/*偶数个元素添加背景 even:偶数 odd:奇数*/
/*li:nth-child(even){
background-color: orange;
}
li:nth-child(odd){
background-color: pink;
}*/
li:nth-of-type(even){
background-color: orange;
}
li:nth-of-type(odd){
background-color: pink;
} /*想为前面的5个元素添加样式*/
/*n:默认取值范围为0~子元素的长度.但是当n<=0时，选取无效
0>>5
1>>4
...
4>>1
5>>0*/
li:nth-last-of-type(-n+5){
font-size: 30px;
}
li:nth-of-type(-n+5){
font-size: 30px;
} /*空值:没有任何的内容，连空格都没有*/
li:empty{
background-color: red;
} </style>
</head>
<body>
<ul>
<div></div>
<li> </li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
</ul>
</body>
</html>
target伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 选择器 -伪类target</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
} .content {
width: 960px;
margin: 0 auto;
padding: 30px;
} p {
font-size: 18px;
line-height: 1.75;
} ul {
position: fixed;
top: 100px;
left: 30px;
margin: 0;
padding: 0;
} h2:target{
color: #0000FF;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#title1">CSS (层叠样式表)</a></li>
<li><a href="#title2">实例</a></li>
<li><a href="#title3">发展历史</a></li>
<li><a href="#title4">使用方法</a></li>
<li><a href="#title5">布局特点</a></li>
<li><a href="#title6">创建编辑</a></li>
</ul>
<div class="content">
<h2 id="title1">CSS (层叠样式表)</h2>
<p>层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
<p>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。</p>
<h2 id="title2">实例</h2>
<p>如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。[1] d 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。以下的样式规则应用于元素属性 id="para1":</p>
<p>class 选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。</p>
<h2 id="title3">发展历史</h2>
<p>作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。</p>
<p>作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。</p>
<h2 id="title4">使用方法</h2>
<p>有三种方法可以在站点网页上使用样式表：外联式Linking（也叫外部样式）：将网页链接到外部样式表。嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。其中，优先级：内联式 > 嵌入式 > 外联式</p>
<p>当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。</p>
<p>当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。</p>
<h2 id="title5">布局特点</h2>
<p>对于蜘蛛在爬行一个网站的页面时，若是有太多的垃圾代码，会使搜索蜘蛛对其产生不友好、不信任感，同时蜘蛛的爬行速度也会因此而减缓，对于网站SEO而言，可谓一大忌。就如传统的用table页面，对此我们就需要对网站进行代码优化，而这便需要动用CSS+div了，下面便来谈谈使用CSS+div进行代码优化的一些益处。</p>
<p>网站使用DIV+CSS布局使代码很是精简，相信大多朋友也都略有所闻，css文件可以在网站的任意一个页面进行调用，而若是使用table表格修改部分页面却是显得很麻烦。要是一个门户网站的话，需手动改很多页面，而且看着那些表格也会感觉很乱也很浪费时间，但是使用css+div布局只需修改css文件中的一个代码即可。</p>
<p>采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。</p>
<h2 id="title6">创建编辑</h2>
<p>创建和编辑css更加常用的是AdobeDreamweaver系列软件，可视化编辑更利于web工程师快速的创建和编辑css，新版本CS5.0、CS5.5、CS6.0、CC，包含Adobe BrowserLab，用于针对多种浏览器测试css的兼容性。Adobe Dreamweaver是一个css创建和编辑必不可少的利器！</p>
<p>FrontPage2000 包含有能用来为站点创建外部样式表的模板。可以用空白模板或已包含样式的模板来创建（例如 Arcs）。当保存样式表时， FrontPage 会以 . css 作为文件扩展名。要编辑样式表，请双击文件夹列表中的样式表。</p>
</div>
</body>
</html>
CSS基础--属性选择器、伪类选择器的更多相关文章
- python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- CSS属性、伪类选择器，CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- 前端 CSS的选择器 伪类选择器
伪类选择器 常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中 没有访问的超链接a标签样式: a:link { color: blue; } <!DOCTYPE html> < ...
- 前端 CSS的选择器 伪类选择器 CSS3 nth-child()
first-child 选中第一个标签 应用CSS样式 <!DOCTYPE html> <html lang="en"> <head> < ...
- HTML(五)选择器--伪类选择器
HTML代码 <body> <a href="www.baidu.com">www.baidu.com</a> </body> CS ...
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS动态伪类选择器温故
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS中的选择器之html选择器和伪类选择器
1.html选择器(标签选择器) 基本语法: html标签名称{ 属性名:属性值; 属性名:属性值; } 继续在上面的代码中做修改,实例代码: <!DOCTYPE html> <ht ...
随机推荐
- 问题 M: 最亲密的x个人
问题 M: 最亲密的x个人 时间限制: 1 Sec 内存限制: 128 MB提交: 412 解决: 38[提交] [状态] [命题人:jsu_admin] 题目描述 有一天,地球受到了降维打击,从 ...
- Mysql8- Public Key Retrieval is not allowed
在使用 MySQL 8.0 时重启应用后提示 com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Public ...
- webpack的一般性配置及说明
1.webpack的常规配置 先给出一个示例: const path = require('path'); const HtmlWebpackPlugin = require('html-webpac ...
- left join on and和left join on where条件的困惑[转]
外连接:left join(左联接) left outer join 返回包括左表中的所有记录和右表中联结字段相等的记录right join(右联接) right outer join返回包括右表中的 ...
- How to compile and install Linux Kernel 5.1.2 from source code
How to compile and install Linux Kernel 5.1.2 from source code Compiling a custom kernel has its adv ...
- 【LeetCode】哈希表 hash_table（共88题）
[1]Two Sum (2018年11月9日,k-sum专题,算法群衍生题) 给了一个数组 nums, 和一个 target 数字,要求返回一个下标的 pair, 使得这两个元素相加等于 target ...
- CSP-S2019 停课日记
前言 不想上文化课,于是就停课了 (雾) \(10.13\) 停课前一天 今天名义上是放假,所以不算停课. 老师和同学们听说我要停课,都十分的不舍.我啥也没说就悄悄溜到一中来了. \(10.14\) ...
- [sqlmap 源码阅读] heuristicCheckSqlInjection 探索式注入
上面是探索式注入时大致调用过程,注入 PAYLOAD 1.)("'(.((. , 数据库报错,通过报错信息获取网站数据库类型(kb.dbms),并将保存报错(lasterrorpage). ...
- $_POST 和 php://input 的区别
手册中摘取的几句话: 当 HTTP POST 请求的 Content-Type 是 application/x-www-form-urlencoded 或 multipart/form-data 时, ...
- 一篇文章理解JS数据类型、深拷贝和浅拷贝
前言 笔者最近整理了一些前端技术文章,如果有兴趣可以参考这里:muwoo blogs.接下来我们进入正片: js 数据类型 六种 基本数据类型: Boolean. 布尔值,true 和 false. ...