CSS(一)选择器
CSS之选择器
- 一、在 HTML 中使用 CSS
-
-
-
- ①内联样式
- ②嵌入样式
- ③外部样式
-
-
- 二、响应式（了解）
- 三、基础选择器
- 四、层次选择器
- 五、伪类选择器（自）
- 六、动态伪类选择器（自）
- 七、目标伪类选择器（自）
- 八、结构伪类选择器（自）
- 九、否定选择器（自）
- 十、伪元素（自）
- 十一、属性选择器（自）
一、在 HTML 中使用 CSS
①内联样式
内联样式是在元素属性中设置样式。此种方式很适合用于测试样式和快速查看样式效果，但是不推荐在整个文档上使用此方法。
在使用此方法时，必须在每一个元素上重复设置各个样式，这样既增加文档大小，又增加文档 的更新和维护难度。例如，所有的
<nav>
<ul>
<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">首页li>
<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">Web前端开发li>
<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">Linux操作系统li>
<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">计算机网络li>
<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">MySQL数据库管理li>
ul>
nav>
注意：nav 作用效果和 div 相同，仅表示导航专用标签。
②嵌入样式
嵌入样式是通过在 HTML 文档头定义样式单部分来实现的。通常不建议使用嵌入样式，因为此方式必须在 HTML 文档内部定义样式，如果此文档的 Css 样 式需要被其他 HTML 文档使用，那么就必须重新定义。大量 CSS 嵌套在 HTML 文档中，也会导致 HTML 文档过大，造成网络负担过重。如果需要修改整站风格时，必须对网站的每一个网页进行修改， 不利于更新和管理。
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
li {
float: left;
padding: 4px 5px 0px 5px;
list-style: none;
}
style>
head>
<body>
<nav>
<ul>
<li>首页li>
<li>Web前端开发li>
<li>Linux操作系统li>
<li>计算机网络li>
<li>MySQL数据库管理li>
ul>
nav>
body>
html>
③外部样式
外部样式是将所有样式写在一个外部文件中， 在 HTML 文档中使用 元素，将文件链接到 需要设置样式的文档上。使用这种方法，只需要修改链接的文件，就可以完全改变网页的整体风格。 此外，也可以使用这种方法修改或调整文档，使之适应不同环境或设备的显示要求。 此种方法是推荐使用的方式。 如果使用外部样式，修改样式是刷新浏览器可能看不到修改的效果，因为浏览器为了节省网速，缓存了先前的 css 文件，可以使用 ctrl + f5 强制刷新。
<link rel="stylesheet" href="css/index.css">
二、响应式（了解）
页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query 的使用等。无论用户正在使用笔记本还是 iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。
案例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式title>
<style>
body {
background-color: white;
}
@media screen and (min-width: 768px) {
/*分辨率宽度为768px以上*/
body {
background-color: red;
}
}
@media screen and (min-width: 992px) {
/*分辨率宽度为992px以上*/
body {
background-color: purple;
}
}
@media screen and (min-width: 1200px) {
/*分辨率宽度为1200px以上*/
body {
background-color: yellow;
}
}
style>
head>
<body>
<ul>
<li>浏览器宽度小于768px时，背景颜色为白色。li>
<li>浏览器宽度在768px至992px之间时，背景颜色为红色。li>
<li>浏览器宽度在992px至1200px之间时，背景颜色为紫色。li>
<li>浏览器宽度大于1200px时，背景颜色为黄色。li>
<li>此案例仅为演示，实际应用要复杂的多。li>
ul>
body>
html>
三、基础选择器
基础选择器是 CSS 中最基础、最常用的选择器，从 CSS 诞生开始就一直存在， 供 Web 前端开发者快速地进行 DOM 元素的查找与定位。基本语法如下：
选择器名字{
属性:值;
属性:值;
}
一个简单的选择器代码如下
li {
float: left;
padding: 4px 5px 0px 5px;
list-style: none;
}
在该例中，“li”就是选择器(类型选择器)，“float"是属性，“left" 是取值。该 Css 定义表示：对页面
* 通用元素选择器，匹配任何元素
E 标签选择器，匹配所有使用E标签的元素
.info和E.info class选择器，匹配所有class属性中包含info的元素
#info和E#info ID选择器，匹配所有ID属性等于footer的元素
案例:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
* {
color: yellow;
}
div {
color: aqua;
}
.pink {
color: pink;
}
#green {
color: green;
}
style>
head>
<body>
<div>我是div里面的文字div>
<span class="pink">我是span里面带pink类型的文字span>
<p class="pink">我是p里面带pink类型的文字p>
<p class="pink">我是p里面带pink类型的文字p>
<p id="green">我是p里面带green ID的文字p>
<div>第二个div里面的文字div>
<p>没有class和 id 的p里面的文字p>
body>
html>
注意：
1.id 相同的元素一般在一个页面不能出现多个。
2.前端在写 css 样式时一般不用 id 多用 class。
3.通用元素的优先级小于其他选择器的优先级。
四、层次选择器
层次选择器分为四个类别：包含选择符、子选择符、相邻选择符、兄弟选择符。
1.包含选择符
比如说 E F，前面 E 为祖先元素，F 为后代元素。所表达的意思就是选择了 E 元素的所有后代 F 元素。请注意祖先元素和后代元素之间使用一个空格隔开。这里 F 不管是 E 元素的子元素或者是孙元素或者是更深层次的关系，都将被选中。也就是说，E F 将递归选中 E 元素中的所有 F 元素。
2.子选择符
比如说 E>F，其中 E 为父元素，而 F 为子元素，其中 E>F 所表示的是选择了 E 元素下的所有子元素 F 和后代选择器(E F)不同，E>F 仅选择了 E 元素下的 F 子元素，更深层次的 F 元素则不会被选择。
3.相邻选择符
比如 E+F，E 和 F 元素具有一个相同的父元素，而且 F 元素在 E 元素后面且紧相邻，这样就可以使用相邻兄弟选择器来选择 F 元素。相邻选择器可以选择紧接在另一元素后的元素，而且两者需具有一个相同的父元素。
4.兄弟选择符
比如 E~F，E 和 F 元素是属于同一父元素之内，并且 F 元素在 E 元素之后，那么 E~F 选择器将选择 E 元素后面的所有 F 元素。通用兄弟选择器和相邻兄弟选择器极其相似，不同的是，相邻兄弟选择器仅选择元素与其相邻的后面元素(选中的仅一个元素)：而通用兄弟选择器选中的是元素后面的所有兄弟元素。
案例：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层次选择器title>
<style>
/*选择class=myDiv1下的所有span元素*/
.myDiv span {
color: aqua;
}
/*选择class=myDiv2下的span子元素*/
.myDiv2 > span {
color: aqua;
}
/*选择p标签后的第一个兄弟span元素*/
.myDiv3 p + span {
color: yellow;
}
/*选择p标签后的所有兄弟span元素*/
.myDiv4 p ~ span {
color: green;
}
style>
head>
<body>
<div class="myDiv">
<p>div 里面的p<span>div里面的p里面的spanspan>p>
<span>div里面的spanspan>
<span>div里面的span2span>
div>
<div class="myDiv2">
<p>div 里面的p<span>div里面的p里面的spanspan>p>
<span>div里面的spanspan>
<span>div里面的span2span>
div>
<div class="myDiv3">
<p>div 里面的p<span>div里面的p里面的spanspan>p>
<span>div里面的span1span>
<span>div里面的span2span>
div>
<div class="myDiv4">
<p>div 里面的p<span>div里面的p里面的spanspan>p>
<span>div里面的span1span>
<span>div里面的span2span>
div>
body>
html>
五、伪类选择器（自）
CSS伪类用于向某些迭择器添加特殊的效果。伪类是以“:”号表示，且不能单独存在。伪类选择器与类选择器的区别是，类选择器可以自由命名，而伪类选择器是CSS中已经定义 好的选择器，不能随便命名和定义。其语法如下:
:选择器名字{
属性:值;
属性:值;
}
案例：
#nav a:hover {
color: #F00;
text-decoration: underline;/*给文本加下划线*/
}
这个例子表示在 id=“nav” 的网页元素内，将鼠标放到超链接上(不单击)，其链接的文本颜色为红色，出现下划线(如果原先没下划线的话)。这是一个伪类的典型应用，通过向该样式增加更多样式，可以制作出网站常见的导航条滑动效果。
六、动态伪类选择器（自）
动态伪类并不存在于 HTML 中，只有当用户和网站交互的时候才能体现出来。动态伪类包含两种，一种是在链接中常看到的错点伪类,如":link"":visited",另一种被称作用户行为伪类，如":hover"":active"和":focus"。
:link 设置a对象未被访问前的样式
:hover 设置a对象在鼠标悬停时的样式
:active 设置a对象在被用户激活(在鼠标单击与释放之间发生的事件)时的样式
:visited 设置a对象在其链接地址已被访问过时的样式
:focus 设置元素获取焦点时的样式
案例：
.demo a:link {color:gray;}/*链接没有被访问时前景色为红色*/
.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/
.demo a:hover {color:green;}/*鼠标悬浮在链接上时前景色为绿色*/
.demo a:active {color:blue;}/*鼠标点中激活链接时前景色为蓝色*/
对于这四个锚点伪类的设置，有一点需要特别注意，那就是它们的先后顺序。其顺序应该为link →visited→hover→active。如果把顺序搞错了，会产生意想不到的错误。其中:hover和:active又同时被 列入到用户行为伪类中。
1.:hover用于当用户把鼠标移动到元素上面时的效果;
2.:active用于用户单击元素时的效果;
3.:focus用于元素成为焦点时的效果; （这个经常用在表单元素上）
案例：
doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 CSS">
<meta content="超链接的伪类选择器">
<title>超链接的伪类选择器title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
ul {
margin:20px 0px;
height:30px;
background-color:#f09;
text-align:center;
}
li {
padding:10px 5px 2px 5px;
font-size:13px;
color:#fff;
float:left;
list-style:none;
}
a:link,a:visited {
text-decoration:none;/*不加下划线*/
color:#fff;
}
a:hover,a:active {
text-decoration:none;/*不加下划线*/
font-size:16px;
color:#ff9;
}
#titleInfo {
padding-left:50px;
}
style>
head>
<body>
<nav>
<ul>
<li id="titleInfo">请选择访问的网站：li>
<li><a href="http://www.sina.com.cn" target="_blank">新浪网a>li>
<li><a href="http://www.sohu.com" target="_blank">搜狐a>li>
<li><a href="http://www.163.com" target="_blank">163a>li>
<li><a href="http://www.qq.com" target="_blank">QQa>li>
<li><a href="http://www.baidu.com" target="_blank">百度a>li>
ul>
nav>
body>
html>
七、目标伪类选择器（自）
目标伪类选择":target"是众多实用的CSS3新特性中的一个，可以用来匹配HTML的URL中某个标识符的目标元素。具体来说，URL中的标识符通常会包含一个井号(#)，后面带有一个标识符名称。换种说法，在 Web页面中，一些URL拥有片段标识符，它由一个并号(#)后跟一个锚点或元素ID组合而成，可以链接到页面的某个特定元素。":target"伪类选择器选取链接的目标元素，然后供定义样式。该选择：器定义的样式在用户单击页面中的超链接并且跳转后方起作用。
案例：
doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 CSS">
<meta content="target选择器">
<title>target选择器title>
<style type="text/css">
div {
margin:5px;
width:300px;
height:300px;
background-color:#ccc;
float:left;/*向左浮动*/
}
:target {
background-color:#f00;/*鼠标悬停的背景色为红色*/
}
style>
head>
<body>
<nav>
<ul>
<li id="titleInfo">请选择访问的网站：li>
<li><a href="#PartA">区块Aa>li>
<li><a href="#PartB">区块Ba>li>
<li><a href="#PartC">区块Ca>li>
ul>
nav>
<div id="PartA">div>
<div id="PartB">div>
<div id="PartC">div>
body>
html>
如下还扩展几种伪类选择器，但这些选择器对各浏览器支持有一定差异，开发时慎重选择。
E:enabled选择器用来指定当元素处于可用状态时的样式。
E:disabled选择器用来指定当元素处于不可用状态时的样式。
E:read-only选择器用来指定当元素处于只读状态时的样式。
E:read-write选择器用来指定当元素处于非只读状态时的样式。
E:checked选择器用来指定当表单中radio元素或checkbox元素处于选取状态下的样式。
E:default选择器用来指定当页面打开时默认处于选取状态的单选按钮或复选框控件的元素样式。
E:indeterminate选择器用来指定当页面打开时，如果- -组单选按钮中任何一个单选按钮都没有被选中时，整组单选按钮的统一样式。
E:selection选择器用来指定当元素处于选中状态时的样式。
八、结构伪类选择器（自）
1.root
root 选择器用于指定页面根元素的样式。所谓根元素，是指位于文档树中最顶层结构的元素，在HTML文档中就是指包含着整个页面的部分。
2.empty
empty选择器用来指定当元素内容为空时使用的样式。
案例：
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>empty选择器title>
<style>
:root {
background-color: #b5f7e7;
}
:empty {
height: 30px;
background-color: #fc3;
}
style>
head>
<body>
<h2>《面朝大海，春暖花开》-海子h2>
<p>从明天起，做一个幸福的人。喂马，劈柴，周游世界。...p>
<p>p>
<h2>《雨巷》-戴望舒h2>
<p>撑着油纸伞，独自，彷徨在悠长、悠长，又寂寥的雨巷...p>
body>
html>
3.nth选择器
nth选择器是CSS3的最新内容，也被称为CSS3结构类。主要包含":first-child"、":last-child"、":nth-child"
1.:first-child
:first-child用来选择某个元素的第一个子元素。
2.:last-child
:last-child选择器与first-child选择器作用类似，:last-child 用来选中某个元素的最后一个子元素。
案例：
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>改变列表第一项和最后一项title>
<style>
li {
height:20px;
list-style:none;
font-size:13.5px;
vertical-align:middle;/*垂直居中*/
border-bottom:1px dashed #cccccc;
padding-top:8px;
}
li:before {
content: url(images/News-Icon.png);/*每项列表前添加图标*/
margin-right:10px;
}
li:first-child {
color:#090;
}
li:last-child {
color:#06f;
}
style>
head>
<body>
<h3>现代诗精选h3>
<ul>
<li>中国 | 《沪杭车中》-徐志摩
<li>日本 | 《初恋》-岛崎藤村
<li>中国 | 《只要彼此爱过一次》-汪国真
<li>印度 | 《你一定要走吗？》-泰戈尔
<li>美国 | 《茶的情诗》-张错
<li>英国 | 《好吧，我们不再一起漫游》-拜伦
<li>中国 | 《这也是一切》-舒婷
<li>印度 | 《假如我今生无缘遇到你》-泰戈尔
ul>
body>
html>
3.:nth-child
:nth-child()可以选择某个元素的一-个或多个特定的子元素。其常用形式如下所示：
:nth-child(length) 参数是具体数字
:nth-child(n) 参数是n, n从0开始计算
:nth-child(n*length) n的倍数选择，n从0开始计算
:nth-child(n+length) 选择大于length 后面的元素
:nth-child(-n+length) 选择小于length前面的元素
:nth-child(n*length+1) 表示隔几选一
:nth-child()可以定义值，值可以是整数，也可以是表达式。其中字母n是固定的，如果换作其他字母，就没有效果。
案例：选择偶数项
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择偶数项title>
<style>
li {
height:20px;
list-style:none;
font-size:13.5px;
vertical-align:middle;
border-bottom:1px dashed #cccccc;
padding-top:8px;
}
li:before {
content: url(images/News-Icon.png);
margin-right:10px;
}
li:nth-child(2n) {
color:#039;
}
style>
head>
<body>
<h3>现代诗精选h3>
<ul>
<li>中国 | 《沪杭车中》-徐志摩
<li>日本 | 《初恋》-岛崎藤村
<li>中国 | 《只要彼此爱过一次》-汪国真
<li>印度 | 《你一定要走吗？》-泰戈尔
<li>美国 | 《茶的情诗》-张错
<li>英国 | 《好吧，我们不再一起漫游》-拜伦
<li>中国 | 《这也是一切》-舒婷
<li>印度 | 《假如我今生无缘遇到你》-泰戈尔
ul>
body>
html>
4.:nth-last-child()
:ntb-last-child()选择器和前面的:nth-child()选择器相似，该选择器是从最后一个元素开始计算来选择特定元素。
练习：每隔2项选择一项（li:nth-last-child(3n+1)）
5.:nth-of-type()
:nth-of-type()选择器类似于:nth-child()选择器，不同的是仅计算选择器中指定的元素类型。
6.:nth-last-of-type()
:nth-last-of-type()选择器和nth-last-child()选择器相似，该选择器在选择时是从最后一个元素开始计算来选择特定元素的。
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>改变新闻标题的样式title>
<style>
li {
height:20px;
list-style:none;
font-size:13.5px;
vertical-align:middle;
border-bottom:1px dashed #cccccc;
padding-top:8px;
}
h3:nth-of-type(odd) {
color:#f00;
}
h3:nth-of-type(even) {
color:#f0f;
}
style>
head>
<body>
<h3>中国诗歌h3>
<ul>
<li>《面朝大海，春暖花开》-海子
<li>《乡愁》-余光中
<li>《只要彼此爱过一次》-汪国真
ul>
<h3>日本诗歌h3>
<ul>
<li>《初恋》-岛崎藤村
ul>
<h3>美国诗歌h3>
<ul>
<li>《茶的情诗》-张错
ul>
<h3>印度诗歌h3>
<ul>
<li>《假如我今生无缘遇到你》-泰戈尔
<li>《你一定要走吗？》-泰戈尔
ul>
body>
html>
7.:first-of-type和:last-of-type
:first-of-type和:last-of type选择器与:first-child和:last-child选择器相似，不同之处在于指定了元素类型进行计算。
8:only-child和:only-of-type
:only-child选择器用来指定一个元素是它的父元素的唯一元素。 :only-of-type选择器用来指定指定类型的一个元素是它的父元素的唯一元素。
案例：唯一元素的样式变化
doctype html>
<html>
<head>
<meta content="唯一元素的样式变化">
<title>唯一元素的样式变化title>
<style>
li {
height:20px;
list-style:none;
font-size:13.5px;
vertical-align:middle;
border-bottom:1px dashed #cccccc;
padding-top:8px;
}
li:only-child {
color:#0c0;
}
style>
head>
<body>
<h3>中国诗歌h3>
<ul>
<li>《面朝大海，春暖花开》-海子
<li>《乡愁》-余光中
<li>《只要彼此爱过一次》-汪国真
ul>
<h3>日本诗歌h3>
<ul>
<li>《初恋》-岛崎藤村
ul>
<h3>美国诗歌h3>
<ul>
<li>《茶的情诗》-张错
ul>
<h3>印度诗歌h3>
<ul>
<li>《假如我今生无缘遇到你》-泰戈尔
<li>《你一定要走吗？》-泰戈尔
ul>
body>
html>
九、否定选择器（自）
否定选择器 “:not()” 是 CSS3 的新选择器，类似 jQuery 中的 “:not()” 选择器，主要用来定位不 匹配该选择器的元素。":not()"是一个非常有用的选择器，可以起到过滤内容的作用，:not(footer){} 表示选择页面中所有元素，除了footer 元素之外。
案例：not选择器
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>not选择器title>
<style type="text/css">
:root {
background-color: #b5f7e7;
}
body *:not(h2) {
background-color: #fc3;
}
style>
head>
<body>
<h2>《面朝大海，春暖花开》-海子h2>
<p>从明天起，做一个幸福的人。喂马，劈柴，周游世界。...p>
<h2>《雨巷》-戴望舒h2>
<p>撑着油纸伞，独自，彷徨在悠长、悠长，又寂寥的雨巷...p>
body>
html>
十、伪元素（自）
伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器。 在CSS中，主要有四个伪元素选择器。
1.first-line
first-line伪元素选择器用于为某个元素中的第一行文字使用样式。
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>first-line选择器title>
<style>
p:first-line {
font-size:16px;
color:#f00;
}
style>
head>
<body>
<article>
<h2>《面朝大海，春暖花开》-海子h2>
<p>从明天起，做一个幸福的人。喂马，劈柴，周游世界...p>
<h2>《雨巷》-戴望舒h2>
<p>撑着油纸伞，独自，彷徨在悠长、悠长，又寂寥的雨...p>
article>
body>
html>
2.first-letter
first-letter伪元素选择器用于为某个元素中的文字的首字母使用样式。在英文中，首字母是第一个英文字符；在中文或日文中，首字母是第一个汉字。
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>first-letter选择器title>
<style>
p:first-letter {
font-size:40px;
color:#f00;
}
style>
head>
<body>
<article>
<h2>《面朝大海，春暖花开》-海子h2>
<p>从明天起，做一个幸福的人。喂马，劈柴，周游世界...p>
<p>从明天起，和每一个亲人通信。告诉他们我的幸福。...p>
<p>陌生人，我也为你祝福。愿你有一个灿烂的前程，愿...p>
article>
body>
html>
3.before
before伪元素选择器用于在某个元素之前插入一些内容。
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>before选择器title>
<style type="text/css">
li {
height:20px;
list-style:none;
font-size:13.5px;
vertical-align:middle;
border-bottom:1px dashed #cccccc;
padding-top:8px;
}
li:before {
content: "图书";
margin-right:10px;
}
style>
head>
<body>
<h3>现代诗精选h3>
<ul>
<li>中国 | 《沪杭车中》-徐志摩
<li>日本 | 《初恋》-岛崎藤村
<li>中国 | 《只要彼此爱过一次》-汪国真
<li>印度 | 《你一定要走吗？》-泰戈尔
<li>美国 | 《茶的情诗》-张错
<li>英国 | 《好吧，我们不再一起漫游》-拜伦
<li>中国 | 《这也是一切》-舒婷
<li>印度 | 《假如我今生无缘遇到你》-泰戈尔
ul>
body>
html>
4.after
after伪元素选择器用于在某个元素之后插入一些内容。
十一、属性选择器（自）
在HTML中，通过各种各样的属性，可以给元素增加许多附加信息。这样就可以通过属性的不同，指定具有特定属性的元素。
属性选择器在CSS2中就被引入，其主要作用是对带有指定属性的HTML元素设置样式。使用CSS3属性选择器，可以只指定元素的某个属性，也可以同时指定元素的某个属性及其对应的属性值。
其语法如下所示：
元素名字[元素类型="类型名字"]:选择器名字{}
在元素类型匹配时，就可以使用类似正则表达式的匹配方法。
[att=val]指定特定名字的元素;
[att*=val]匹配val*的元素;
[att^=val]匹配val开头的元素，比如id为vall、val432432 等;
[att$=val]匹配val结尾的元素，比如id为1213val、fdajlval 等。
1.E[attr]
E[attr]属性选择器是CSS3属性选择器中最简单的一种。
如果希望选择有某个属性的元素，而不管其属性值是什么，就可以使用此属性选择器。Eattr]属 性选择器可以指定一个属性，也可以指定多个属性。
如下选择有id的元素
<style>
[id]{
font-size:12px;
color:#C00;
}
style>
2.E[attr=“value”]
E[attr=“value”]选择器和E[attr]选择器，从字面上就能很清楚地理解出其区别。E[attr=“value”]是指定了属性值"value"，而E[attr]只是选择了对应的属性，并没有明确指出其对应的属性值"value"，这也是这两种选择器的最大区别之处。 E[attr=“value”]选择器要求属性和属性值必须完全匹配。
如下选择id为Newsl的属性
[id="Newsl"]{
font-size:14px;
color:#000;
}
3.E[attr~=“value”]
E[attr~=“value”]根据属性值中的词列表的某个词来选择元素。 此属性选择器要求属性值是一个或多个词列表，如果是列表时，多个词需要用空格隔开，只要元素的属性值中有一个词和value相匹配就可以选中该元素。
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>根据属性值单词的选择器title>
<style>
[id~="Content"] {
color:#090;
}
style>
head>
<body>
<header>
<div id="News1">《再别康桥》-徐志摩div>
<div id="News1-c">轻轻的我走了，正如我轻轻的来；我轻轻的招手...div>
<div id="News2">《乡愁》-余光中div>
<div id="News2-c News2C Content">小时侯，乡愁是一枚小小的邮票，我在这头...div>
header>
body>
html>
4.E[attr^=“value”]
E[attr^=“value”]属性选择器，表示的是选择attr属性值以"value"开头的所有元素，换句话说，选择的属性其对应的属性值是以"value"开始的。
5.E[attr$=“value”]
E[attr$=“value”]属性选择器，表示的是选择attr 属性值以"value"结尾的所有元素，换句话说， 选择的属性其对应的属性值是以"value"结尾的。
6.E[attr*=“value”]
E[attr*=“value”]属性选择器，表示的是选择attr属性值中包含子串"value"的所有元素。也就是说，只要所选择属性的值中有这个"value"值都将被选中。
7.E[attr|=“value”]
E[attr|=“value”]属性选择器，表示的是选择attr属性值等于“value”或者是以“value”开头的所有元素。 注意，attrt 后面的是竖线“|”。