欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS基础知识02

程序员文章站 2022-05-08 11:09:26
...

伪类选择器

  • 动态伪类选择器
  • 目标伪类选择器
  • 语言伪类选择器
  • UI 元素状态伪类选择器
  • 结构伪类选择器
  • 否定伪类选择器

结构伪类选择器

选择器 描述
:first-child 选择作为父元素的第一个子元素
:last-child 选择属于其父元素最后一个子元素
:only-child 选择属于其父元素唯一子元素
:only-of-type 其父元素的唯一子元素,同时存在除目标子元素的其他元素也行
:nth-child(n) 选择属于其父元素第 n 个子元素(可以对奇偶数批量操作)
:nth-last-child(n) 选择属于其父元素倒数第 n 个子元素(也可以操作奇偶数)

需要过滤的

选择器 描述
:first-of-type 过滤不符合条件的标签 然后再进行排序第一个子元素
:last-of-type 指定最后一个排序后的标签
:nth-of-type(n) 排序后第几个子元素(可以对奇偶数批量操作)
:nth-last-of-type(n) 排序后倒数第几个子元素(也可以操作奇偶数)
  1. :first-child
  1. <ol>
  2. <li><a href="#">Link1</a></li>
  3. <li><a href="#">Link2</a></li>
  4. <li><a href="#">link3</a></li>
  5. </ol>
  1. /* :first-child 第一个子元素 */
  2. ol li:first-child {
  3. background-color: red;
  4. }

CSS基础知识02

2.:last-child

  1. <ol>
  2. <li><a href="#">Link1</a></li>
  3. <li><a href="#">Link2</a></li>
  4. <li><a href="#">link3</a></li>
  5. </ol>
  1. /* :last-child 最后一个子元素 */
  2. ol li:last-child {
  3. background-color: red;
  4. }

CSS基础知识02
3.:only-child

  1. <div>
  2. <p>这是一个段落</p>
  3. <p>这是一个段落</p>
  4. </div>
  5. <div>
  6. <p>这是一个段落</p>
  7. </div>
  1. /* 其父元素的唯一子元素 父元素里面有且只有一个目标子元素*/
  2. p:only-child {
  3. background-color: #f40;
  4. }

CSS基础知识02

4.:only-of-type

  1. <div class="wrapper">
  2. <p>我是一个段落</p>
  3. <p>我是一个段落</p>
  4. <div>我是一个div</div>
  5. </div>
  6. <div class="wrapper">
  7. <div>我是一个div</div>
  8. <p>我是一个段落</p>
  9. </div>
  1. /* only-of-type 其父元素的唯一子元素,还有除目标子元素的其他元素也行 (only-child更严格 )*/
  2. .wrapper p:only-of-type {
  3. background-color: red;
  4. }

CSS基础知识02

5.:nth-child(n)

  1. <ol>
  2. <li>item1</li>
  3. <li>item2</li>
  4. <li>item3</li>
  5. <li>item4</li>
  6. <li>item5</li>
  7. </ol>
  1. /* :nth-child(n) 第几个子元素
  2. 2n+1 = odd 奇数 2n = even 偶数
  3. */
  4. ol li:nth-child(2n + 1) {
  5. background-color: #ccffff;
  6. }
  7. ol li:nth-child(2n) {
  8. background-color: #ff6666;
  9. }

CSS基础知识02

  1. /* 第几个子元素 */
  2. ol li:nth-child(2) {
  3. background-color: #ff6666;
  4. }

CSS基础知识02

nth-last-child(n)用法类似,取的是倒数第几个子元素,同样可以奇偶数选择

6.:first-of-type

  1. <div class="wrapper">
  2. <div>我是一个块元素</div>
  3. <p>我是一个段落元素</p>
  4. <p>我是一个段落元素</p>
  5. <div>我是一个块元素</div>
  6. </div>
  1. /* :first-of-type 这里指定标签 div =>过滤不符合条件的标签 然后再进行排序 */
  2. .wrapper > div:first-of-type {
  3. background-color: red;
  4. }

CSS基础知识02

last-of-type 用法类似,指定最后一个排序后的标签

7.:nth-of-type(n)

  1. <div class="wrapper">
  2. <div>我是一个div</div>
  3. <p>我是一个段落</p>
  4. <div>我是一个div</div>
  5. <p>我是一个段落</p>
  6. <div>我是一个div</div>
  7. <p>我是一个段落</p>
  8. </div>
  1. /* :nth-child(n) 排序后第几个子元素
  2. 2n+1 = odd 奇数 2n = even 偶数
  3. */
  4. .wrapper div:nth-of-type(2n + 1) {
  5. background-color: red;
  6. }

CSS基础知识02

  1. /* 指定的容器div - 排序后的第三个 */
  2. .wrapper div:nth-of-type(3) {
  3. background-color: red;
  4. }

CSS基础知识02

:nth-last-of-type(n)用法类似,排序后倒数第几个子元素(也可以操作奇偶数)

nth-child(n)和 nth-of-type(n)的区别

子元素标签统一的 - nth-child(n)
子元素标签不统一 - nth-of-type(n)

