CSS 选择符

最新推荐文章于 2021-06-05 01:23:23 发布

Oranq

最新推荐文章于 2021-06-05 01:23:23 发布

阅读量379

点赞数 1

分类专栏： javaScript

本文链接：https://blog.csdn.net/qijuju/article/details/52096861

版权

javaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS 选择符（也称：选择器）

元素选择器
关系选择器
属性选择器
伪类选择器
伪对象选择器

元素选择器

通配符：*{ }———用处：初始化，如内、外边距设置为0
类选择符 : .类名称{ }
ID选择符 : #类名称{ }
类型选择符 (标签选择符) ：标签{ }

关系选择器

子元素选择符：父亲 > 儿子，⚠️不包括其孙子
兄弟选择符：你自己～你的兄弟，⚠️就是同级别的标签,效果是：⚠️1、自己不起作用；2、它对向上的元素没有效果；
相邻选择符：E ＋F，⚠️同级别的相邻的元素。语法：元素＋元素。选择紧贴在E元素后的F元素
包含选择符：E F ，⚠️就是选择它所有的子元素，包括孙子及孙子的孙子.语法：元素E和元素F用空格隔开。

例：

div >p{
    color: red;  
}

p~p{
    color:red;
}
p~h3{
    color:red;
}

p+p{

    color:blue;
}

ol li{
    color: green;
}

属性选择器

1. 1. 当前元素［属性］｛｝。例： <style>
    a[href]{
    color: red; 属性选择器的写法
    }
    </style>
    </head>
    <body>
    
    <a href="#"> hahha </a> －－变色
    <a> eieieeiei </a> －－－－－不变色
  2. 当前元素［属性＝“属性值”］｛｝。例：<style>
    a[href="www.baidu.com"]{
    font-size: 50px;
    color: green;
    }
    
    </style>
    <a href="www.baidu.com"> 百度一下</a>
    <a href="www.baidu2.com"> 百度一下2</a>
    <a href="www.baidu3.com"> 百度一下3</a>
    <a href="www.baidu4.com"> 百度一下4</a>
    <a href="www.baidu4.com"> 百度一下5</a>

伪类选择器

定义：它允许给html标签的某种状态设置样式。

1）元素link ：设置超链接a在未被访问前的样式；

2）元素visited ：设置超链接a在其链接地址已被访问过时的样式；(避免二次访问)

3）元素hover ：设置元素在其鼠标悬停时的样式；

4）元素active ：设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。鼠标点下并未释放时的状态。

例：

<head>
    <meta charset="UTF-8">
    <title>伪类选择符</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        ul li a{
            font-size: 50px;
        }

        ul li a:link{
            color:red ;
        }

        ul li a:visited{
            color:blue;
        }

        ul li a:hover{
            color:green ;
        }

        ul li a:active{
            color:purple;
        }

    </style>
</head>
<body>
<ul>
    <li>
        <a href="#">伪类选择符,,,</a>
    </li>
</ul>
</body>

注意⚠️：

1）a：hover 必须位于a：link 和a：visited之后，a：active必须位于a：hover之后；

2）可靠的顺序是：l（link）ov（visited）eh（hover）a（active）te，可以借助love和hate两个单词来记忆。

伪对象（伪元素）选择器

元素：before｛｝：设置在对象前发生的内容。用来和content 属性一起使用，并且必须定义content属性。
元素：after ｛｝：设置在对象后发生的内容。用来和content 属性一起使用，并且必须定义content属性。

总结：选择器的优先级

！important > 内联 > ID > 类 > 标签｜伪类｜属性选择器 > 伪对象 > 继承 > 通配符。⚠️注意：！important要写在属性值的后面，分号的前面。例：p｛

color :red ! important;

｝

优先级是有数值的：！important ～无穷大；内联～1000；ID～100；类～10，标签～1.数值越大，优先级越高。

例：<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style>
        span{
            /*1*/
            color: red;
        }
        p span{
            /*1+1=2*/
            color: orange;
        }
        p .c1{
            /*1+10=11*/
            color:yellow;
        }
        p #d1{
            /*1+100=101*/
            color: green;
        }
        /*至此,内容的颜色为 green, 要想内容的颜色为red,可以加!important*/
        span{

            color: red !important;
        }

    </style>
</head>
<body>

<p>
    <span class="c1" id="d1">选择器的优先级</span>
</p>

</body>

Oranq

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS 选择符

CSS 选择符（也称：选择器）元素选择器关系选择器属性选择器伪类选择器伪对象选择器元素选择器通配符：*{ }———用处：初始化，如内、外边距设置为0类选择符 : .类名称{ }ID选择符 : #类名称{ }类型选择符 (标签选择符) ：标签{ }关系选择器子元素选择符：父亲 > 儿子，⚠️不包括其孙子兄弟选择符：你自己～
复制链接

扫一扫

专栏目录