CSS选择器那点事

头像
波罗丁的菠萝
    阅读 8 分钟
    1

    MDN参考链接

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

    CSS选择器分为以下四大类：

    - 基本选择器

    - 组合选择器

    - 伪类

    - 伪元素

    基本选择器

    Type（类型）选择器

    也可以称之为元素选择器，这种基本选择器会选择所有匹配给定元素名的元素。

    语法：elename（元素名称）

    例子：span 将会选择所有的 <span> 元素。

    代码：

    HTML:

    <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:

    span {
  color: red;
}

    REUSLT:

    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

    csscss3css技巧css选择器
    波罗丁的菠萝
    886 声望14 粉丝

    深林人不知，明月来相照

    « 上一篇
    css居中那点事
    下一篇 »
    JavaScript两个不同类型之间是如何使用==进行比较的？

    引用和评论

    推荐阅读
    头像
    保持数据流的单向性

    波罗丁的菠萝阅读 1.1k

    头像
    CSS团队协作规范

    寒青赞 36阅读 3.9k

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.1k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    0 条评论
    得票最新