CSS_选择器

2021-12-09 00:31:49

类选择器

class 属性规定元素的类名（classname）
类选择器以一个点号显示

.center {text-align: center}

class类似一个标记。
“p.类名”表示标记了该类的p标签的样式，这个类的样式只能被p使用。即

p class=”标记名”

而”.类名”表示元素也可以基于它们的类而被选择，所有标签都可以包含这个类

*.important {color:red;}
.important {color:red;}
以上两者相等

一个标签可以包含多个类，包含多个类时用空格隔开，不分先后

当两个类有各自的样式，可以有同时包含两个类时才出现的样式

.important.warning {background:silver;}

<!--实例-->
<html>
    <head>
        <title>网页标题</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="type/html;charset=htf-8"/>
        <style type="text/css">
            <!--元素基于它们的类而被选择-->
            p.try1 {
                color:blue;
            }

            <!--所有元素都可使用-->
            .try2 {
                text-align:center;
            }
        </style>
    </head>

    <body>
    <p>这是单独的段落</p>
    <p class="try1 try2">这是在"class=try1 try2"的段落</p>
    <h1 class="try2">这是标题，class=try2</h1>

    </body>
</html>

<!--两个标记同时存在时的特殊样式-->
<html>
    <head>
        <title>网页标题</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="type/html;charset=htf-8"/>
        <style type="text/css">
        .s1{
            color:red;
        }
        .s2{
            font-size:20px;
        }
        .s1.s2{
            font-style:italic;
        }
        </style>
    </head>
    <body>
    <p class="s1"> 段落s1</p>
    <p class="s2"> 段落s2</p>
    <p class="s1 s2"> 段落s1 s2 </p>

    </body>
</html>

class 也可被用作派生选择器：

        <style type="text/css">
            .s1 h1 {
                font-size:10px;
            }
            .s1 h2 {
                    background: #666;
            }
        </style>

ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。例如：

#red {color:red;}
#green {color:green;}

在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。
ID区分大小写
即使被标注为特定ID的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：
例如：

        <style type="text/css">
        #s h2{
            color:red;
        }
        #s h1{
            color:blue;
        }
        </style>

<html>
    <head>
        <title>网页标题</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="type/html;charset=htf-8"/>
        <style type="text/css">
        #red {
            color:red;
        }
        </style>
    </head>
    <body>
    <p id="red">这是ID=red的段落</p>
    <p>这是普通段落</p>

    </body>
</html>

伪元素选择器

a:link 正常样式
a:hover 鼠标放上的样式
a:active 鼠标按下时的样式
a:visited 访问过的样式

派生选择器

后代选择器

li strong {
    font-style: italic;
    font-weight: normal;
  }

以上的代码表示在列表（li）中的strong标记所具有的样式。当strong单独使用时不具有以上样式。
类似于

<html>
    <head>
        <title>网页标题</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="type/html;charset=htf-8"/>

        <style type="text/css">
        li strong {
            font-style: italic;
            font-weight: normal;
        }
        </style>

    </head>
    <body>
        <strong>This is a normal Strong</strong>
        <ul>
            <li><strong>This is a Strong in li</strong></li>
        </ul>
    </body>
</html>

<html>
    <head>
        <title>网页标题</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="type/html;charset=htf-8"/>

        <style type="text/css">
        strong {
             color: red;
             }

        h2 {
             color: red;
             }

        h2 strong {
             color: blue;
             }
        </style>

    </head>
    <body>
        <strong>这是普通的strong</strong>
        <h2>这是普通的h2</h2>
        <h2><strong>这是h2中的strong</strong></h2>

    </body>
</html>

子元素选择器

h1 > strong {color:red;}
只将h1下一层的strong使用该样式。”>”两端可以没有空格

与后代选择器的区别：
个人认为可以将所有标签看成一个树结构
后代选择器的范围包含孩子和孙子节点。
子元素选择器的范围只包含孩子节点。

<html>
    <head>
        <title>网页标题</title>
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta http-equiv="content-type" content="type/html;charset=htf-8"/>

        <style type="text/css">
            h1 > strong {
                color:red;
            }
        </style>
    </head>
    <body>

    <h1>这是<strong>第一个</strong></h1>
    <h1>这是<p><strong>第二个</strong></p>strong</h1>
    </body>
</html>

相邻兄弟选择器

h1+p{clolr:blue;}
二者有相同父元素则称为兄弟。
紧贴在h1后的p，并且h1和p具有相同父节点。则使用该样式

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {color:blue;}
</style>
</head>

<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

Tips

HTML div标签

可定义文档中的分区或节（division/section）,把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

码农公寓