CSS3选择器和相关属性

1CSS3选择器

1.1基本选择器

1.1.1通配符选择器

1.1.2标签选择器

1.1.3类选择器

1.1.4 id选择器

1.1.5群组选择器

1.2层次选择器

1.2.1后代选择器

1.2.2子代选择器“>”

1.2.3相邻兄弟选择器“+”

只会获取该选择器后面紧邻的一个选择器。

.yeye .baba+p{ }

<div class=”yeye”>

<div class=”baba”>

<p></p>

<p></p>

</div>

</div>

1.2.4兄弟选择器“~”

通过~获取到该选择器后面满足条件的所有选择器，如上述代码中，两个p元素都会被获取到。

1.3动态伪类选择器

1.3.1 :hover

1.3.2 :link

1.3.3 :visited

1.3.4 :active

1.3.5 :focus

  为input元素在浏览器中的输入框获取到焦点时添加的样式。

Input:focus{outline:none; }   该声明为取消高亮，如input输入栏获取到焦点时，会变成蓝色，该声明可以取消。

1.4目标伪类选择器

<a href=”#shou”></a>

<p id=”shou”></p>

P:target{color:red;}

在浏览器中点击a后，跳转指向p，p作为target字体颜色变为红色。

E:target 给此时作为目标的E元素添加样式，即跳转到谁，E就是谁，E就是target。

1.5语言伪类选择器

给元素加上lang=”no”声明，相当于给元素中间的内容加上双引号。

1.6UI元素状态伪类选择器

UI元素就是input元素。

<input type=”text” disabled(表示被禁用)  />

<input type=”text”  />

1.6.1 :enabled

给所有可用的表单元素添加上样式。

1.6.2 :disabled

给禁用的表单元素添加上样式。

1.6.3 :checked

给被选中的表单元素添加样式。

<label><input type=”radio” name=”gender”><span>男<span></label>

<label><input type=”radio” name=”gender”><span>女<span></label>

Style  input:checked+span{background-color:yello;}

当input中的一个选项被选中后，他的相邻兄弟元素span中男或者女的背景就会变成黄色。

1.7否定伪类元素

<div class=”dv1”>

<p></p>

<p></p>

<a></a>

</div>

Style  .dv1 :not(p){ }  dv1后代中除了p都可以添加样式，其中必须用父元素，如.dv1，且后面要有空格。

1.8属性选择器

1.8.1 E[attr(html属性)]{ }

 div[class]{ } 给拥有该attr属性的所有E元素添加样式。

1.8.2 E[attr=”value(属性值)”]{ }  

div[class=”abc”]{ } 给拥有该attr，且属性值为”value”的E元素添加样式。 HTML属性，如class，id，href等等。

1.8.3 E[attr*=”value(属性值)”]{ }  

div[class*=”bc”]{ }  若是E元素的attr属性值包含”value”，则添加该样式，即class=abc/bcd/bc等的div都可以被选中。

1.8.4 E[attr^=”value(属性值)”]{ }  

div[class^=”cde”]{ } 若是E元素的attr属性值以”value”值开头，则添加该属性，如class=”cdef”的div可以被选中，但class=”acde”的div无法被选中。

1.8.5 E[attr$=”value(属性值)”]{ }

 div[class$=”cde”]{ } 若是E元素的attr属性值以value值结尾，则添加该元素。

1.9伪元素选择器

1.9.1 ::before

1.9.2 ::after

1.9.3 ::first-letter

1.9.4 ::first-line

1.9.5 ::selection

给浏览器用鼠标左键选中的文本添加样式。Firefox中需要添加前缀“-moz-”，即 ::-moz-selection

1.10结构伪类选择器

1.10.1 E:first-child{ }

 当满足为父元素的第一个儿子元素，且满足为E元素，则可以添加样式。

<ul>

<li></li>

<li></li>

</ul>

Style  li:first-child{ } 指选取ul中的第一个儿子元素，且这个元素必须为li，若为其他元素，则无法被选取。

1.10.2 E:last-child{ }

