[CSS]CSS/CSS3选择器

最新推荐文章于 2023-03-28 23:28:33 发布

Feathers .

最新推荐文章于 2023-03-28 23:28:33 发布

阅读量389

点赞数 1

分类专栏： Web前端文章标签： css css3 选择器 html style

本文链接：https://blog.csdn.net/xf616510229/article/details/53607148

版权

Web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

CSS选择器
CSS3选择器

CSS选择器

标签选择器

<!DOCTYPE html>
<html>
<head>
    <title>我是页面</title>
    <meta charset="utf-8">
    <style type="text/css">
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>哈哈</p>
    <p>呵呵</p>
    <p>嘿嘿</p>
</body>
</html>

所有的p标签的文字颜色，都变为红色

id选择器

<!DOCTYPE html>
<html>
<head>
    <title>我是页面</title>
    <meta charset="utf-8">
    <style type="text/css">
        #haha{
            color: red;
        }
    </style>
</head>
<body>
    <p id="haha">哈哈</p>
    <p id="hehe">呵呵</p>
    <p id="heihei">嘿嘿</p>
</body>
</html>

指定id的字体颜色变为红色，选择器使用#来选择指定id

类选择器

<!DOCTYPE html>
<html>
<head>
    <title>我是页面</title>
    <meta charset="utf-8">
    <style type="text/css">
        .important{
            color: red;
        }
        .error{
            text-decoration: underline;
        }
        .special{
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p class="error important">哈哈</p>
    <p class="error special">呵呵</p>
    <p class="special important">嘿嘿</p>
</body>
</html>

最重要的选择器，不建议使用id选择器，id选择器主要供给给js使用。

后代选择器

<!DOCTYPE html>
<html>
<head>
    <title>我是页面</title>
    <meta charset="utf-8">
    <style type="text/css">
        .oneClass p .twoClass{
            color: red;
        }
    </style>
</head>
<body>
    <ul class="oneClass">
        <li>我是大帅锅 <p>我真的真的好帅</p></li>
        <li>我是大帅锅 <p>我真的真的 <span class="twoClass">好帅</span> </p></li>
        <li>我是大帅锅 <p>我真的真的好帅</p></li>
    </ul>
    <ul>
        <li>我是大帅锅 <p>我真的真的好帅</p></li>
        <li>我是大帅锅 <p  class="twoClass">我真的真的好帅</p></li>
        <li>我是大帅锅 <p>我真的真的好帅</p></li>
    </ul>
</body>
</html>

空格代表后代（在标签内的标签，不一定是子标签），其中.oneClass p .twoClass代表将类oneClass中的p标签中的.twoClass类的颜色设置为红色

交集选择器

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        p.special{
            color: red;
        }
    </style>
</head>
<body>
    <h3>我最帅</h3>
    <h3>我最帅</h3>
    <h3 class="special">我最帅</h3>
    <p class="special">我最帅</p>
    <p class="special">我最帅</p>
    <p>我最帅</p>
</body>
</html>

交集选择器用在这种情况下，当两个不同的标签处于不同的类时，要想为其中一个设置style，就需要交集选择器了

并集选择器

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        h3,p{
            color: red;
        }
    </style>
</head>
<body>
    <h3>我最帅</h3>
    <h3>我最帅</h3>
    <ul>
        <li>我最帅</li>
    </ul>
    <p>我最帅</p>
    <p>我最帅</p>
</body>
</html>

通配符*

用于初始化，效率极低。

*{

}

伪类选择器

伪类选择器是一种设置标签状态效果的选择器，以：表示
常见的伪类选择器有：

        a:link{
            /*用户没有点击链接时的样式*/
            color: blue;
        }
        a:visited{
            /*用户访问后的样式*/
            color: orange;
        }
        a:hover{
            /*用户鼠标悬停的样式*/
            color: green;
        }
        a:active{
         /*用户鼠标按住链接时的样式*/
            color: black;
        }

爱恨准则，必须按上面的顺序写，不然将会失效：love hate。

after和before选择器

p:after
{ 
    /*再每个p标签后面插入新的内容*/
    content:"台词：";
    /*为插入的内容设置样式*/
    background-color:yellow;
    color:red;
    font-weight:bold;
}

p:before{
    /*为每个p标签前插入新的内容*/
}

CSS3选择器

儿子选择器

IE7开始兼容

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        div>ul>li>p{
            color: red;
        }
    </style>
</head>
<body>
    <h3>我最帅</h3>
    <div>
        <ul>
            <li>哈 哈 哈 哈</li>
            <li><p>红了！！！</p></li>
            <li>哈 哈 哈 哈</li>
        </ul>
    </div>
</body>
</html>

序选择器

IE8开始兼容

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        ul li:first-child{
            color: red;
        }
    </style>
</head>
<body>
    <h3>我最帅</h3>
    <div>
        <ul>
            <li>哈 哈 哈 哈</li>
            <li><p>红了！！！</p></li>
            <li>哈 哈 哈 哈</li>
        </ul>
    </div>
</body>
</html>

使用冒号后面加位置属性，比如first-child last-child
兼容替代：

<style type="text/css">
        ul li.first{
            color: red;
        }
    </style>


<ul>
    <li class="first">哈 哈 哈 哈</li>
    <li><p>红了！！！</p></li>
    <li class="last">哈 哈 哈 哈</li>
</ul>

下一个兄弟选择器

IE7开始兼容

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="utf-8">
    <style type="text/css">
        h3+p{
            color: red;
        }
    </style>
</head>
<body>
    <h3>我最帅</h3>
    <p>我知道</p>
    <p>我知道</p>
    <p>我知道</p>
    <h3>我最帅</h3>
    <p>我知道</p>
    <p>我知道</p>
    <p>我知道</p>
</body>
</html>

h3 后面的紧挨着的第一个p兄弟变红

Feathers .

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[CSS]CSS/CSS3选择器

CSS选择器标签选择器id选择器类选择器后代选择器交集选择器并集选择器通配符CSS3选择器儿子选择器序选择器下一个兄弟选择器CSS选择器标签选择器<!DOCTYPE html><html><head> <title>我是页面</title> <meta charset="utf-8"> <style type="text/css">
复制链接

扫一扫

专栏目录