CSS_2th_CSS选择器

来源：互联网发布：什么东西淘宝没有卖编辑：程序博客网时间：2024/05/22 01:11

一、选择器
1、类选择器：class
1）一个选择符能有不同的class，因而允许同一个选择符具有不同的样式

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">p.code{ font-size: 16px; color: red; }p.comment{ font-size: 10px; color: green; }</style></head><body><p class="comment" >//第一个Java程序</p><pre><p class="code" >public class Hello {public static void main(String[] args) {System.out.println("Hello World!");}}</p></pre></body></html>

总结：
①p.comment{}表示：如果一个p标签的class是"comment"，就将该p标签的样式设为{}中所描述的样式。
②即"."和class相对应。
③<pre></pre>标签可以保留内容的格式（如换行和缩进）。

2）不同的标签通过类选择器同时定义成一样的样式

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.code{ font-size: 16px; color: red; }</style></head><body><h1 class="code" >//第一个Java程序</h1><pre><p class="code" >public class Hello {public static void main(String[] args) {System.out.println("Hello World!");}}</p></pre></body></html>

总结：
①class选择器可以指定某一类（多个标签）的装修风格。

2、id选择器

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#code1{ font-size: 16px; color: red; }#code2{ font-size: 16px; color: blue; }</style></head><body><h1 id="code1" >//第一个Java程序</h1><pre><p id="code2" >public class Hello {public static void main(String[] args) {System.out.println("Hello World!");}}</p></pre></body></html>

总结：
①"#code1"表示找到一个标签其id是"code"，则把该标签的样式设置为#code1{}的样式。
②在style标签中看到"#"则说明这是一个id选择器。id与"#"相搭配，class与"."相搭配。
③class和id的区别：两个标签的class可以一样，但是id通常情况下不能取一样的值，即一个标签的id在整个html文档中是独一无二的。
④id可以与JavaScript结合在一起使用，由于id是独一无二的，使用document.getElementById("code1")获得当前文档对象中id为"code1"的那个标签对象的引用。

3、多标签选择
1）例1

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">h1,p{ font-size: 16px; color: red; }</style></head><body><h1>//第一个Javac程序</h1><pre><p>public class Hello {public static void main(String[] args) {System.out.println("Hello World!");}}</p></pre></body></html>

总结：
①h1,p{}表示将html文档中的h1和p标签都设置为{}中的样式。
②"，"相当于"与"的关系。

2）例2

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">p a{ font-size: 16px; color: red; }</style></head><body><p><a>Hello</a></p><p>World</p></body></html>

总结：
①p a{}表示将p标签内部的a标签设置为{}中的样式。
②" "（空格）表示从属关系。

二、装饰超链接的伪类选择符
1、对链接的修饰
1）a:link未访问时的状态
2）a:visited访问过后的状态
3）a:active鼠标点中不放时的状态
4）a:hover鼠标划过时的状态

5）例子

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">a:link{color: blue; text-decoration: none; }a:visited{ color: blueviolet; text-decoration: none;}a:hover{ color: blue; text-decoration: underline; }a:active{ color: red; text-decoration: none; }</style></head><body><a href="01.html">我就是用来说明问题的链接</a></body></html>

总结：
①设置伪类的顺序一定要是：a:link->a:visited->a:hover->a:active
②在实际开发中经常只设置两种：a、a:hover
如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">a{color: gray; text-decoration: none; }a:hover{ color: blue; text-decoration: underline; }</style></head><body><a href="01.html">我就是用来说明问题的链接</a></body></html>

0 0