当满足为父元素的最后一个儿子元素，且满足为E元素，则可以添加样式。

1.10.3 E:nth-child(n){ }

其中n从1开始......   为父元素第n个儿子，且满足为E元素，则添加该样式。

<ul>

<p></p>

<li></li>

<li></li>

</ul>

Style  li:nth-child(3){ }  其中红色字体的li，为ul的第3个儿子元素，且该元素为li。

1.10.4 E:nth-last-child(n){ }   

父元素倒数第n个孩子，且为E元素。

1.10.5 E:nth-child(2n/even){ }  

 父元素的第偶数个孩子，且为E元素。

1.10.6 E:nth-child(2n-1/odd){ }  

 父元素的第奇数个孩子，且为E元素。

1.10.7 E:first-of-type

  父元素的第一个是E的子元素。

1.10.8 E:last-of-type

  父元素的最后一个是E的子元素。

1.10.9 E:nth-of-type(n)

  父元素中的所有E元素，其中第n个。

1.10.10 E:empty

  获取为无文本（空格也不存在）的E元素。

1.10.11 E:only-child

 满足为父元素唯一一个孩子，且要满足为E元素。

1.10.12 E:only-of-type

 满足为父元素孩子中，唯一一个该类型的孩子。

2 css3新增属性

2.1 text-shadow文本阴影

text-shadow:0px 0px 0px red;  

第一个值代表水平偏移，右为正值，左为负值；

第二个值代表垂直偏移，下为正值，上为负值；

第三个值代表模糊区域。

可设置多个阴影：

text-shadow:3px 3px 10px red,-3px -3px 10px blue ...... ;

2.2 text-overflow 文本溢出

text-overflow:ellipsis/clip; 以省略号形式出现 / 默认形式，不以省略号出现

文本显示在一行，超出文本以省略号形式出现。

Tep1 设置容器宽度

Tep2 设置文本不换行 white-space:nowrap;

Tep3  overflow:hidden;

Tep4 超过文本部分以省略号形式出现 text-overflow:ellipsis;

2.3 单词换行

word-wrap:break-word;

2.4 自定义字体

Tep1 自定义字体，字体名字，字体的路径。

@font-face{

font-family:”1705”;

src:url(“”)

}

Tep2 使用自定义字体时

font-family:”1705”;

2.5字体图标

在Iconfont上下载，将一些图标变为文字，是矢量图。

方法一：下载好字体图标文件的代码后，会出现一个文件夹。文件中有个demo.html，可以看到字体图标对应的文字，copy到需要的地方，从iconfont.css拿到自定义代码，修改路径直接使用。或者按照其中的说明来进行更改。

方法二：全部复制，修改到需要的地方。

2.6 background-size

背景图片大小尺寸。

1 数值    background-size:600px 600px;  第一个数值代表水平方向尺寸；第二个数值代表垂直方向尺寸；若第二个值省略，代表的是按照第一个值等比缩放。

2 background-size:cover;    cover说明背景图片会完全覆盖容器，可能会有部分背景图片无法正常显示：当背景图片尺寸大于容器时，会进行等比缩小，到背景图片完全覆盖容器，部分无法显示；当背景图片尺寸小于容器时，会等比放大。

Background-size:cover;  常与background-position:center配合使用。

3 background-size:contain;   contain,包含，容器包含整张图片，容器可能会有留白。

4 background-size:80%(percentage);

2.7 background-origin

背景图默认从padding部分开始摆放，说明background-position以padding左上角为origin点，（0,0）。

Background-origin:border-box/content-box/padding-box; 从边框开始摆放。默认值为padding-box.

2.8 background-clip

Background-clip:content-box/padding-box; 背景剪裁，规定最终显示区域。

2.9 多张背景图使用方法

Background:url(“”) no-repeat 0px 0px,

url(“”) no-repeat 0px 200px,

url(“”) no-repeat 200px 0px,

url(“”) no-repeat 200px 200px;

 

心得

写代码时，总属性如background在上，单一属性如background-size在下，因为总属性中包含了单一属性，如果总属性在下会覆盖单一属性属性值。