CSS3 选择器学习

学习网站：https://www.imooc.com/

CSS3 选择器部分

1.属性选择器

CSS3 选择器学习

开头^;

结尾$;

包含*；

<a href="xxx.pdf" target="_blank" rel="external nofollow" >我链接的是PDF文件</a>
<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="icon">我类名是icon</a>
<a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  title="我的title是more">我的title是more</a>
------------------------------------------------------------------------
a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}

2.结构性伪类选择器

:root 选择器

从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是

<html>

。

“:root”选择器等同于

<html>

元素，简单点说：

:root{
	background:orange
}

html {
	background:orange;
}

得到的效果等同。

:not 选择器

称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。

就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：

input:not([type="submit"]){
  border:1px solid red;
}

:empty 选择器

表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

<p>我是一个段落</p>
<p> </p>
<p></p>
------------------------------------------------------------------
p{
 background: orange;
 min-height: 30px;
}
p:empty {
  display: none;
}

CSS3 选择器学习

:target 选择器

称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

案例：

<h2><a href="#brand" target="_blank" rel="external nofollow" >Brand</a></h2>
<div class="menuSection" id="brand">
    content for Brand
</div>
-----------------------------------------------------------------------------
.menuSection{
  display: none;
}
:target{/*这里的:target就是指id="brand"的div对象*/
  	display:block;
}

分析：

1、具体来说，触发元素的URL中的标志符通常会包含一个#号，后面带有一个标志符名称，上面代码中是：#brand

2、：target就是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素，类似于锚点。

:first-child 选择器

表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

ul > li:first-child{
 color: red;
}
--------------------------------------------------
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—first-child</title>
<link href="style.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css">
</head> 
<body>
<ul>
  <li><a href="##" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link1</a></li>
  <li><a href="##" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link2</a></li>
  <li><a href="##" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link3</a></li>
  <li><a href="##" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link4</a></li>
  <li><a href="##" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >Link5</a></li>
</ul>
</body>
</html>

:last-child 选择器

与“

:first-child

”选择器作用类似，不同的是“

:last-child

”选择器选择的是元素的最后一个子元素。

ul {
  border: 1px solid #ccc;
  list-style: none outside none;
  width: 220px;
  margin: 20px auto;
  padding: 0;
}
ul > li {
  list-style: none outside none;
  margin:0;
  padding: 10px;
  border-bottom: 3px solid #ccc;
}
ul > li:last-child{
  border-bottom: none;
}
------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>结构伪类选择器——last-child</title>
<link href="style.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css">
</head> 
<body>
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item5</li>
  <li>Item6</li>
</ul>
</body>
</html>

CSS3 选择器学习

:nth-child(n) 选择器

:nth-child(n) 选择器匹配

父元素

中的第 n 个子元素，元素类型没有限制。

n 可以是一个数字，一个关键字，或者一个公式。

经验与技巧：当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

