CSS 学习笔记(一) 选择器 | U+2647's blog

阅读 3
收藏
2019-11-12
原文链接:zdran.com

一、选择器

元素选择器

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

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"}

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

参考文章

版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
本文链接:zdran.com/20191111.ht…

评论