写点什么

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
用户头像

U+2647

关注

evolving code monkey 2018.11.05 加入

https://zdran.com/

评论

发布
暂无评论
CSS 学习笔记(一) 选择器