全部标签
写点什么
学习MySQL开源云计算行业资讯算法Python人工智能区块链Linux前端个人成长面试架构师编程企业动态新基建敏捷安全读书笔记高效工作团队管理创业活动专区生涯规划知识管理运维产品经理 查看更多

CSS 学习笔记 (一) 选择器

用户头像
U+2647
关注
发布于: 2021 年 04 月 13 日

一、选择器

元素选择器

元素选择器是最基本的选择器。也是最简单的选择器。可以选择某个或者某些标签


h1, h2 {  color: red;   background: gray;}
复制代码


上面的 CSS 会将所有的 h1 和 h2 标签变成红色,背景变成灰色。

通配选择器

可以选择所有元素，或者说是整个文档


* {color: red}
复制代码


上面的选择器可以让整个文档变成红色

类选择器

选择一类元素，必须在标签上指定 class 的属性值。


*.warning {font-weight: bold}
复制代码


这段 CSS 会选中下面 html 代码中的 p 标签和 text 标签：


<div>  <p class="warning">被选中</p>  <text class="warning">被选中</text></div>
复制代码


注意，这里的选择器前面包含了一个星号（*）这里的星号是通配符的含义，即任意元素的 class 属性中如果包含 warning 即会被选中。由于星号是通配符，所以也可省略掉，像下面这样：


.warning {font-weight: bold}
复制代码


效果是一样的。


你也可以指定某个特定的标签，例如：


p.warning {font-weight: bold}
复制代码


这段 CSS 只会选中 p 标签，而不会选中 text 标签。不论 text 标签的 class 属性是否包含 warning

多类选择器

class 属性可以包含多个，如果需要选中某个含有两个 class 的标签，可以使用多类选择器。


.warning.uegent {background: silver;}
复制代码


上面这段 CSS 会选中即含有 warning 又含有 uegent 的标签。即下面的 h3 标签。


<div>  <h1 class = "warning">多类选择器</h1>  <h2 class = "uegent">多类选择器</h2>  <h3 class = "warning uegent">被选中</h3></div>
复制代码


这两个词的顺序无关紧要，也可以写成 <h3 class = "uegent warning">。

ID 选择器

选中某个 id 值得标签


#first-h1 {color: red}
复制代码


上面这段 CSS 会选中 下面的 h1 标签


<div>  <h1 id = "first-h1">被选中</h1>  <h2 class = "uegent">ID选择器</h2>  <h3 class = "warning uegent">ID选择器</h3></div>
复制代码


注意： 在同一个 html 页面中所有元素的 id 是不可重复的，但是 class 是可以重复的。

属性选择器

如果希望选择有某个属性的元素，而不关心具体的属性值。可以使用属性选择器。

简单属性选择器

h1[class] {color: red}
复制代码


上面的选择器可以选择所有含有 class 的 h1 标签。即下面第二个 h1 标签


<div>  <h1 id = "first-h1">简单属性选择器</h1>  <h1 class = "warning uegent">被选中</h1></div>
复制代码


当然也可以使用通配符。下面的 CSS 会选中所有含有 class 属性的标签。


*[class] {color: red}
复制代码


还可以使用多个属性。下面的 CSS 会选中所有含有 id 和 class 的标签。必须是同时含有两个属性


*[id][class] {color: red}
复制代码

属性值选择器

可以根据某个属性的具体值来选择标签。


h1[id = "first-h1"] {color: red}
复制代码


上面的 CSS 表示，选择 id = first-h1 的 h1 标签。即下面的第一个 h1 标签


<div>  <h1 id = "first-h1">被选中</h1>  <h1 class = "warning uegent">简单属性选择器</h1></div>
复制代码


当然你也可以多个属性的值一起选择，比如:


a[id = "first-link"][href = "http://zdran.com"] {color: red}
复制代码


注意： CSS 里的值必须是完全匹配。比如：


*[class = "uegent"]
复制代码


