CSS选择器详情介绍(语法、说明、层叠性、选择器的优先级)

最新推荐文章于 2022-11-21 14:27:04 发布

大西同学

最新推荐文章于 2022-11-21 14:27:04 发布

阅读量350

点赞数 4

分类专栏： HTML 文章标签： html css

本文链接：https://blog.csdn.net/weixin_49272677/article/details/113781087

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS选择器篇

1、标记选择器：
说明：所有页面的标签都叫标签选择器
例如：h1-h6、p、a、table、ul、ol、li、dl、dt、dd等标签。
2、class选择器(.)
说明：class选择器也叫类选择器，在标签身上用class调用，可以多次使用，在样式表里面以**.**（点）调用

<style>
	.top{
		width: 100px;
		height: 100px;
    }
</style>

<body>
    <div class="top"></div>
</body>

3、通配符选择器(*)
说明：通配符选择器含义是所有标签。表示该样式适用所有网页的元素。一般用来清除网页的内外边距（重置样式）
基本语法

<style>
    *{
        padding: 0px;
        margin: 0px;
    }    
 </style>

4、后代选择器
说明：选择符1和选择符2用空格隔开，含义就是选择符1中包含的所有选择符2。
例如：基本语法

<style>
	div ul li{
		font-size: 14px;
	}
</style>

<body>
    <div class="top">
        <ul>
            <li>我是通过后代选择器被选中的</li>
        </ul>
    </div>
</body>

5、id选择器（#）
说明：可以给每个元素使用id选择器，但id是元素的唯一标识符，不可出现重复的id名。
最大的用处：创建网页的外围结构。(唯一性、起名字不能使用关键字)
例如：基本语法

<style>
	#box{
		width: 100px;
		height: 100px;
	}
</style>

<body>
    <div id="box"></div>
</body>

6、群组选择器
说明：当有多个选择符应用相同的样式时，可以将选择符用“，”分隔的方式，合并为一组。
例如：基本语法

<style>
	div,h1,p{
		font-size: 16px;
		color: red;
	}
</style>

<body>
    <div>我是大哥</div>
    <h1>我是二哥</h1>
    <p>我是三弟</p>
</body>

7、伪类选择器
说明：1、当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为:a,a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效；
2、为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中；
例如：a{color:red;} a:hover{color:green;}
例如：基本语法

<style>
	a:link {color: red;}  /* 未访问的链接状态 */
	a:visited {color: green;} /* 已访问的链接状态 */
	a:hover {color: blue;} /* 鼠标滑过链接状态 */
	a:active {color: yellow;} /* 鼠标按下去时的状态 */
</style>

<body>
    <a href="#">我是超链接</a>
</body>