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 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 ...
随机推荐
- 16_k近邻算法总结
1.k近邻算法属于分类算法 2.你的“邻居”来推断出你的类别 3.标准定义:如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则该样本也属于这个类别. 4.计算 ...
- linux命令补全工具
一:下载bash-competion工具 https://files.cnblogs.com/files/zgngg/bash-completion.zip 二:解压 unzip bash-comp ...
- [LOJ#162]模板题-快速幂2
<题目链接> 注意:这可能也是一道模板题. 注意2:$p=998224352$ 注意3:对于$100\%$的数据,$n\leq 5 \times 10^6$ 这个题很启发思路,如果直接快速 ...
- 强制以32位ie运行程序
最近被一个问题给郁闷住了.给电脑重装系统后,发现发布好的程序.或者VS2012总是以64位ie运行程序,这样的话skyline的三维控件无法显示.到现在我是确定ie64无法识别skyline的控件. ...
- spring cloud深入学习(七)-----配置中心git示例
随着线上项目变的日益庞大,每个项目都散落着各种配置文件,如果采用分布式的开发模式,需要的配置文件随着服务增加而不断增多.某一个基础服务信息变更,都会引起一系列的更新和重启,运维苦不堪言也容易出错.配置 ...
- Maven实战错误笔记：使用mvn archetype:generate报错：Unable to add module to the current project as it is not of packaging type 'pom'
在使用mvn archetype:generate生成Maven实战03:HelloWorld中的HelloWorld的项目骨架时报了这个错,从字面上分析是可能与pom.xml文件有关,然后我看了一下 ...
- MySql存储过程批量给多个数据库中的同名表添加字段
1 创建存储过程 batchAddField:给所有"MyDB_"开头的数据库添加新字段 -- ---------------------------- -- Procedure ...
- js之简单工厂模式
简单工厂模式是由一个方法来决定到底要创建哪个类的实例, 而这些实例经常都拥有相同的接口. 这种模式主要用在所实例化的类型在编译期并不能确定, 而是在执行期决定的情况. 说的通俗点,就像公司茶水间的饮料 ...
- 2019-6-23-win10-uwp-未给任务-GenerateAppxPackageRecipe-的必需参数-AppxManifestXml-赋值
title author date CreateTime categories win10 uwp 未给任务 GenerateAppxPackageRecipe 的必需参数 AppxManifestX ...
- Effective Modern C++ 条款3：理解decltype
说起decltype,这是个古灵精怪的东西.对于给定的名字或表达式,decltype能告诉你该名字或表达式的型别.一般来说,它告诉你的结果和你预测的是一样的.不过,偶尔它也会给出某个结果,让你抓耳挠腮 ...