UI 元素状态伪类选择器

1.:disabled

控制不可点击的 input 的样式

  1. <form action="#">
  2. <input type="text" name="name" placeholder="我是可用输入框" />
  3. <input type="text" name="name" placeholder="我是不可用输入框" disabled />
  4. </form>
  1. input:disabled {
  2. background-color: #ccffff;
  3. /* 文本框颜色 */
  4. padding: 10px;
  5. border: 1px solid #cccccc;
  6. border-radius: 3px;
  7. color: #666699;
  8. /* 输入文本颜色 */
  9. }

CSS基础知识02

2.:enabled
可以点击的 input

  1. <form action="#">
  2. <input type="text" name="name" placeholder="可用输入框" />
  3. <input type="text" name="name" placeholder="禁用输入框" disabled="disabled" />
  4. </form>
  1. input:enabled {
  2. background-color: #ccffff;
  3. padding: 10px;
  4. border: 1px solid #cccccc;
  5. border-radius: 3px;
  6. color: #666699;
  7. }

CSS基础知识02

3.:checked

选择所有被选中状态下的 input 元素(单选框、多选框)

  1. <form action="#">
  2. <h3>gender</h3>
  3. <input type="radio" name="sex" id="man" value="man" checked />
  4. <label for="man">man</label>
  5. <input type="radio" name="sex" id="woman" value="woman" />
  6. <label for="woman">woman</label>
  7. </form>
  1. input:checked + label {
  2. color: red;
  3. }

CSS基础知识02

动态伪类选择器

1.:focus

选择获得焦点的 input 元素

  1. <p>在文本框中点击,您会看到黄色的背景:</p>
  2. <form>
  3. First name: <input type="text" name="firstname" /><br />
  4. Last name: <input type="text" name="lastname" />
  5. </form>
  1. input:focus {
  2. background-color: yellow;
  3. }

2.:hover

<a href="#">淘,我喜欢</a>

  1. a:hover {
  2. background-color: #f40;
  3. }

CSS基础知识02

字体图标

<link rel="stylesheet" href="iconfont.css" />

  1. <!-- iconfont-css
  2. 阿里巴巴图标字体库 iconfont
  3. 调用时候 iconfont + 小图标对应的类名
  4. -->
  5. <span class="iconfont icon-column-4"></span>
  6. <span class="iconfont icon-arrow-up-circle"></span>
  1. .icon-arrow-up-circle {
  2. font-size: 30px;
  3. color: #ff6666;
  4. }

CSS基础知识02

盒子组成(举例实现一个简单的导航)

  • content、padding、border、margin
  1. <ul class="nav">
  2. <li class="list-item"><a href="#">天猫</a></li>
  3. <li class="list-item"><a href="#">聚划算</a></li>
  4. <li class="list-item"><a href="#">天猫超市</a></li>
  5. </ul>
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. color: #424242;
  5. font-family: Arial, Helvetica, sans-serif;
  6. }
  7. a {
  8. text-decoration: none;
  9. }
  10. .nav::after {
  11. content: "";
  12. display: inline-block;
  13. clear: both;
  14. }
  15. .nav {
  16. list-style: none;
  17. }
  18. .nav .list-item {
  19. float: left;
  20. margin: 0 10px;
  21. height: 30px;
  22. line-height: 30px;
  23. }
  24. .nav .list-item a {
  25. padding: 0 5px;
  26. color: #f40;
  27. font-weight: bold;
  28. height: 30px;
  29. display: inline-block;
  30. border-radius: 15px;
  31. }
  32. .nav .list-item a:hover {
  33. background-color: #f40;
  34. color: #fff;
  35. }

CSS基础知识02

盒模型

box-sizing:content-box 盒子大小为 width+padding+border(以前默认的)
box-sizing:boder-box 盒子大小为 width

  1. <!-- 122*122 -->
  2. <div></div>
  1. div {
  2. width: 100px;
  3. height: 100px;
  4. border: 1px solid black;
  5. margin: 10px;
  6. padding: 10px;
  7. background-color: #f40;
  8. box-sizing: content-box;
  9. /* 默认 */
  10. }

如果box-sizing: border-box;那么盒子大小为100*100

常用单位

绝对单位: px,1in = 96px
相对单位: em,rem,vh,vw

  • em

em 是一个相对单位,就是当前元素(font-size)1 个文字的大小,如果当前元素没有设置大小,则会按照父元素的 1 个文字大小,通常用于文本缩进

  1. <p>
  2. em 是一个相对单位,就是当前元素(font-size)1
  3. 个文字的大小,如果当前元素没有设置大小,则会按照父元素的 1
  4. 个文字大小,通常用于文本缩进
  5. </p>
  1. p {
  2. font-size: 16px;
  3. text-indent: 2em;
  4. }
  • rem

rem 永远和 font-size 绑定

  1. <p>rem 是一个相对单位</p>
  2. <div></div>
  3. <!-- 80*80 -->
  1. p {
  2. font-size: 16px;
  3. }
  4. div {
  5. width: 5rem;
  6. height: 5rem;
  7. background-color: red;
  8. }