css中常用的选择器

最新推荐文章于 2022-12-05 22:07:00 发布

目戈元

最新推荐文章于 2022-12-05 22:07:00 发布

阅读量797

点赞数

文章标签： css html5

本文链接：https://blog.csdn.net/m0_46115011/article/details/117937640

版权

之前学了的css今天在次用到发现了一些之前不知道的选择器，在此与大家分享一番

1. 标签选择器：选择范围广

语法：标签名{css属性名：属性值；}

2.(#)id选择器:#代表id --- 具有唯一性

语法：#id名{css属性名：属性值；}

3.(.)class选择器：选择所有的class属性一致的标签可以跨标签

语法：.class名{css属性名：属性值；} 支持多个名字，名字之间用空格隔开

优先级问题: id选择器>class选择器>标签选择器(通过div验证)

4.通配符选择器：*代表选择页面的所有标签(在练习的时候可以用在写项目的时候最好不要随便用)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
			/*标签选择器*/
            h1{
                background: aqua;
                border-radius: 50px;
            }
            #d2{
                font-size: 100px;
            }
            .a2{
                color: bisque;
            }
            div{
                background-color: red;
            }
            .bbb{
                background-color: pink;
            }
            #aaa{
                background-color: cyan;
            }
		</style>
	</head>
	<body>
		<div id="aaa" class="bbb">
            <h1>css</h1>
            <h1>js</h1>
            <h1>html</h1>
        </div>
        <p id="d2">id选择器</p>
        <h1 class="a2">标题2</h1>
        
	</body>
</html>

5.后代选择器：选择器用空格隔开例如：div p{css样式}

6.子元素选择器：表示符号：> 例如：div>p{css样式}

(只选择这个元素的儿子)

7.兄弟选择器：表示符号：~

只能选择下边的兄弟（标签下边的）

8.毗邻选择器：表示符号：+

只能选择下边第一个邻居

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            p{
                /*字体颜色*/
                color: red;
                /*字体粗细 normal正常  bold粗体  lighter细  100-900之间的数字 -- 自重*/
                font-weight: normal;
                /*文本修饰：none没有   overline上划线   underline下划线line-through删除线*/
                text-decoration: none;
            }
            .one{
                font-weight: normal;
                text-decoration: overline;
            }
            .two{
                font-weight: bold;
                text-decoration: underline;
            }
            .there{
                font-weight: lighter;
                text-decoration: line-through;
            }
            #box ul~li{
                font-size:  100px;
            }
        </style>

    </head>
    <body>
        <div id="box">
            <ul class="list">
                <li class="girl">123</li>
                <li class="girl beauty">456</li>
                <li>
                    <p class="girl"> 789</p>
                </li>
                <li>123</li>
            </ul>
            <h1 class="one">normal是正常的意思</h1>
            <h1 class="two">bold是加粗的意思</h1>
            <h1 class="there">lighter的是变细意思</h1>
            <p>文本样式</p>
        </div>
    </body>
</html>

9.属性选择器

1. = 表示绝对等于
2. *= 表示包含
3. ^= 以这个元素开头
4. $= 以这个元素结尾
格式 : 标签[属性=属性值]{css样式}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>

           /*
            [属性名=“属性值”]{css样式}
            选择器名[属性名=“属值性”]{css样式}
            包含：
                a[class *= "包含内容"]{css样式}
            绝对:
                a[class="aa1"]{font-size: 100px;}
            以这个元素开头：
                a[class^="a"]{font-size: 100px;}
            以这个元素结尾：
                a[class $= "1"]{font-size: 100px;}
            */
            /*a[class *= "aa1"]{
                text-decoration: none;
            }*/
            a[class $= "1"]{
                font-size: 100px;
            }

        </style>
    </head>
    <body>
        <div class="box">
            <a href="https://www.baidu.com/" class="a aa1" target="_blank" title="a连接" id="ab">a连接 </a>
            <a href="https://www.baidu.com/" class="faaa a3" target="_blank" title="a连接" id="aac">a连接 </a>
            <a href="https://www.baidu.com/" class="faa aa1" target="_blank" title="a连接" id="aaa">a连接 </a>
        </div>
    </body>
</html>

10.结构伪类选择器

first-child：选择父盒子里边的第一个儿子-----相反last-child
nth-child（n）：选择父盒子里边的某一个元素
1. n：为自然数，最小值为1
2. odd：为奇数
3. even：偶数
nth-last-child（n）：倒数
nth-of-type（n）：父元素内具有指定类型元素的第几个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
</head>
    <style>
        ul li:first-child{
            background: #1531be;
        }
        ul li:last-child{
            background: aqua;
        }
        ol li:nth-child(2) {
            background: #ca0a63;
        }
		ol li:nth-last-child(1){
			background: pink;
		}
		#aaa>li:nth-child(1){
			font-size: 100px;
		}
		#aaa>li:nth-child(odd){
			background-color: yellow;
		}
		#aaa>li:nth-child(even){
			background-color: red;
		}
    </style>
<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <ul>
        <li>p4</li>
        <li>p5</li>
        <li>p6</li>
    </ul>
    <p>p7</p>
    <ol>
        <li>p8</li>
        <li>p9</li>
        <li>p10</li>
    </ol>
	<ol id="aaa">
        <li>aaaaaaaaaa</li>
        <li>bbbbbbbbbb</li>
        <li>cccccccccc</li>
        <li>dddddddddd</li>
        <li>eeeeeeeeee</li>
    </ol>
</body>
</html>

以上就是我认为比较常用的选择器，若大家认为还有其他常用评论中进行补充。

目戈元

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css中常用的选择器

之前学了的css今天在次用到发现了一些之前不知道的选择器，在此与大家分享一番1. 标签选择器：选择范围广语法：标签名{css属性名：属性值；}2.(#)id选择器:#代表id --- 具有唯一性语法：#id名{css属性名：属性值；}3.(.)class选择器：选择所有的class属性一致的标签可以跨标签语法：.class名{css属性名：属性值；} 支持多个名字，名字之间用空格隔开优先级问题: id选择器>cl...
复制链接

扫一扫