css的9个常用选择器_而已_前端开发者

1.类选择器(通过类名进行选择)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    .p1{
        color: #00ff00;
    }
    .p2{
        color: #0000ff;
    }
</style>
<body>
    <p class="p1">这是类选择器</p>
    <p class="p2">hello world</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    .p1{
        color: #00ff00;
    }
    .p2{
        color: #0000ff;
    }
</style>
<body>
    <p class="p1">这是类选择器</p>
    <p class="p2">hello world</p>
</body>
</html>

<!DOCTYPE html><html><head><title></title></head><style type=”text/css>
.p1
{
color
: #00ff00;}
.p2
{
color
: #0000ff;}</style><body><p class=”p1″></p><p class=”p2″></p></body></html>

效果图:

 

 

 

2.id选择器(通过id进行选择)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    #text{
        color: red;
    }
</style>
<body>
    <p id="text">这是id选择器</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    #text{
        color: red;
    }
</style>
<body>
    <p id="text">这是id选择器</p>
</body>
</html>

<!DOCTYPE html><html><head><title></title></head><style type=”text/css>
#text
{
color
: red;}</style><body><p id=”text”></p></body></html>

效果图:

 

 

 

3.标签选择器(通过id进行选择)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    p{
        color: #f40;
        font-size: 25px;
    }
</style>
<body>
    <div>
        <p>这是标签选择器</p>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    p{
        color: #f40;
        font-size: 25px;
    }
</style>
<body>
    <div>
        <p>这是标签选择器</p>
    </div>
</body>
</html>

<!DOCTYPE html><html><head><title></title></head><style type=”text/css”>
p
{
color
: #f40;
font-size
: 25px;}</style><body><div><p></p></div></body></html>

效果图:

 

 

 

4.分组选择器(可一次选择多个标签以设置相同样式)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    p,a,li{
        color: blue;
    }
</style>
<body>
<p>这是分组选择器</p>
<p>hello</p>
<a href="#">world</a>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    p,a,li{
        color: blue;
    }
</style>
<body>
<p>这是分组选择器</p>
<p>hello</p>
<a href="#">world</a>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html><html><head><title></title></head><style type=”text/css”>
p,a,li
{
color
: blue;}</style><body><p></p><p></p><a href=”#”></a><div><ul><li></li><li></li><li></li></ul></div></body></html>

效果图:

 

 

 

5.后代选择器(选择某个标签的所有后代以设置相同样式)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    div ul li{
        color: red;
        list-style: none;
    }
</style>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    div ul li{
        color: red;
        list-style: none;
    }
</style>
<body>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>

<!DOCTYPE html><html><head><title></title></head><style type=”text/css”>
div ul li
{
color
: red;
list-style
: none;}</style><body><div><ul><li></li><li></li><li></li></ul></div></body></html>

效果图:

 

 

 

6.属性选择器(通过属性(如name属性)进行选择以设置相同的样式)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    [name="pra1"]{
        color: blue;
    }
    [name="pra2"]{
        color: red;
    }
</style>
<body>
    <p name="pra1">这是属性选择器</p>
    <p name="pra2">hello world</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    [name="pra1"]{
        color: blue;
    }
    [name="pra2"]{
        color: red;
    }
</style>
<body>
    <p name="pra1">这是属性选择器</p>
    <p name="pra2">hello world</p>
</body>
</html>

<!DOCTYPE html><html><head><title></title></head><style type=”text/css”>
[name=”pra1″]
{
color
: blue;}
[name=”pra2″]
{
color
: red;}</style><body><p name=”pra1″></p><p name=”pra2″></p></body></html>

效果图:

 

 

 

7.通用选择器(选择所有标签以设置相同样式)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    *{
        color: red;
    }
</style>
<body>
    <p>这是通用选择器</p>
    <p>hello</p>
    <p>world</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    *{
        color: red;
    }
</style>
<body>
    <p>这是通用选择器</p>
    <p>hello</p>
    <p>world</p>
</body>
</html>

<!DOCTYPE html><html><head><title></title></head><style type=”text/css”>
*
{
color
: red;}</style><body><p></p><p></p><p></p></body></html>

效果图:

 

 

 

8.兄弟选择器(选择兄弟关系的标签设置样式)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    p+a{
        color: green;
    }
</style>
<body>
        <p>这是兄弟选择器</p>
        <a>hello world</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    p+a{
        color: green;
    }
</style>
<body>
        <p>这是兄弟选择器</p>
        <a>hello world</a>
</body>
</html>

<!DOCTYPE html><html><head><title></title></head><style type=”text/css”>
p+a
{
color
: green;}</style><body><p></p><a></a></body></html>

效果图:

 

 

 

9.直接父子选择器(选择父子关系的标签中子标签设置样式)

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    div>p {
        color: red;
    }
</style>
<body>
    <div>
        <p>这是直接父子选择器</p>
    </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    div>p {
        color: red;
    }
</style>
<body>
    <div>
        <p>这是直接父子选择器</p>
    </div>
</body>
</html>

<!DOCTYPE html><html><head><title></title></head><style type=”text/css”>
div>p
{
color
: red;}</style><body><div><p></p></div></body></html>

效果图:

 

» 本文来自:前端开发者 » 《css的9个常用选择器_而已_前端开发者》
» 本文链接地址:https://www.rokub.com/73203.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!