Web前端学习第七天·fighting_CSS样式的编写和使用

Posted Candy1029

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web前端学习第七天·fighting_CSS样式的编写和使用相关的知识,希望对你有一定的参考价值。

属性选择器

  目前使用的并不多。新浪和京东有使用。

  可以根据元素的属性即属性值来选择元素。

  单个属性时的语法:*[属性名称]{样式}

  例如:(表示所有有href属性的标签)

1 <style type="text/css">
2      *[href]{
3          color:red;
4      }
5 </style>
1 <style type="text/css">
2      span[href]{
3          color:red;
4      }
5 </style>

  上面的代码中表示span标签中具有href属性的元素,给它的内容的颜色设置为红色。span中的href属性并没有实际意义。

  

  多个属性时的语法:*[属性名称][属性名称]{样式}

  例如:(表示类名为a的具有href和name属性的元素)

1 <style type="text/css">
2     .a[href][name]{
3         color:red;
4     }
5 </style>

  

  根据属性值匹配,要求完全匹配时的语法:*[属性名称="属性值"]{样式}

  例如:

1 <style type="text/css">
2     input[type="text"]{
3         color:red;
4     }
5 </style>

  上述的示例可以将文本框输入的字体颜色变为红色。

  

  根据属性值的单词匹配的语法:*[属性名称~="单词"]{样式}

  例如:(表示div中类名中包含单词“note”的元素,“war note”匹配,“warnote”不匹配)

1 <style type="text/css">
2     div[class~="note"]{
3         color:red;
4     }
5 </style>

  

  根据属性值包含的内容匹配的语法:*[属性名称*="内容"]{样式}

  例如:(表示div中类名中包含单词“note”的元素,“warnote”和“war note”都是匹配的)

1 <style type="text/css">
2     div[class*="note"]{
3         color:red;
4     }
5 </style>

  如果~=和*=同事存在,heml解析的顺序(与优先级相反)是怎样的呢?

    与它们出现在html中的位置有关,出现在前面的先执行,出现在后面的后执行,后面执行的属性值会覆盖前面执行的属性值,也就是说后执行的优先级高。

  

  以属性值开头的内容选择的语法:*[属性名称^="内容"]{样式}

  例如:(以“btn”开头的name属性值对应的元素被选中)

1 <style type="text/css">
2     div[name^="btn"]{
3         color:red;
4     }
5 </style>

  

  以属性值开头的单词的选择的语法:*[属性名称|="单词"]{样式}

  例如:(input标签中以“btn”单词开头的name属性值对应的元素被选中)

1 <style type="text/css">
2     input[name|="btn"]{
3         color:red;
4     }
5 </style>

 

  以属性值结尾的内容的选择的语法:*[属性名称$="内容"]{样式}

  例如:(button标签中的name属性值以“btn”结尾的标签被选中)

1 <style type="text/css">
2     input[type="button"][name$="btn"]{
3         color:red;
4     }
5 </style>

 

