10、CSS选择器

技术2022-07-11 77

CSS选择器

一、CSS选择器

1.1、通配符选择器

*{ /*不需要调用，html全部标签都将使用该样式*/ }

1.2、标签选择器

标签名{ /*不需要调用，所有该类标签都将使用该样式*/ }

1.3、ID选择器

#自定义名称{ /*只有通过id="自定义名称"调用后才会生效，且该样式只能被调用一次*/ }

1.4、CLASS选择器

.自定义名称{ /*只有通过class="自定义名称"调用后才会生效，该样式可以被多次调用*/ }

前面4种选择器优先级：id选择器>类选择器>标签选择器>通配符选择器

1.5、交集选择器

标签#ID选择器{ /*只有该类标签中调用了该ID选择器的标签才会生效该样式*/ }

1.6、并集选择器

标签,id选择器,.类选择器{ /*以上出现过的选择器的标签都会生效该样式*/ }

1.7、后代选择器

选择器1 选择器2{ /*(直接/间接)被包含于选择器1中的所有选择器2都会生效该样式*/ }

1.8、子代选择器

选择器1>选择器2{ /*直接被包含于选择器1中的选择器2才会生效该样式*/ }

1.9、伪类选择器

a:link：未被访问的超链接，只能作用于<a>标签。a:visited：被访问过的超链接，只能作用于<a>标签。选择器:hover：鼠标悬停时的样式。选择器:active：鼠标下按且未弹起时的样式。选择器:focus：元素获得焦点时的样式。 :link和:visited属于静态伪类，只能作用于超链接:hover、:active和:focus属于动态伪类，可以作用于任何元素<a>标签有四种伪类（状态），但是必须按照固定的顺序写，否则失效。固定顺序为:link——>:visited——>:hover——>:active

关于伪类的一个案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/test.css"> </head> <body> <div class="nav"> <ul> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> <li><a href="#">网站栏目</a></li> </ul> </div> </body> </html> *{ margin: 0; padding: 0; } .nav{ width: 960px; height: 50px; border: 1px solid red; margin: 100px auto; } .nav ul{ /*去掉小圆点*/ list-style: none; } .nav ul li{ float: left; width: 120px; height: 50px; /*让内容水平居中*/ text-align: center; /*让行高等于nav的高度，就可以保证内容垂直居中*/ line-height: 50px; } .nav ul li a{ display: block; width: 120px; height: 50px; } /*两个伪类的属性，可以用逗号隔开*/ .nav ul li a:link , .nav ul li a:visited{ text-decoration: none; background-color: purple; color:white; } .nav ul li a:hover{ background-color: orange; }

Processed: 0.012, SQL: 9