百度前端技术学院（四）背景边框列表链接和更复杂的选择器

 

一、CSS背景注意事项

1. background-repeat：repeat、no-repeat、repeat-x、repeat-y、inherit

2. background-position：设置背景图像位置

（1）关键字

background-position：top/bottom/center     left/right/center

                                                 垂直位置                水平位置

如果仅规定一个值，第二个值默认为center

（2）百分数

background-position：x%               y%

                                   垂直位置        水平位置

百分数值同时应用于元素和对象，如果仅规定一个值，第二个值默认为50%

（3）长度值：表示位置偏移量

background-position：apx           bpx

3. background-attachment：设置背景是否会随内容一起滚动

可选值：scroll、fixed、inherit

二、css边框

border-style：none、dotted、solid、dashed（虚线）。。。

可以对各个边分开设置

三、CSS选择器

1. 相邻选择器“+”：

.news-list li+li{
  //给挨着li的下一个li设置CSS属性
}

2. 兄弟选择器“~”：

.news-list  li~li{
    // Li后面的所有li进行设置
}

3. 属性选择器：

<li class="news-item"></li>
<li lang="zh"></li>
<li data=""></li>

.news-list li[class="news-item"]{
  //属性值等于此值的元素
}

.选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

4. 后代选择器：

 

5. 伪类选择器  参考文章

常用伪类：

：first-child  /  ：last-child

：nth-child(num|odd|even):分别对第num行、奇数行、偶数行设置属性

：focus、：active、：hover、：visited

伪元素：

::after、::before、::first-letter、::first-line、::selection、::backdrop