CSS选择器那点事

时间  2019-11-08
标签 css 选择器 那点 栏目 CSS 繁體版
原文   原文链接

MDN参考连接spa

CSS 选择器规定了 CSS 规则会应用到哪些元素上。3d

CSS选择器分为如下四大类：code

- 基本选择器

- 组合选择器

- 伪类

- 伪元素

基本选择器

Type（类型）选择器

也能够称之为元素选择器，这种基本选择器会选择全部匹配给定元素名的元素。blog

语法：elename（元素名称）排序

例子：span 将会选择全部的 <span> 元素。rem

代码：文档

HTML:get

<span>Here is a span with some text.</span>
<p>Here is a p with some text.</p>
<span>Here is a span with more text.</span>

CSS:input

span {
  color: red;
}

REUSLT:it

image

Class（类）选择器

这种基本选择器会基于类属性的值来选择元素。一个元素的class值，能够有一个或多个（由空格隔开）。

语法： .classname（类名称）

例子： .index 会匹配全部包含 index 类的元素 (由相似于class="index"这样的属性定义的).

HTML:

<span class="index">Here is a span with some text.</span>
<p class="text">Here is a p with some text.</p>
<span class="index text">Here is a span with more text.</span>

CSS:

.index{
  color:red;
}
.text{
  font-size:24px;
}

REUSLT:

注意下面的那个span，因为class有两个，因此会将两个class的样式都应用上去

image

ID选择器

这种基本选择器会选择全部id属性与之匹配的元素。须要注意的是一个文档中每一个id都应该是惟一的。

语法：#idname（id名称）

例子：#toc 将会匹配全部id属性为 toc 的元素 (相似于这样的定义 id="toc").

HTML:

<span id="toc">Here is a span with some text.</span>
<p>Here is a p with some text.</p>

CSS:

#toc{
  color:red;
}

REUSLT:

image

通用选择器

这个基本选择器选择全部节点。它也经常和一个名词空间配合使用，用来选择该空间下的全部元素。

语法： ns| |

例子：* （通配符）将会选择全部元素。

HTML:

<span class="index">Here is a span with some text.</span>
<p class="text">Here is a p with some text.</p>
<span class="index text">Here is a span with more text.</span>

CSS:

* {
  color:red;
}

REUSLT:

image

属性选择器

这个基本的选择器根据元素的属性来进行选择。

