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

2021-02-10 13:29:32 阅读：150 来源： 互联网

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>

css层叠性
css层叠指的是样式的优先级，当产生冲突时以优先级高的为准。
1、开发者样式>读者样式>浏览器样式（除非使用!important标记）
2、id选择符>（伪）类选择符>元素选择符
3、权重相同时取后面定义的样式

选择器的优先级
行内样式(1000)>id选择器(100)>class选择器>标签选择器(1)>继承(0)
!important 提升某个选择器的优先级，部分浏览器不识别。
注意：如果权重相同时，则执行后写的样式；

标签：优先级,样式,id,color,选择符,选择器,CSS
来源： https://blog.csdn.net/weixin_49272677/article/details/113781087

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

CSS选择器篇