CSS选择器精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45845042/article/details/105450090

CSS学习(二) 选择器

文章目录

CSS学习(二) 选择器

1，基本选择器

标签选择器：选择同一类标签的所有元素
类选择器：选择一类标签（class相同）
id选择器：选择唯一id的一个元素

优先级：id选择器>类选择器>标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
/*标签选择器*/
        h1{
            color: yellow;
        }
/*类选择器*/
        .myP{
            color:blue;
        }
/*id选择器*/
        #id7{
            color: wheat;
        }
        #id8{
            color: green;
        }
        #id9{
            color: darkred;
        }
    </style>
</head>
<body>
<h1>我的标题1</h1>
<h1>我的标题2</h1>
<h1>我的标题3</h1>
<h1>我的标题4</h1>
<p class="myP">
    我的标题5
</p>
<p class="myP">
    我的标题6
</p>
<h2 id="id7">我的标题7</h2>
<h2 id="id8">我的标题8</h2>
<h2 id="id9">我的标题9</h2>
</body>
</html>

在这里插入图片描述

2，层次选择器

后代选择器:选择所有后代的同类标签
子代选择器:选择下一代的同类标签
相邻兄弟选择器:选择同代下一个的同类标签
通用选择器:选择同代往下面所有的同类标签

<!--后代选择器-->
    <style>
        body p{
            color: red;
        }
    </style>

在这里插入图片描述

<!--子代选择器-->
<style>
        body>p{
            color: red;
        }
 </style>

在这里插入图片描述

<!--相邻兄弟选择器-->
<style>
        .test + p{
            color:red;
        }
</style>

在这里插入图片描述

<!--通用选择器-->
    <style>
        .test ~p{
            color:red;
        }
    </style>

在这里插入图片描述

3，结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        /*选择所有元素中第一个元素，如果不是h1类型则无效*/
        h1:first-child{
            color: yellow;
        }
        /*选择所有元素中第一个p类型元素*/
        p:first-of-type{
            color: red;
        }
        /*选择所有元素中最后一个元素，如果不是p类型则无效*/
        p:last-child{
            color: blue;
        }
        /*选择所有元素中最后一个h3类型元素*/
        h3:last-of-type{
            color: darkred;
        }
        /*选择所有p元素的父元素，然后选择父元素的所有子元素中第3个不分类型的标签*/
        p:nth-child(3){
            color: #8EC5FC;
        }
        /*选择所有p元素的父元素，然后选择父元素的所有子元素中第3个p类型的标签*/
        p:nth-of-type(3) {
            color: wheat;
        }

    </style>
</head>
<body>
<h1>p0</h1>
<p>p1</p>
<p>p2</p>
<p>p3
   <p id="test">p3.1</p>
   <p>p3.2</p>
    <p>p3.3</p>
</p>
<h3>我是最后一个h3</h3>
<p>我是最后一个p</p>
</body>
</html>

效果：
在这里插入图片描述

4，属性选择器

选择具有特定属性的HTML元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
        p[id='http://www.baidu.com']{
            color:red;
        }
        /*选择所有包含name属性的p标签*/
        p[name]{
            color:blue;
        }
        /*选择id属性中包含独立单词nextdoor的标签*/
        p[id~=nextdoor]{
            color:green;
        }
        /*选择id属性中包含tas的标签,不要求是一个完整单词*/
        p[name*=tas]{
            color: #8EC5FC;
        }
        /*选择name属性中以hao开头的标签(属性值必须是一个完整的单词或以-隔开）
         */
        p[name|=hao]{
            color: yellow;
        }
        /*选择name属性以.pdf结尾的标签*/
        p[name$=".pdf"]{
            color: #E0C3FC;
        }

    </style>
</head>
<body>
<p id ='http://www.baidu.com'>p1</p>
<p id="http://www nextdoor com">p2</p>
<p name="">p3
   <p id="test">p3.1</p>
   <p name="haoasdasdas">p3.2</p>
    <p name = "notasdasda">p3.3</p>
</p>
<p name="a.pdf">p7</p>
</body>
</html>