2、Css中的样式选择器

2022-10-09 11:46:36

1、样式规则的选择器(通过怎样的途径来获得页面上要设置样式的元素)

1）、HTML Selector

2）、Class Selector （需要给要设置样式的元素的class属性赋值）

3）、ID Selector （需要给要设置样式的元素的id属性赋值）

4）、关联选择器 P EM{text-indent:0cm;mso-list:l1 level1 lfo2">5）、组合选择器 <table></table>

6）、伪元素选择器

伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。例如，对于超链接标签(<a></a>)的正常状态(没有任何动作前)、访问过的状态、选中状态、光标移到超链接文本上的状态，对于段落的首字母和首行，都可以使用伪元素选择器来定义。

代码：class选择器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
      /* p {  HTML选择器
            background-color:red;
        }*/
        p.c1 {
        
            background-color:red;
        }
        p.c2 {
        
            background-color:green;
        }

        p.c3 {
            background-color:yellow;
        }
    </style>
</head>
<body>
    <p class="c1">今天是我们第一天学习CSS</p>
    <p class="c1">今天是我们第一天学习CSS</p>
    <p class="c2">今天是我们第一天学习CSS</p>
    <p class="c2">今天是我们第一天学习CSS</p>
    <p class="c3">今天是我们第一天学习CSS</p>
    <p class="c3">今天是我们第一天学习CSS</p>
</body>
</html>

代码：ID选择器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {
            background-color:green;
        }
        #p2 {
            background-color:blue;
        }
    </style>
</head>
<body>
    <p id="p1">今天是我们第一天学习CSS</p>
    <p id="p6">今天是我们第一天学习CSS</p>
    <p id="p2">今天是我们第一天学习CSS</p>
    <p id="p3">今天是我们第一天学习CSS</p>
    <p id="p4">今天是我们第一天学习CSS</p>
    <p id="p5">今天是我们第一天学习CSS</p>
</body>
</html>

代码：关联选择器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        /*em.em1 {
            background-color:yellow;
        }*/
        /*#em {
            background-color:green;
        }*/

        p em {
            background-color:black;
        }
    </style>
</head>
<body>
    <em>我是em标签</em>
    <p><em id="em">我是p标签中的em标签</em></p>
    <p>今天是我们第一天学习CSS</p>
    <p>今天是我们第一天学习CSS</p>
    <p>今天是我们第一天学习CSS</p>
    <p>今天是我们第一天学习CSS</p>
    <p>今天是我们第一天学习CSS</p>
    <p>今天是我们第一天学习CSS</p>
</body>
</html>

代码：伪元素选择器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        A:active {
            background-color:yellow;
        }
        A:hover {
            font-size:xx-large;
        }
        A:link {
            /*background-color:pink;*/
        }
        A:visited {
         color:gray;
        }
        P:first-letter {
            font-size:xx-large;
        }
        P:first-line {
          color:yellow;  
        }
    </style>
</head>
<body>
    <p>床前明月光，疑是地上霜<br/>举头望明月，我叫郭德纲</p>
    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>
    <a href="#">超链接</a>
</body>
</html>

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /* p { HTML选择器 background-color:red; }*/ p.c1 { background-color:red; } p.c2 { background-color:green; }
p.c3 { background-color:yellow; } </style></head><body> <p class="c1">今天是我们第一天学习CSS</p> <p class="c1">今天是我们第一天学习CSS</p> <p class="c2">今天是我们第一天学习CSS</p> <p class="c2">今天是我们第一天学习CSS</p> <p class="c3">今天是我们第一天学习CSS</p> <p class="c3">今天是我们第一天学习CSS</p></body></html>

2、Css中的样式选择器

码农公寓

相关文章