1.基本选择器
<!DOCTYPE html>
<html>
<head>
<title>使用css3基本选择器</title>
</head>
<body>
<ul class="clearfix demo">
<li class="first" id="first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class="last" id="last">10</li>
</ul>
</body>
</html>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/*清除浮动效果*/
.clearfix:after,.clearfix:before{
display: table;
content: ""
}
.clearfix:after{
clear: both;
}
.demo{
width: 250px;
border:1px solid #ccc;
padding: 10px;
/*上下外边距20px 元素水平居中*/
margin: 20px auto;
}
li{
/*list-style-type ， list-style-position ， list-style-image*/
/*https://wwwblogs/ymj0906/archive/2012/06/15/2550084.html*/
/*隐藏列表项*/
list-style: none outside none;
float: left;
height: 20px;
line-height: 20px;
width: 20px;
border-radius: 10px;
text-align: center;
background: pink;
color: green;
margin-right: 5px;
}
</style>
效果如图所示
通配符选择器
使用通配符选择器改变背景色
将元素类名为demo下的所有元素背景色设置为橙色
/*将元素类名为demo下的所有元素背景色设置为橙色*/
.demo *{
background: orange;
}
元素选择器
列表ul的背景色将变成灰色
ul {
background: grey;
}
id选择器
#first{
background: lime;
color: #000;
}
#last{
background: #000;
color: lime;
}
类选择器
.item{
background: green;
color: #fff;
font-weight: bold;
}
多类选择器
如果一个多类选择器包含的类名中其中有一个不存在，这个选择器将无法找到相匹配的元素
列表3同时具有important和item类名
列表4只有important类名
列表5只有item类名
.item{
background: green;
color: #fff;
font-weight: bold;
}
.item.important{
background: red;
}
带标签的类名选择器
仅需要对ul为”block”定义样式
ul.block{
background: #ccc;
}
群组选择器
将具有相同样式的元素分组在一起，每个选择器之间用逗号隔开
“selector1,selector2”表示选择匹配为selector1和selector2的所有元素
2.层次选择器
主要层次关系包括后代 父子 相邻兄弟 和通用兄弟几种关系
举例说明
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>9
<div>10</div>
</div>
</div>
</div>
</body>
</html>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 300px;
margin:0 auto;
}
div{
margin:5px;
padding: 5px;
border:1px solid #ccc;
}
</style>
将事例中的body画出dom树形草图
后代选择器
后代选择器之间以空格隔开
后代选择器 E F
E为祖先元素，F为后代元素，这里F不管是E元素的子元素，孙辈元素都将被选中
不论F在E中有多少层级 ，F都将被选中
使用后代选择器改变背景颜色
div div {
background: orange;
}
子选择器
E>F 选择某元素的子元素
E为父元素 F为子元素，这里F仅仅是E的子元素而已
改变body下的子元素div的背景色
div div {
background: orange;
}
body > div {
background: green;
}
相邻兄弟选择器
E+F 选择紧接在另一个元素后的元素
它们具有一个相同的父元素
E F是相邻元素
为了说明相邻兄弟选择器，在此处添加一个类名active
<div class="active">1</div>
div div {
background: orange;
}
body > div {
background: green;
}
.active + div {
background: lime;
}
此时第二个div的背景色变成"lime"色
通用兄弟选择器
E~F 用于选择某元素后面的所有兄弟元素
与相邻兄弟选择器类似
它们具有一个相同的父元素
div div {
background: orange;
}
body > div {
background: green;
}
.active + div {
background: lime;
}
.active ~ div {
background: red;
}
3.伪类选择器
伪类选择器语法书写
E:class {property:value}
其中E为html中的元素，class是伪类选择器名称，property是属性，value是属性值
动态伪类选择器
动态伪类选择器语法
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
目标伪类选择器
<!DOCTYPE html>
<html>
<head>
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>
<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>
<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>
</body>
</html>
:target应用场景
制作手风琴，高亮显示脚注
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="accordionMenu">
<div class="munuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>第一个区域</p>
</div>
<div class="munuSection" id="promotion">
<h2><a href="#promotion">Promotion</a></h2>
<p>第二个区域</p>
</div>
<div class="munuSection" id="event">
<h2><a href="#event">Event</a></h2>
<p>第三个区域</p>
</div>
</div>
</body>
</html>
<style type="text/css">
/*设置位置*/
.accordionMenu{
background: #fff;
color: #424242;
margin: 0 auto;
width: 500px;
border: 1px solid red;
font-size: 12px;
font-family: Arial, Verdana, sans-serif;
}
/*accordionMenu下所有的子元素或者孙辈元素h2*/
.accordionMenu h2{
margin: 5px 0;
position: relative;
}
/*制作向下三角效果*/
.accordionMenu h2:before {
border: 5px solid black;
content: "";
height: 0;
position: absolute;
right: 10px;
top: 10px;
border-color:#fff transparent transparent transparent;
width: 0;
}
/*制作手风琴标题栏效果*/
.accordionMenu h2 a{
background: #8f8f8f;
display: block;/*块级元素，铺满整个区域*/
color:#424242;/*默认的字体颜色*/
font-size: 13px;
margin: 0;
padding: 10px 10px;/*文字距离四周的间距*/
text-shadow: 2px 2px 2px #aeaeae;
text-decoration: none;
}
/*目标标题的效果，点击之后标题的效果*/
.accordionMenu :target h2 a,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active{
background: #2288dd;
color:#FFF;
}
/*标题栏对应的内容*/
.accordionMenu p{
margin: 0;
height: 0;/*默认栏目内容高度为0，达到隐藏的效果*/
overflow: hidden;
/*padding: 0 10px;*/
}
/*关键代码，展开对应目标内容*/
.accordionMenu :target p{
height: 100px;
overflow: auto;
}
/*展开时标题上的三角效果*/
.accordionMenu :target h2:before{
border-color: transparent transparent transparent #fff;
}
</style>
语言伪类选择器
<!DOCTYPE html>
<html lang="fr">
<head>
<title></title>
</head>
<body>
<p>WWWF's goal is to:
<q cite="http://www.wwf">
build a future where people live in harmony with nature
</q>we hope they succeed
</p>
</body>
</html>
<style type="text/css">
:lang(en){
quotes: '"''"';
}
:lang(en) q {background: red};
:lang(fr){
quotes: '“''”';
}
:lang(fr) q {background: green};
</style>
当修改为<html lang="en-US">时,如下图所示
ui元素状态伪类选择器
一般状态包括 启用 禁用 选中 未选中 获得焦点 失去焦点 锁定和待机等
可参考 http://twitter.github/bootstrap/base-css.html#forms示例
结构伪类选择器
<!DOCTYPE html>
<html>
<head>
<title>html dom树形结构图</title>
</head>
<body>
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div>abc</div>
<p>para</p>
<b>ghi</b>
</div>
</body>
</html>
结构伪类选择器语法
结构伪类选择器中，有4个伪类选择器接受参数n
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
这个参数n可以是1,2,3,4，odd,even,2n+1,-n+5
参数n的起始值始终是1 而不是0 为0时选择器将选择不到任何匹配的元素
参数按常用的类型划分七种情况
1.具体的数值 :nth-child(3)
2.n为表达式"nlength" :nth-child(2n)
3.n为表达式"n+length" :nth-child(n+2)
4.n为表达式"-n+length" :nth-child(-n+2)
5.n为表达式"nlength+b" :nth-child(2n+1)
6.n为odd 奇数
7.n为even 偶数
结构伪类选择器的使用方法
1.:first-child的使用
定位某个元素的第一个子元素
ul>li:first-child {
background-color: green;
}
2.:last-child的使用
定位某个元素的最后一个子元素
ul>li:last-child {
background-color: blue;
}
3.nth-child的使用
定位某个父元素的一个或多个特定的子元素
ul>li:nth-child(3){
background-color: yellow;
}
注意ul>li:nth-child(3)表达的并不是一定选择列表ul元素中的第3个子元素li
如果当第3个li元素前存在其他类型的元素，是不会改变第3个li元素的背景色的
4.nth-child(n)
ul>li:nth-child(n){
background-color: orange;
}
4.nth-child(2n)
ul>li:nth-child(2n){
background-color: blue;
}
5.nth-child(2n+1）
ul>li:nth-child(2n+1){
background-color: blue;
}
6.nth-child(n+5）
ul>li:nth-child(n+5){
background-color: blue;
}
7.nth-child(-n+5）
ul>li:nth-child(-n+5){
background-color: blue;
}
8.nth-child(4n+1）
ul>li:nth-child(4n+1){
background-color: blue;
}
:nth-last-child使用
从父元素的最后一个子元素开始计算来选择特定的元素
ul>li:nth-last-child(4){
background-color: yellow;
}
其中nth-child(odd)和nth-last-child(even)选择的元素是相同的
其中nth-child(even)和nth-last-child(odd)选择的元素是相同的
:nth-of-type的使用
只计算父元素中指定的某种类型的子元素
nth-of-type选择的是某父元素的子元素，并且这个子元素是指定类型的
:nth-last-of-type选择的某类型子元素是从后向前排序计算
:first-of-type和:last-of-type的使用
类似于:first-child和:last-child，不同之处就是指定了元素的类型
:first-of-type是用来定位某个父元素下某个指定类型的第一个子元素
:last-of-type是用来定位某个父元素下某个指定类型的最后一个子元素
:only-child的使用
表示一个元素是它父元素的唯一子元素
:only-of-type的使用
表示选择一个元素是它父元素的唯一一个相同类型的子元素
:only-of-type表示一个元素有很多个子元素，而其中只有一个子元素是唯一的，使用:only-of-type就可以选中这个唯一类型的子元素
:empty的使用
用来选择没有任何内容的元素
否定伪类选择器
:not() 过滤内容
伪元素
可用于定位文档中的文本
1::first-letter
用来选择文本块的第一个字母
首字母下沉效果
p:first-child::first-letter{
float: left;
color: #903;
padding: 4px 8px 0 3px;
font: 75px/60px Georgia;
}
2::first-line
匹配元素的第一行文本
将匹配block inline-block table-caption table-cell等级别的元素的第一行
p::first-line{
background-color:yellow;
}
3.::before ::after
这两个主要用来给元素的前面或后面插入内容
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<a href="https://www.runoob/">访问菜鸟教程</a>
<a href="https://www.runoob/">访问菜鸟教程</a>
</body>
</html>
<style type="text/css">
a {
position: relative;
display: inline-block;
outline: none;
text-decoration: none;
font-size: 16px;
padding: 5px 15px;
}
a:hover::before, a:hover::after {
position: absolute;
}
a:hover::before {
content: "\5B";
left: -2px;
}
a:hover::after {
content: "\5D";
right: -2px;
}
</style>
4.::selection
匹配突出显示的文本
::selection{
background:red;
color:#fff;
}
用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性：一个就是 background,另一个就是 color 属性
属性选择器
属性选择器的使用
1，E[attr]
（1）用于选取带有指定属性的元素。
/**选择了.demo下所有带有id属性的a元素 **/
.demo a[id] {
}
（2）也可以使用多属性进行选择元素。
/**选择了.demo下同时拥有href和title属性的a元素 **/
.demo a[href][title] {
}
2，E[attribute=value]
用于选取带有指定属性和值的元素。当前也可以多个属性一起使用：
/**选择了.demo下id="first"的a元素 **/
.demo a[id="first"] {
}
/**选择了.demo下id=“first”，且拥有title属性的a元素 **/
.demo a[id="first"][title] {
}
注意：E[attribute=value] 这种属性选择器，属性和属性值必须完全匹配，特别是对于属性值是词列表的形式时。
/** 匹配不到元素 **/
a[class="links"] {
}
/** 这个才能匹配到 **/
a[class="links item"] {
}
<a href="" class="links item">hangge</a>
3，E[attribute~=value]
用于选取属性值中包含指定词汇的元素。同上面的完全匹配不同，这个只要属性值中有 value 就相匹配。
/** 可以匹配到元素 **/
a[class~="links"] {
}
<a href="" class="links item">hangge</a>
4，E[attribute^=value]
匹配属性值以指定 value 值开头的每个元素。
/** href属性值以"mailto:"开头的所有a元素 **/
a[href^="mailto:"] {
}
5，E[attribute$=value]
匹配属性值以指定 value 值结尾的每个元素。
/** href属性值以"png"结尾的所有a元素 **/
a[href$="png"] {
}
6，E[attribute*=value]
匹配属性值中包含指定 value 值的每个元素。
/** title属性值中只要包含有"site"的所有a元素 **/
a[title*="site"] {
}
7，E[attribute|=value]
这个选择器会选择 attr 属性值等于 value 或以 value- 开头的所有元素。
/** 下面3个img都会被匹配到 **/
img[src|="figure"] {
}
<img src="figure-0.png" alt="图1">
<img src="figure-1.png" alt="图1">
<img src="figure-2.png" alt="图1">
E[attribute*=value]和E[attribute~=value]区别
E[attribute*=value]匹配的是元素属性值中只要包含val字符串就可以
E[attribute~=value]匹配的是元素属性值中要包含val，并不仅是字符串
https://www.hangge/blog/cache/detail_1727.html
更多推荐
css3选择器详解
发布评论