语法：[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

例子：[autoplay] 将会选择全部具备 autoplay 属性的元素（不论这个属性的值是什么）

HTML：

<ul>
  <li><a href="#">值等于#</a></li>
  <li><a href="#internal">值以#开头</a></li>
  <li><a href="http://example.com">值包含example</a></li>
  <li><a href="#InSensitive">值忽略大小写</a></li>
  <li><a href="http://example.org">值以org结尾</a></li>
</ul>

CSS:

li{
  margin-bottom:10px;
}
a {
  color: blue;  
}

/* 存在href属性而且属性值等于"#"的<a> 元素, 以下选择 */
a[href="#"] {
  color: black;
}

/* 存在href属性而且属性值以"#"开始的<a> 元素, 以下选择 */
a[href^="#"] {
  background-color: gold;
}

/* 存在href属性而且属性值包含"example"的<a> 元素, 以下选择*/
a[href*="example"] {
  background-color: silver;
}

/* 存在href属性而且属性值包含"insensitive"的<a> 元素,
   i 表示忽略"insensitive"的大小写, 以下选择 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 存在href属性而且属性值结尾是".org"的<a> 元素, 以下选择 */
a[href$=".org"] {
  color: red;
}

RESULT:

image

组合选择器

紧邻兄弟选择器

'+' 操做符选择相邻元素，即第二个节点紧邻着第一个节点，而且拥有共同的父节点。
语法: A + B
例子: ul + li 会匹配任何 <ul> 元素后紧邻的 <li> 元素。

HTML:

<ul>
  <li><a href="#">值等于#</a></li>
  <li><a href="#internal">值以#开头</a></li>
  <li><a href="http://example.com">值包含example</a></li>
  <li><a href="#InSensitive">值忽略大小写</a></li>
  <li><a href="http://example.org">值以org结尾</a></li>
</ul>
<li>
  我是弟弟
</li>  
<li>
  另外一个弟弟
</li>

CSS:

ul + li{
  color:red;
}

RESULT:

image

通常兄弟选择器

'~' 操做符选择兄弟元素，也就是说，第二个节点在第一个节点后面的任意位置，而且这俩节点的父节点相同。
语法: A ~ B
例子: p ~ span 将会匹配同一父元素下，<p> 元素后的全部 <span> 元素。

HTML:

<ul>
  <li><a href="#">值等于#</a></li>
  <li><a href="#internal">值以#开头</a></li>
  <li><a href="http://example.com">值包含example</a></li>
  <li><a href="#InSensitive">值忽略大小写</a></li>
  <li><a href="http://example.org">值以org结尾</a></li>
</ul>
<li>
  我是弟弟
</li>  
<li>
  另外一个弟弟
</li>

CSS:

ul ~ li{
  color:red;
}

RESULT:

image

子选择器

'>' 操做符选择第一个元素的直接子节点。
语法: A > B
例子: div > span 将会匹配直接嵌套在 <div> 元素内的全部 <span> 元素。

HTML:

<div>
  <span>我是大儿子</span>  
  <span>我是二儿子</span> 
  <span>我是三儿子</span>  
  <footer>
    <span>我是四儿子</span>
  </footer>
</div>

CSS:

div > span{
  color:red;
}

RESULT:

image

后代选择器

' ' (空格) 操做符将选择第一个元素的子代节点。
语法: A B
例子: div span 将匹配 <div> 元素内全部的 <span> 元素。

HTML:

<div>
  <span>我是大儿子</span>  
  <span>我是二儿子</span> 
  <span>我是三儿子</span>  
  <footer>
    <span>我是四儿子</span>
  </footer>
</div>

CSS:

div span{
  color:red;
}

RESULT:

image

伪类

伪类 容许基于未包含在文档树中的状态信息来选择元素。

伪类选择器包括试验性质的大概有60来个，在这里介绍平常使用较多的如下几种

:link、:visited、:hover、:active、:focus、:first-child、:last-child、:nth-child()、:nth-last-child()

例子:link、:visited、:hover、:active

HTML:

<body>
   <h1>:active CSS选择器示例</h1>
   <p> <a href="#1">未访问</a>.</p>
   <p><a href="#2">已访问</a>.</p>
   <p><a href="#3">鼠标悬停</a>.</p>
   <p><a href="#4">激活连接（鼠标点击下去未抬起时的状态）</a>.</p>
</body>

CSS:

a:link { color: blue } /* 未访问连接 */
a:visited { color: purple } /* 已访问连接 */
a:hover { color: red } /* 用户鼠标悬停 */
a:active { color: lime } /* 激活连接 */

RESULT:

image
image

例子:focus

:focus表示得到焦点的元素（如表单输入）。当用户点击或触摸元素或经过键盘的 “tab” 键选择它时会被触发。

HTML:

<input type="text" value="text"/>

CSS:

input:focus {
  color: red;
}

RESULT:

image

例子:first-child、:last-child

:first-child 表示在一组兄弟元素中的第一个元素。

:last-child 表示在一组兄弟元素中的倒数第一个元素。

HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS:

ul li:first-child {
  color: red;
}
ul li:last-child {
  color: blue;
}

RESULT:

image

例子:nth-child()、nth-last-child()

:nth-child(an+b) 这个 CSS 伪类首先找到全部当前元素的兄弟元素，而后按照位置前后顺序从1开始排序，选择的结果为CSS伪类:nth-child括号中表达式（an+b）匹配到的元素集合

:nth-last-child(an+b)与:nth-child(an+b)查找顺序恰好相反

表达式语法例子：

tr:nth-child(2n+1)

表示HTML表格中的奇数行。

tr:nth-child(odd)

表示HTML表格中的奇数行。

tr:nth-child(2n)

表示HTML表格中的偶数行。

tr:nth-child(even)

表示HTML表格中的偶数行。

span:nth-child(0n+1)

表示子元素中第一个且为span的元素，与 :first-child 选择器做用相同。

span:nth-child(1)

表示父元素中子元素为第一的而且名字为span的标签被选中

span:nth-child(-n+3)

匹配前三个子元素中的span元素。

HTML:

<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>
  <li>9</li>
  <li>10</li>
</ul>

CSS:

/* 和nth-child(odd)相同 */
li:nth-child(2n+1){
  color:red;
}

/* 和nth-child(even)相同 */
li:nth-child(2n){
  color:block;
}

li:nth-child(-n+3){
  font-size:40px;
}

li:nth-child(4){
  background:#aaa;
}

RESULT:

image

:nth-last-child与之顺序恰好相反，是从倒数第一开始算起的

伪元素

伪元素 表示全部未被包含在HTML的实体。

伪元素包含实验性质在内大概有30种，这里介绍经常使用的几种::after (:after)、::before (:before)、::first-letter (:first-letter)、::first-line (:first-line)、::placeholder、::selection

例子 ::after (:after)、::before (:before)

HTML:

<q>一些引用</q>, 他说, <q>比没有好。</q>.

CSS:

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

RESULT:

image

例子 ::first-letter (:first-letter)、::first-line (:first-line)

HTML:

<p>11111111111111111111222222222222</p>

CSS:

p{
  word-break:break-all;
  width:150px;
}
p::first-letter {  /* 使用:first来兼容IE8- */
  color: red;   
}
p::first-line {  /* 使用:first来兼容IE8- */   
  font-size: 40px;
}

RESULT:

image

例子 ::selection、::placeholder

HTML:

<p>选中后背景颜色变灰</p>
<input placeholder="我是红色的！">

CSS:

p::selection {
  background-color: #ccc;
}
input::placeholder {
  color: red;
}

RESULT:

image

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程