web前端学习（三）css学习笔记部分（6）-- 选择器详解
9、选择器详解
9.1 属性选择器
CSS3 属性选择器，在 CSS3 中，追加了三个属性选择器分别为：[att*=val]、[att^=val]和[att$=val]，使得属性选择器有了通配符的概念。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[id*=div]{/*选中id中有div字样的*/
color:lime;
}
[id^=div]{/*选中id中开头是div字样的*/
color: #FF0000;
}
[id$=y]{/*选中id中结尾是div字样的*/
color: fuchsia;
}
</style>
<!--css样式表放在前面和后面效果是相同的，只不过在前面的是只渲染一次的
css放在后面引入的话页面需要渲染两次-->
</head>
<body>
<div id="mydiv1">这是一段话测试</div>
<div id="div2">这是一段话测试</div>
<div id="div3">这是一段话测试</div>
<div id="div4">这是一段话测试</div>
<div id="my">这是一段话测试</div> </body> </html>
9.2 结构性伪类选择器
CSS3 结构性伪类选择器，包含伪类选择器和伪元素选择器，在伪元素选择器中包含 first-line、first-letter、before、after。
9.2.1 伪类选择器概述
9.2.2 伪元素选择器概述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p:first-line{
color:crimson;
}
/*first-line第一行*/
p:first-letter{
color:deepskyblue;
}
li:before{
content:"---";
}
/*first-letter*/
li:after{
content:"对列表做一个解释";
font-size: 10px;
color:darkgrey;
}
</style>
</head>
<body>
<p>这是第一行的内容<br/>这里是第二行的内容</p>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
</body>
</html>
9.3 选择器root、not、empty、target
CSS3 选择器 root、not、empty 和 target，主要掌握 root 选择器是绑定到页面的根元素中，如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，可以使用 not，使用 empty 选择器来指定当元素中内容为空白时使用的样式。
在CSS3中，结构性伪类选择器的共同特征是允许开发者根据文档中的结构来指定元素的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*root是对根元素进行样式更改，
即对最根本的html标签进行更改*/
:root {
background-color: darkgrey;
} /*如果root有设定，那么body就不再是占据整个页面大小的了，只占据
他该占据的内容*/
body {
background-color: green;
} /*not用来排除某一个标签内部的某一内容*/
div *:not(h1) {
color: darkmagenta;
} /*只写:empty的话是给所有空白元素加样式*/
:empty { } /*可以灵活应用，老师上课讲的是:empty*/
td:empty {
background-color: #FF0000;
}
/*target属性代表在链接跳转后跳转到的链接div的样式
点击不同的链接时，之前更改过的链接的样式会还原到原来的样子*/
:target{
background-color: orange;
}
</style>
</head>
<body>
<div>
<h2>你好吗？</h2>
<h1>这里是标题</h1>
<p>这里是一个p标签</p>
</div>
<table border="1px">
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td></td>
<td>表格4</td>
</tr>
</table>
<a href="#a1">菜单1</a>
<a href="#a2">菜单2</a>
<a href="#a3">菜单3</a>
<a href="#a4">菜单4</a>
<div id="a1">
<h1>菜单1</h1>
<p>菜单1内容</p>
</div>
<div id="a2">
<h1>菜单2</h1>
<p>菜单2内容</p>
</div>
<div id="a3">
<h1>菜单3</h1>
<p>菜单3内容</p>
</div>
<div id="a4">
<h1>菜单4</h1>
<p>菜单4内容</p>
</div>
</body>
</html>
10.1 选择器：first-child、last-child、nth-child 和 nth-last-child
first-child、last-child、nth-child 和 nth-last-child，利用这几个选择器能够针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个或第奇数个子元素进行样式的指定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li:first-child{
background-color: yellow;
}
li:last-child{
background-color: blue;
}
li:nth-child(3){
background-color: firebrick;
}
/*last-child倒数第几个孩子*/
li:nth-last-child(2){
background-color: darkgreen;
}
/*odd是奇数的孩子
even是偶数的孩子
*/
li:nth-child(odd){
background-color: fuchsia;
}
</style>
</head>
<body>
<h2>列表</h2>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
<li>列表7</li>
<li>列表8</li>
</ul>
</body>
</html>
10.2 选择器：nth-of-type 和 nth-last-of-type
nth-of-type 和 nth-last-of-type，使用这两个选择器，可以避免一些问题的发生。
使用这两个选择器时，CSS3在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型的子元素进行计算了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按类别选子孩子</title>
<style>
h2:nth-of-type(odd){
background-color: #FF0000;
}
/*h2前面还可以加div进行多一级选择，多类选择器可以混合使用，如下*/
/*div h2:nth-of-type(odd){*/
/*background-color: #FF0000;*/
/*}*/
h2:nth-last-of-type(odd){
background-color: aqua;
}
/*h2前面还可以加div进行多一级选择，多类选择器可以混合使用*/
</style>
</head>
<body>
<div>
<h2>文章标题</h2>
<p>文章正文</p>
<h2>文章标题</h2>
<p>文章正文</p>
<h2>文章标题</h2>
<p>文章正文</p>
<h2>文章标题</h2>
<p>文章正文</p>
<h2>文章标题</h2>
<p>文章正文</p>
<h2>文章标题</h2>
<p>文章正文</p>
</div>
</body>
</html>
10.3 only-child 选择器
使用only-child选择器可以代替使用 nth-child(1)：nth-last-child(1) 的实现方法。
nth-child()使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li:nth-child(4n+1){
background-color: darkviolet;
}
li:nth-child(4n+2){
background-color: darkgreen;
}
li:nth-child(4n+3){
background-color: firebrick;
}
li:nth-child(4n+4){
background-color: aqua;
}
/*4n和4n+4效果是一样的
li:nth-child(4n){
background-color: aqua;
}*/ </style>
</head>
<body>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li> </ul>
</body>
</html>
使用only-child选择器可以代替使用 nth-child(1)：nth-last-child(1) 的实现方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*li:nth-child(1){*/
/*background-color: aqua;*/
/*}*/
li:only-child{
background-color: #FF0000;
}
</style>
</head>
<body>
<ul>
<li>列表1</li>
</ul>
<ul>
<li>列表1</li>
</ul>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>
</html>
11.1 CSS3 选择器 hover、focus、active 和 checked
在 CSS3 的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器，例如 hover、focus、active 和 checked 等
在CSS的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器。这些选择器的共同特征是：指定的样式只有当元素处于某种状态下才起作用，在默认状态下不起作用。
在CSS3中，共有17种UI元素状态伪类选择器，分别是E:hover、E:active、E:focus、E:disabled、E:read-only、E:checked、E:default、E:indeterminate、E:selection、E:invalid、E:valid、E:required、E:optional、E:in-range、
输入框示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*hover是在鼠标放上去的时候有的颜色*/
input[type="text"]:hover{
background-color: darkviolet;
}
/*focus是鼠标按下的状态有的颜色*/
input[type="text"]:focus{
background-color: aqua;
}
/*active是指输入框被激活后的状态*/
input[type="text"]:active{
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<input type="text" name="name">
<input type="text" name="age">
</body>
</html>
checkbox示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>checkbox</title>
<style>
input[type="checkbox"]:checked{
/*background-color: #FF0000;*/
/*不知道为什么google浏览器的复选框显示有问题
火狐浏览器显示的没有问题*/
outline: gold solid 1px;
}
</style>
</head>
<body>
<input type="checkbox">阅读
<input type="checkbox">旅游
<input type="checkbox">看电影
<input type="checkbox">上网
</body>
</html>
11.2 enabled和disabled
除了结构性伪类选择器外，还有一种 UI 元素状态伪类选择器，例如：enabled 和 disabled 等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>enabled.disabled</title>
<style>
input[type="text"]:enabled{
background-color: gold;
}
input[type="text"]:disabled{
background-color: fuchsia;
}
</style>
</head>
<body>
<script>
function radio_change(){
var radio1 = document.getElementById("radio1");
var radio2 = document.getElementById("radio2");
var text = document.getElementById("text");
if(radio1.checked){
text.disabled = "";
/*text.disable = false这样写也可以*/
}else{
text.value = "";
text.disabled = "disabled"
}
}
</script>
<input type="radio" id="radio1" name="radio" onchange="radio_change()">可用
<input type="radio" id="radio2" name="radio" onchange="radio_change()">不可用
<input type="text" id="text" disabled>
<!--disabled属性只要在input中写了，那么标签将必不可用，
不论其内部的值为什么值，只能通过js修改为可用状态-->
</body>
</html>
11.3 通用兄弟元素选择器
除了结构性伪类选择器外，还有一种 UI 元素状态伪类选择器，例如：通用兄弟元素选择器等
关于选择器，最后一个介绍的是通用兄弟元素选择器，他用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*同级兄弟选择器指的是波浪线两侧的元素是同级*/
/*父元素之下的情况下选中波浪线之后的元素*/
/*这里的div是里div*/
div ~ p{
background-color: fuchsia;
}
</style>
</head>
<body>
<div>
<div><!--指的是在这里这个div-->
<p>p元素为小div的元素</p>
<p>p元素为小div的元素</p>
</div>
<p>p元素为大div的元素</p>
<p>p元素为大div的元素</p>
<p>p元素为大div的元素</p>
</div>
</body>
</html>
web前端学习（三）css学习笔记部分（6）-- 选择器详解的更多相关文章
- 前端优化：css雪碧图实践应用详解
一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...
- Web前端与移动开发学习路线图
文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...
- 想做web前端project师应该学习些什么？
偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...
- 最全的WEB前端开发程序员学习清单
史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...
- 1+x证书Web前端开发HTML+CSS专项练习测试题（八）
1+x证书Web前端开发HTML+CSS专项练习测试题(八) 官方QQ群 1+x 证书 Web 前端开发 HTML+CSS 专项练习测试题(八) http://blog.zh66.club/index ...
- IP2——IP地址和子网划分学习笔记之《子网掩码详解》
2018-05-04 16:21:21 在学习掌握了前面的<进制计数><IP地址详解>这两部分知识后,要学习子网划分,首先就要必须知道子网掩码,只有掌握了子网掩码这部分内容 ...
- Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- web前端篇：CSS使用，样式表特征，选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- ASP.NET MVC 5 学习教程：Edit方法和Edit视图详解
原文 ASP.NET MVC 5 学习教程:Edit方法和Edit视图详解 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 ...
随机推荐
- cesium-长度测量和面积测量
网上找的大神的实现方法有点问题,实现有一些bug,作为cesium新手一个,弃之不忍,只好硬着头皮修改了,不过还好问题不大,再次mark一下,下次就可以直接用了 image.png import ...
- 【LGP4705】玩游戏
题目 显然这个题的期望就是逗你玩的,我们算出来总贡献除以\(nm\)就好了 设\(ans_t=\sum_{i=1}^n\sum_{j=1}^n(a_i+b_j)^t\) 二项式定理展开一下 \[ans ...
- APPScan手动探索
- 跟我一起学习webpack输出动态HTML(三)
跟着之前的项目来 我们没打包一次就会生成一个bundile.js,我们要更新最新的代码不希望有缓存,那么这个时候我们就是更改资源的URL, 每当代码发生变化时,相应的hash也会发生变化.这个时候我们 ...
- [转]使用RDLC报表
使用RDLC报表(一) 1 建立数据源 启动VS2005新建一个窗体项目,命名为TestProj 在左边的窗体内选择“添加新数据源”或在菜单上操作“添加新数据源”: 选择后出现对话窗体,选 ...
- mysql兼容性语句
SHOW /*!50 GLOBAL */ STATUS SHOW /*!500 GLOBAL */ STATUS SHOW /*!5000 GLOBAL */ STATUS 都报错,必须是 SHOW ...
- 廖雪峰Java10加密与安全-6数字证书-1数字证书
数字证书: 非对称加密算法:对数据进行加密/解密 签名算法:确保数据完整性和抗否认性 摘要算法:确保证书本身没有被篡改
- LUOGU P2986 [USACO10MAR]伟大的奶牛聚集Great Cow Gat…
传送门 解题思路 首先第一遍dfs预处理出每个点的子树的siz,然后可以处理出放在根节点的答案,然后递推可得其他答案,递推方程 sum[u]=sum[x]-(val[i]*siz[u])+(siz[1 ...
- 【一坨理论AC的题】Orz sxy大佬
1.UVA10891 Game of Sum 2.LA4254 Processor . 3.UVA10905 Children's Game 4.UVA11389 The Bus Driver Pro ...
- UITableViewHeaderFooterView can't change custom background when loading from nib
down voteforite I've created a custom UITableViewHeaderFooterView and successfully load from nib int ...