css基础选择器

最新推荐文章于 2024-07-08 11:32:20 发布

7束QW

最新推荐文章于 2024-07-08 11:32:20 发布

阅读量254

点赞数 2

分类专栏： css基础选择器文章标签： css css3

本文链接：https://blog.csdn.net/v8min/article/details/109541181

版权

css基础选择器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css基础选择器

选择器

1.元素选择器

匹配页面所有相同的元素，即页面中相同的元素有相同的样式声明使用。

2.ID选择器

尽量少用，页面中某个元素特殊的样式声明

#idName{

}

3.类选择器

同一页面中任何元素（只需要class的属性值相同）有相同样式声明class的属性值可以写多个

.className{

}

4.通配符选择器

能匹配页面里面的所有元素

*{

}

5.属性选择器

根据属性名和属性值选中元素

6.伪类选择器

伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。

选中某些元素的某种状态

属性	描述
:link	向未被访问的链接添加样式
:visited	向已被访问的链接添加样式
:hover	当鼠标悬停在元素上方时，向元素添加样式
:active	向被激活的元素添加样式
:focus	向拥有键盘输入焦点的元素添加样式
:first-child	向父元素的第一个子元素添加样式
:lang	向带有指定lang属性的元素添加样式
:last-child	向父元素的最后一个子元素添加样式
:only-child	向父元素仅有的一个子元素添加样式
:nth-child(n)	向父元素的第n个子元素添加样式
:nth-last-child(n)	向父元素的倒数第n个子元素添加样式
first-of-type	向同类型中的第一个同级兄弟元素添加样式
last-of-type	向同类型中的最后一个同级兄弟元素添加样式
only-of-type	向同类型中唯一的一个同级兄弟元素添加样式
nth-of-type(n)	向同类型中的第n个同级兄弟元素添加样式
nth-last-of-type(n)	向同类型中的倒数第n个同级兄弟元素添加样式
empty	向没有任何子元素的元素添加样式
checked	向用户界面处于被选中状态的元素添加样式（用input type为radio 与checbox时）
enabled	向用户界面处于可用状态的元素添加样式
disabled	向用户界面处于被禁止状态的元素添加样式
target	向相关URL指向的元素添加样式

7.伪元素选择器

属性	描述
:first-letter(::first-letter)	设置对象内的第一个字符样式
:first-line(::first-line)	设置对象内的第一个行样式
:before(::before)	设置在对象前发生的内容
:after(::after)	设置在对象后发生的内容
::placeholder	设置对象文字占位符的样式
:selection	设置对象被选择时的颜色

伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器

二者区别：
伪类的效果可以通过添加实际的类来实现
伪元素的效果可以通过添加实际的元素来实现

注意：
伪类只能使用“：”
而伪元素既可以使用“:”，也可以使用“::”

选择器的组合

1.层级关系

后代元素空格隔离

<style>
        .box p {
            color: brown;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>

    </div>
</body>

子元素 >

  <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: burlywood;
        }
        
        .box>.son {
            border: 1px solid black;
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="son">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>

    </div>
</body>

2.兄弟元素

==注意：==兄弟元素设置的样式是它兄弟的不是它的

相邻兄弟元素紧跟的兄弟元素 +

 <style>
        .box+.head {
            width: 300px;
            height: 300px;
            background-color: burlywood;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
    <div class="head"></div>

兄弟元素 ~

 <style>
        .head {
            width: 200px;
            height: 200px;
            background-color: chartreuse;
            border: 1px solid black;
        }
        
        .box~.footer {
            width: 300px;
            height: 300px;
            background-color: burlywood;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
    <p class="txt">Lorem ipsum dolor sit amet.</p>
    <div class="head"></div>
    <div class="footer"></div>

3.选择器的并列

多个选择器用逗号隔开

<style>
        .head,
        .box {
            width: 300px;
            height: 300px;
            background-color: burlywood;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
    <div class="head"></div>
</body>

CSS是层叠样式当样式声明有冲突时用下面方法解决

1.比较重要性

作者样式中的!important样式 IE版本太低不支持，打破了优先级原则，只要有它在它就是最高的

作者样式表中设置的样式

浏览器默认表中的样式

2.比较特殊性

看选择器，选择器的优先级，

规则：通过选择器，计算出一个四位数的选择器（xxxx）

千位：如果是内联（行内）样式，记1 否则记0

百位：统计选择器中所有ID选择器的数量

十位：统计选择器中所有类选择器、属性选择器、伪类选择器的数量

个位：统计选择器中所有元素选择器、伪元素选择器的数量

注意：四个数不是十进制的数，不要看进位的情况

3.比较源次序

就近原则，后来者居上

7束QW

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础选择器

css基础选择器选择器1.元素选择器匹配页面所有相同的元素，即页面中相同的元素有相同的样式声明使用。2.ID选择器尽量少用，页面中某个元素特殊的样式声明#idName{}3.类选择器同一页面中任何元素（只需要class的属性值相同）有相同样式声明class的属性值可以写多个.className{}4.通配符选择器能匹配页面里面的所有元素*{}5.属性选择器根据属性名和属性值选中元素6.伪类选择器伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选
复制链接

扫一扫