交集选择器(ID选择器的一种)

  由两个选择器组合而成,第一个是标签选择器,第二个是类选择器或者ID选择器,用于更加明确的选择某个元素。

  语法:标签.class(或者标签#id){样式}(注意:第一个必须是标签选择器,中间不能有空格)。

  html执行各类选择器的顺序(与优先级相反):

    浏览器默认的样式

    标签选择器

    类选择器

    交集选择器(标签.class)

    id选择器

    交集选择器(标签.id)

    行内样式

  使用频率并不高。

 

分组选择器

  由多个选择器通过逗号连接在一起,也称之为并集选择器。

  例如:body,div,dl,dt,dd,ul{margin:0;padding:0}(通常使用这类代码初始化CSS去掉页面的内边距和外边距)。

  具体使用可查看新浪网的源码。

  

考虑到网页加载的速度和流量,通常会对CSS样式文件和JS脚本文件做压缩处理(即去掉多余的空格等)。

 

伪类样式选择器

  超链接有很多的行为,比如:鼠标悬浮在上面,鼠标点击(点击后会发现超链接样式与其他的不同),鼠标离开后的样式,都可以通过伪类样式来实现。

  CSS3.0中增加了许多伪类选择器。主要介绍CSS1.0和CSS2.0中的伪类选择器。

  E:link  设置超链接a在未被访问前的样式,用在<a>标签中。(E表示选择器:类选择器、ID选择器、标签选择器,但是不能是元素选择器)

    语法:E:link{样式}   

    例如:注释掉的代码段与该伪类选择器看似实现同样的功能,实际上是不同的。使用伪类选择器的样式只作用于超链接,也就是说如果<a>标签没有设置href的属性值,那么它就会呈现出默认样式而不会被设置为橘色。如果使用的是注释掉的代码(标签选择器),则所有的<a>标签不管是不是超链接,它们都会变成橘色。

  E:visited  设置超链接a在其链接地址被访问以后的样式。

    语法:E:visited{样式}

  E:hover  设置元素在其鼠标悬停的样式。

    语法:E:hover{样式}

  E:focus  设置对象在成为输入焦点(该对象的focus事件发生)时的样式。webkit(Google浏览器)内核浏览器会默认给:focus状态的元素加上outline(外边的线条)的样式。

    语法:E:focus{样式}

  E:first-child  应用该样式的第一个元素,而不是子元素。(也就是说html解析中第一个被用到的E标签,而不是指E标签中的第一个子元素)

    语法:E:first-child{样式}

例如:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>伪类样式选择器</title>
 6     <meta charset="utf-8" />
 7     <style type="text/css">
 8         a:link {
 9             color: orange;
10         }
11         /*a {
12             color: orange;
13         }*/
14         a:visited {
15             color:gray;
16         }
17         a:hover {
18             color:red;
19             text-decoration:none;
20         }
21         input:focus {
22             /*实线边框,2px,红色*/
23             border:2px solid red;
24             /*谷歌浏览器默认加上外边框了,需要我们自己去掉外边框*/
25             outline:none;
26         }
27         /*是指第一个被使用的div标签,而不是指div标签的第一个子元素*/
28         div:first-child {
29             border:2px solid red;
30         }
31     </style>
32 </head>
33 <body>
34     <div>
35         <p>第一段</p>
36         <p>第二段</p>
37         <p>第三段</p>
38     </div>
39     <div>
40         <input/>
41         <span>第一个&lt;span&gt;标签</span>
42         <ul>
43             <li>
44                 <a href="http://www.baidu.com" title="百度">百度</a>
45                 <span>搜索网站</span>
46             </li>
47             <li>
48                 <a href="http://www.baidu.com" title="新浪">新浪</a>
49                 <span>门户网站</span>
50             </li>
51             <li>
52                 <a href="http://www.baidu.com" title="网易">网易</a>
53                 <span>门户网站</span>
54             </li>
55         </ul>
56         <span>第二个&lt;span&gt;标签</span>
57         <p>段落标签</p>
58     </div>
59 </body>
60 </html>

注意:伪类选择器中不能有空格

 

练习

  

1分组选择器

2属性选择器

3类选择器

4后代选择器

5分组选择器(后代选择器)

6分组选择器(后代选择器,伪类选择器)

7分组选择器

8子元素选择器(前面是一个后代选择器)

9伪类选择器(前面是后代选择器)

10后代选择器

 

 

 

 

  

以上是关于Web前端学习第七天·fighting_CSS样式的编写和使用的主要内容,如果未能解决你的问题,请参考以下文章

Web前端学习第九天·fighting_使用CSS美化文字

Web前端学习第十一天·fighting_使用CSS布局和定位

Web前端学习第十二天·fighting_HTML页面设计技巧总结

Web前端学习第十三天·fighting_HTML页面设计技巧总结

Web前端学习第十四天·fighting_JavaScript概述

学习Pytbon第七天,集合