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 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 ...
随机推荐
- hibernate离线条件查询设置or关系
detachedCriteria.add(Restrictions.or(Restrictions.isNull(""), Restrictions.isNull("&q ...
- hbase master一直报启动不起来问题（region空洞和region卡在spilt）
数据不重要或者一直卡着的情况下,可以切换hdfs用户到hbase的wal目录下对spilting的数据进行重命名.具体步骤如下 1.关闭hbase集群 2.切换hdfs用户 3.到hbasewal目录 ...
- Netty TCP粘包/拆包问题《二》
1.DelimiterBasedFrameDecoder:是以分隔符作为结束标志进行解决粘包/拆包问题 代码: EchoClient:客户端 /* * Copyright 2012 The Netty ...
- SprigBoot中的 WebMvcConfigurer与 WebMvcConfigurerAdapter和 WebMvcConfigurationSupport
WebMvcConfigurationAdapter 过时? 在SpringBoot2.0之后的版本中WebMvcConfigurerAdapter过时了,所以我们一般采用的是如下的两种的解决的方法. ...
- 2019-5-21-Roslyn-使用-Directory.Build.props-管理多个项目配置
title author date CreateTime categories Roslyn 使用 Directory.Build.props 管理多个项目配置 lindexi 2019-05-21 ...
- nosql BASE
- js实现事件委托
事件委托的概念: 事件委托就是利用事件冒泡,把事件加到父元素或祖先元素上,触发执行效果. 事件委托的写法: btn6.onclick = function(event){ event = event ...
- agc034
A:题意:你有一个1 * n的网格,有些地方是障碍.你有两个人,分别要从a到b和从c到d,一次只能向右跳1步或者两步.求是否可行. 解:先判断有没有2个连续的障碍,然后判断是否能错车. #includ ...
- Joining Byte Blocks（哈希+带花树）
题目链接 Problem Statement As you are probably aware, the Internet protocols specify a canonical byte or ...
- vue 路由 URL传参
源码如下: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) //全局使用该组件 const ro ...