CSS选择器详解-优快云博客

本文链接：https://blog.youkuaiyun.com/dream_AI/article/details/107070864

CSS选择器

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;
}