JavaScript选择器

1、标签选择器

每一个HTML标签的名称都可以作为相应的标签选择器的名称



<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <title>Title</title>


    <style type="text/css">


        p{


            color: red;


            font-size: 14px;


        }


    </style>


</head>


<body>


    <p>世界上只有一种英雄主义，就是看透生活的真相后仍然热爱生活</p>


</body>


</html>


 




2、类别选择器


类别选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
       .a{
           color: blue;
           font-size: 20px;
           /*text-align: center;*/
       }
        .b{
            color: red;
            font-size: 22px;
            /*text-align: center;*/
        }
    </style>
</head>
<body>
    <h1>清明</h1>
    <p class="a">清明时节雨纷纷</p>
    <p class="b">路上行人欲断魂</p>
</body>
</html>



View Code


3、ID选择器


ID选择器允许以一种独立于文档元素的方式来指定样式，在某些方面，ID选择器类似于类别选择器，不过也有一些重要差别。首先，ID选择器前面有一个#号。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #fontstyle {
            color: red;
            font-weight: bold;
        }

        #textstyle {
            color: blue;
            font-size: 22px;
        }
    </style>
</head>
<body>
<h1>清明</h1>
<p id="textstyle">清明时节雨纷纷</p>
<p id="fontstyle">路上行人欲断魂</p>
</body>
</html>




4、属性选择器


属性选择器可以根据元素的属性及选择值来选择元素。如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器






<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        [title]{color: red}
    </style>
</head>
<body>
<h1>应用样式</h1>
<p title="123">清明时节雨纷纷</p>
<p title="456">路上行人欲断魂</p>
</body>
</html>



View Code


 






            

            
posted @ 
2019-05-17 11:16 
莒州豪侠 
阅读(651) 
评论(0) 
编辑 
收藏 
举报