css选择器

发表于 | 分类于

一、选择器

（一）基本选择器

  1. 标签（元素）选择器：通过标签名获取元素
  2. 类选择器：通过.类名获取元素
  3. id选择器：通过#id名获取元素
  4. 通配符选择器：通过*获取到页面中所有元素
  5. 群组选择器E1,E2：通过逗号同时获取到多个选择器，即获取E1和E2，以此类推。

(二）层次选择器

  1. 后代选择器E1 E2:表示获取到的E2元素是E1元素的后代
  2. 子代选择器E1>E2:表示获取到的E2元素是E1元素的子代
  3. 相邻兄弟选择器 E1+E2:表示获取的E2元素紧跟在E1元素的后面
  4. 兄弟选择器E1~E2:表示获取E1后面的所有E2元素

(三) 动态伪类选择器

  1. :link 锚链接被访问前添加的样式
  2. :visited 锚链接被访问后添加的样式
  3. :hover 鼠标悬停在任意元素上添加的样式
  4. :active 鼠标点击任意元素时添加的样式
  5. :focus 表单元素被聚焦时添加的样式

(四)目标伪类选择器

URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)

​ E:target 获取到E元素里面被作为当前目标的元素

(五)ui状态伪类选择器

  1. :enabled 可用的表单元素添加样式
  2. :disabled 可用的表单元素添加样式
  3. :checked 选中的表单选框添加样式

(六)结构伪类选择器

选择器 5555555555555555555 描述
E:first-child 获取到其父元素的第一个子元素，且要满足为E元素
E:last-child 获取到其父元素的最后一个子元素，且要满足为E元素
E:nth-child(n) 获取到其父元素的第n个子元素，且要满足为E元素。从1开始计数。
E:nth-last-child(n) 获取到其父元素的倒数第n个子元素，且要满足为E元素。从1开始计数。 * n的取值： 具体数值 odd（2n-1）第奇数个孩子 even（2n）第偶数个孩子 -n +a 获取到父元素第一个到第a个孩子
E:first-of-type 获取到其父元素的第一个E类型的子元素
E:last-of-type 获取到其父元素的最后一个E类型的子元素
E:nth-of-type(n) 获取到其父元素的第n个E类型的子元素
E:nth-last-of-type(n) 获取到其父元素的倒数第n个E类型的子元素
E:empty 空文本的E元素（不能有空格）添加样式
E:only-child 获取到其父元素唯一的一个子元素,且要满足为E元素
E:only-of-type 获取到父元素的唯一一个E类型的孩子

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。

:first-of-type 匹配的是该类型的第一个，类型是指什么呢，就是冒号前面匹配到的东西，比如 p:first-of-type，就是指所有p元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。

(七)否定伪类选择器

​ F:not(E) 除了E条件以外的所有F元素

(八)伪元素选择器

​ 1.E::before{content:””} 给E元素添加第一个子元素（行内元素）
2.E::after{content:””} 给E元素添加最后一个子元素
3.E::first-letter 给E元素的第一个文本添加样式

​ 4.E::first-line 给E元素的第行文本添加样式
5.E::selection E元素的内容被选中时添加样式
兼容火狐::-moz-selection

(九) 属性选择器

​ 1. E[attr] 拥有该attr属性的E元素被获取到

2. E[attr="val"] 拥有该attr属性，且属性值等于val值的E元素被获取到
3. E[attr*="val"] 拥有该attr属性，且属性值包含val值的E元素被获取到
4. E[attr^="val"] 拥有该attr属性，且属性值以val值开头的E元素被获取到
5. E[attr$="val"] 拥有该attr属性，且属性值以val值结尾的E元素被获取到

(十) 语言伪类选择器 q:lang(no){quotes:””””;}

​ * q[lang=”no”]在内容两侧会生成引号，若想改变符号，通过如上的语言伪类选择器

二、文本属性

1.文本阴影

​ text-shadow:x-offset y-offset blur color[,…];

* x-offset 水平偏移，往右为正
* y-offset 垂直偏移，往下为正
* blur 模糊区域，不能取负值

2.文本溢出 text-overflow

​ * 属性值： clip默认不处理 ellipsis 以省略号的形式出现

* 配合三个属性使用：width、white-space:nowrap、overflow:hidden

3.单词换行 word-wrap:break-word;

4.自定义字体 @font-face{font-family起名字;src:url(“字体路径”)}

5.字体图标

使用服务端字体矢量图

http://www.iconfont.cn

打开链接选择图片下载后打开CSS文件复制按以下方法使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
        @font-face {font-family: "lemon";
          src: url('../iconfont/iconfont.eot?t=1475997645'); /* IE9*/
          src: url('../iconfont/iconfont.eot?t=1475997645#iefix') format('embedded-opentype'), /* IE6-IE8 */
          url('../iconfont/iconfont.woff?t=1475997645') format('woff'), /* chrome, firefox */
          url('../iconfont/iconfont.ttf?t=1475997645') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
          url('../iconfont/iconfont.svg?t=1475997645#iconfont') format('svg'); /* iOS 4.1- */
        }
        .icon {
          font-family:"lemon" !important;
          font-style:normal;
          font-size:100px;
        }
        .fangzi:before { content: "\e667"; }
        .xiaoche:before { content: "\e668"; }
        .meinv:before { content: "\e66a"; }
    </style>

<div>我有一个大<i class="icon fangzi"></i>,我有一辆大<i class="icon xiaoche"></i>,我还有一个<i class="icon meinv"></i></div>

三、背景属性

1.背景图片的尺寸 background-size

​ 取值：

    * 数值: 水平 垂直; 绝大部分情况会出现扭曲变形。
    * cover 背景图片完全覆盖容器,绝大部分会出现背景图丢失一部分的情况
    * contain 容器完全包含背景图片,绝大部分会出现容器留白现象
* 等比缩放：cover、contain
* 应用：一般轮播图采用背景图片｛background-size:cover;background-position:center center;｝

2.背景图片的定位区域 background-origin

​ 属性值：

* 默认从padding开始摆放 padding-box
* 从content开始  content-box（说明此时background-position:0 0;在content内容的左上角。）
* border-box

3.背景图片的裁剪（最终显示区域）background-clip

​ * border-box 从边框部分开始裁剪

* padding-box 从padding部分开始裁剪
* content-box 从content部分开始裁剪