2、Css中的样式选择器

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中的样式选择器

上一篇:Servlet&HTTP&Request


下一篇:Jmeter自动化测试的文件上传