CSS3 选择器学习

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<style> 
p:nth-child(3n+0)
{
	background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>

<p><b>注意:</b> Internet Explorer 8以及更早版本的浏览器不支持:nth-child()选择器.</p>

</body>
</html>

CSS3 选择器学习

:nth-last-child(n) 选择器

和前面的“

:nth-child(n)

”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

:first-of-type 选择器

匹配元素其父级是特定类型的第一个子元素，类似于“

:first-child

”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

区别：https://www.cnblogs.com/2050/p/3569509.html

<style> 
p:first-of-type
{
	background:#ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

</body>

CSS3 选择器学习

:last-of-type 选择器

:last-of-type

选择器和“

:first-of-type

”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

:nth-of-type(n) 选择器

:nth-of-type(n)

选择器和“

:nth-child(n)

”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。

主要区别：

nth-child：筛选的范围是当前父元素下面的所有的子元素

nth-of-type：筛选的范围是当前父元素下面同种类型的子元素

<div class="wrapper">
  <div>我是一个Div元素</div>
  <p>我是一个段落元素</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
  <p>我是一个段落</p>
</div>
------------------------------------------------
.wrapper > p:nth-of-type(2n){
  background: orange;
}

CSS3 选择器学习

:nth-last-of-type(n) 选择器

:nth-last-of-type(n)

”选择器和

:nth-of-type(n)

选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上面介绍的“:nth-last-child(n)”选择器一样。

<div class="wrapper">
  <p>我是第一个段落</p>
  <p>我是第二个段落</p>
  <p>我是第三个段落</p>
  <p>我是第四个段落</p>
  <p>我是第五个段落</p>
  <div>我是一个Div元素</div>
  <p>我是第六个段落</p>
  <p>我是第七个段落</p>
</div>
--------------------------------------------------------
.wrapper > p:nth-last-of-type(3){
  background: orange;
}

CSS3 选择器学习

:only-child 选择器

:only-child

选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

<div class="post">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
</div>
<div class="post">
  <p>我是一个段落</p>
</div>
--------------------------------------------------------------
.post p {
  background: green;
  color: #fff;
  padding: 10px;
}
.post p:only-child {
  background: orange;
}

CSS3 选择器学习

:only-of-type 选择器

:only-of-type

选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。

<div class="wrapper">
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <p>我是一个段落</p>
  <div>我是一个Div元素</div>
</div>
<div class="wrapper">
  <div>我是一个Div</div>
  <ul>
    <li>我是一个列表项</li>
  </ul>
  <p>我是一个段落</p>
</div>
--------------------------------------------------
.wrapper > div:only-of-type {
  background: orange;
}

CSS3 选择器学习

:enabled 选择器

:enabled

选择器匹配每个启用的的元素（主要用于表单元素）

设置所有type="text"的启用的输入元素的背景颜色
input[type="text"]:enabled
{
background:#ffff00;
}

:disabled 选择器

:disabled

选择器匹配每个禁用的的元素（主要用于表单元素）

设置所有type="text"的禁用的输入元素的背景颜色
input[type="text"]:disabled
{
background:#dddddd;
}

:checked 选择器

:checked

选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  rel="stylesheet" type="text/css">
</head> 
<body>
<form action="#">
  <div class="wrapper">
    <div class="box">
      <input type="radio" checked="checked"  id="boy" name="1" /><span></span>
    </div>
    <label for="boy">男</label>
  </div>
  
  <div class="wrapper">
    <div class="box">
      <input type="radio"  id="girl" name="1"  /><span></span>
    </div>
    <label for="girl">女</label>
  </div>
</form> 
</body>
</html>

form {
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
  margin: 30px auto;
  box-shadow:2px 4px 4px;
}
.wrapper {
  margin-bottom: 10px;
}
.box {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  position: relative;
  background: orange;
  vertical-align: middle;
  border-radius: 50%;
}
.box input {
  opacity: 0;
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
}

.box span { 
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  background: #fff;
  top: 50%;
  left:50%;
  margin: -5px 0  0 -5px;
  z-index:1;
}

input[type="radio"] + span {
  opacity: 0;

}
input[type="radio"]:checked + span {
  opacity: 1;
}

CSS3 选择器学习

::selection 选择器

::selection

选择器匹配元素中被用户选中或处于高亮状态的部分。

::selection

只可以应用于少数的CSS属性：color, background, cursor,和outline。

将选定的文本红色：

::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}

CSS3 选择器学习

:read-only 选择器

:read-only

选择器用于选取设置了 “readonly” 属性的元素。

表单元素可以设置 “readonly” 属性来定义元素只读。

input:read-only
{
	background-color: yellow;
}

:read-write 选择器

:read-write

选择器用于匹配可读及可写的元素（非只读状态）。

::before 和 ::after

::before和::afte

r这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用content 属性来指定要插入的内容，使用的场景最多的就是清除浮动。

案例练习：https://www.imooc.com/code/1882

CSS3 选择器学习

CSS3 选择器部分

继续阅读

Flex布局及属性

深入CSS vertical-align属性

给背景图片添加超链接

去除div的滚动条但是依然可以滚动的方法

modern-normalize vs normalize.css

弹性web UI的核心：媒体查询

105道CSS 面试知识点总结

CSS3 ---奔跑的小人

【CSS3】设置超链接样式超链接样式

分享几个常用的css网站前言一、CSS 参考网站二、CSS 参考网站三、CSS集合，自由调节动画参数，生成代码片段：五、通过做饭，练习 CSS 选择器六、送小青蛙回家，学习 flex 布局总结

2018年不想被web前端开发淘汰，你需要掌握哪些技术？

HTML CSS 的鼠标悬浮，点击的样式当鼠标悬浮时：a:hover当鼠标点击链接时：a:active

如何正确的去学习web前端开发？

谈谈css的伪类和伪元素

十大酷炫屌的图像悬停特效

vue3 transitionvue3 transition组件和vue2 transition组件