上面这段 CSS 只能选中 h2 标签，如果需要选择 h3 则需要写成：


*[class = "warning uegent"] {color: red}
复制代码


属性的值必须是完全一样，才会选中标签


<div>  <h1 id = "first-h1">属性值选择器</h1>  <h2 class = "uegent">第一次被选中</h2>  <h3 class = "warning uegent">第二次被选中</h3></div>
复制代码

部分属性值选择器

上面提到的属性值选择器要求完全匹配，这里的部分属性值选择器要求部分值匹配即可。


p[class ~= "uegent"] {color: red}
复制代码


这段 CSS 会选中下面的 html 代码中的第二个和第三个标签。因为这两个标签的 class 属性值中都含有"uegent"


<div>  <p id = "first-p">部分属性值选择器</p>  <p class = "uegent">被选中</p>  <p class = "warning uegent">被选中</p></div>
复制代码

子串匹配选择器

类似于正则表达式


*[class^="start"]    // 选中 class 的值以 start 开头的标签*[class$="end"]    // 选中 class 的值以 end 结尾的标签*[class*="mid"]    // 选中 class 的值中包含 mid 的标签
复制代码

特定属性选择器

这个选择器应该是最常见的选择器。以下面的 CSS 为例：


*[lang|="en"]
复制代码


他会选中 lang 属性的值为 "en" 或者以 "en-"(注意：后面有个短线) 开头的元素。所以会选中下面的前两个 p 标签


<div>  <p lang = "en">被选中</p>  <p lang = "en-zh"> 被选中</p>  <p class = "zh">特定属性选择器</p></div>
复制代码


PS:如果你不理解文档树结构，建议先了解下文档树结构再往下看

后代选择器

也称为包含选择器，或者上下文选择器，它可以选中某个标签下的某些标签。比如，选择 div 下的 p 标签，可以这样写：


div p {color: red}
复制代码


上面的 CSS 会选中第一个 p 标签，而不会选中第二个 p 标签


<div>  <p lang = "en">被选中</p></div><p lang = "en-zh">后代选择器</p>
复制代码


当然并不局限于两个元素，也可以写成下面这样


html body div p span {color: red}
复制代码

子元素选择器

选中某个元素的子元素，与后代选择器的区别是，后代选择器可以选中某个元素的子元素，某个元素的子元素的子元素（子孙元素），而子元素选择器只能选择某个元素的子元素。


div > span {color: red}
复制代码


上面的元素可以选中 div 下的 span 标签，即第一个 span 标签，第二个则无效，而使用后代选择器可以选中两个 span 标签。


<div>  <span>被选中</span>  <p>子元素<span>不被选中</span>选择器</p></div>
复制代码


子元素选择器只选择一级，而后代是所有的后代，以及后代的后代

相邻兄弟选择器

选中紧接在一个元素后的元素。


div + p {color: red}
复制代码


上面这段 CSS 可以选中第二个 p 标签，即 div 后的元素。


<div>  <p lang = "en">后代选择器</p></div><p lang = "en-zh">被选中</p><div>  <p lang = "en">不被选中</p></div>
复制代码


相邻兄弟选择器可以和子元素选择器一起使用。例如：


html > body > div + p {color: red}
复制代码

伪类选择器

链接伪类

伪类选择器可以选择某些元素处于特定状态的元素。比如，可以为已经被点击过的 a 标签添加一个 CSS。


a:visited {color: red}
复制代码


上面的 CSS 会应用到已经被访问过的 a 标签。对应的，还有一个，选择没有被点击的超链接。


a:link {color: black}
复制代码


上面的 CSS 会应用到没有被点击过的超链接上。注意，上面的 CSS 只会选中带有 href 属性的 a 标签。


<a href="http://zdran.com">被选中</a><a name ="first">不会被选中</a>
复制代码


当然也可以和其他选择器配合使用，比如:


#my_link:visited {color:red}
复制代码

