青叶的全栈之路
青叶的全栈之路

10、CSS选择器

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、伪类选择器

  1. a:link：未被访问的超链接，只能作用于标签。
  2. a:visited：被访问过的超链接，只能作用于标签。
  3. 选择器:hover：鼠标悬停时的样式。
  4. 选择器:active：鼠标下按且未弹起时的样式。
  5. 选择器:focus：元素获得焦点时的样式。

关于伪类的一个案例：


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Documenttitle>
    <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;
}

你可能感兴趣的:(Web前端)