动态伪类

a:focues {color: red}
复制代码


选中获取到输入焦点的 a 标签。


a:hover {color: red}
复制代码


选中鼠标指针悬停的 a 标签


a:active {color:red}
复制代码


选中鼠标点击的元素。PS 有兴趣的同学可以试试将这几个伪类同时用到同一个 a 标签上，看看会发生什么神奇的效果。

结构伪类

li:not(.first-item) {color: red}
复制代码


如果 class 属性中含有 first-item 则不被选中。例如下面的第一个 li 标签将不被选中


<ul>    <li class="first-item">不被选中</li>    <li>被选中</li>    <li>被选中</li></ul>
复制代码


li:first-child {color: red}
复制代码


选中第一个元素。


<ul>    <li>被选中</li>    <li>不被选中</li>    <li>不被选中</li></ul>
复制代码


同样还有选中最后一个元素的伪类


li:last-child {color:red}
复制代码


还有一个可以根据一个参数来选择第几个元素。


ol :nth-child(2n) {color: red}
复制代码


上面的 CSS 可以选中第 2n 个元素，即第 2、4、6、8、10... 位置的元素。如果想选奇数位置的元素，可以设置为：


ol :nth-child(2n+1) {color: red}
复制代码


如果想只选择第几个元素，可以直接写成具体的值，比如只选择第 5 个元素，可以设置为：


ol :nth-child(5) {color: red}
复制代码


nth-child 可以接收一个 an+b 的参数，可以根据 a 和 b 的值计算具体的位置。

表单伪类

选中 任意被勾选/选中的 radio(单选按钮),checkbox(复选框),或者 option(select 中的一项)


input:checked + label {color: red}
复制代码


上面的 CSS 会选中下面被勾选的选项


<div>  <input type="checkbox">  <label >勾选后，被 CSS 选中</label></div>
复制代码


如果是 radio 可以这么写：


input[type="radio"]:checked {color:red}
复制代码


选中下面的一个勾选后的选项


<div>  <input type="radio" name="my-input" id="yes">  <label for="yes">Yes</label>
  <input type="radio" name="my-input" id="no">  <label for="no">No</label></div>
复制代码


valid 可以选中校验结果正确的元素。比如：


input[type=email]:valid {color:green}
复制代码


上面的 CSS 可以在输入框中输入正确的 email 的时候被选中。


<input type="email"/>
复制代码


当然，还可以选中校验结果不正确的元素。


input[type=email]:invalid  {color: red}
复制代码

伪元素选择器

伪元素选择器可以在文档中插入不存在的元素，从而达到某种效果。

设置首字母的样式。

p:first-letter {font-size: 5em}
复制代码


上面的 CSS 可以设置所有 p 标签的首字母的样式。当然也可以设置首行的样式。


p:first-line {font-size: 5em}
复制代码

在元素前后插入内容

h1:before {content: "hello"}
复制代码


在 h1 标签之前插入"hello" 字符串。同样，也可以在某个元素后插入内容。


h1:after {content: "hello"}
复制代码


当然，伪类与伪元素不止上面说的这些，还有一些其他的选择器，如果需要了解更多，可以看一下参考文章里的博客

参考文章

划线
评论
复制
发布于: 2021 年 04 月 13 日阅读数: 12

版权声明: 本文为 InfoQ 作者【U+2647】的原创文章。

原文链接:【http://xie.infoq.cn/article/1612dc6316f6582abe2a59204】。文章转载请联系作者。

CSSCSS小技巧四月日更
用户头像

U+2647

关注

evolving code monkey 2018.11.05 加入

https://zdran.com/

评论

发布
暂无评论
Copyright © 2021, Geekbang Technology Ltd. All rights reserved. 极客邦控股（北京）有限公司 | 京 ICP 备 16027448 号 - 5京公网安备京公网安备 11010502039052号
CSS 学习笔记(一) 选择器