css 常用选择器

最新推荐文章于 2024-10-13 19:30:05 发布

Hh....

最新推荐文章于 2024-10-13 19:30:05 发布

阅读量133

点赞数 2

文章标签： css html

本文链接：https://blog.csdn.net/qq_51129678/article/details/117534236

版权

基础选择器

标签选择器	div p li ……根据标签获取位置
Id选择器	通过id属性获取位置
类选择器	通过class获取位置
通配符选择器	*获取是全局位置

优先级顺序是：id选择器>类选择器>标签选择器>通配符选择器

标签选择器：

<style>

div {

color: deeppink;

}

</style>

</head>

<body>

</body>

效果：

你好

id选择器：

<style>

#name {

color:darkturquoise;

}

</style>

</head>

<body>

</body>

效果：

类选择器：

<style>

.user {

color:greenyellow;

}

</style>

</head>

<body>

</body>

效果：

类选择器：

<style>

* {

color:orangered;

}

</style>

</head>

<body>

</body>

效果：

组合选择器

后代选择器	指定元素所包含的所有元素都可选用。使用时先写指定元素再写所包含的元素，用空格隔开。
子选择器	指定标签的子标签的所有元素。使用时先写指定元素再写子元素。用>符号连接。
相邻兄弟选择器	指定元素和他下一个元素被选用。使用时先写被选用元素再写它的下一个元素，用+号连接。
通用兄弟选择器	指定元素和它的同级元素。使用时同级元素无先后顺序，用~符号连接。
选择器分组	选定的所有要设置相同样式的元素，用,号连接不分先后顺序。

选后代择器：

<style>

div span {color: orangered; }

</style>

</head>

<body>

</body>

效果：

2.子代选择器

<style>

div>p {color:springgreen; }

</style>

</head>

<body>

</body>

效果：

3.相邻兄弟选择器：

<style>

div+p { color:tomato;}

</style>

</head>

<body>

</body>

效果：

4.通用兄弟选择器：

<style>

div~p { color:violet;}

</style>

</head>

</body>

效果：

选择器分组：

div,p {color:blue;}

</style>

</head>

</body>

效果：

属性选择器：

Input[type*=”e”]	选择input标签中type属性中有e出现的。
Input[type^=”e”]	选择以e开始的input标签。
Input[type$=“l”]	选择以l结束的input标签。
div[tile]	选择div中带有title的标签

a标签的伪类选择器

link	设置链接点击之前的样式。
visited	链接点击过后的样式。
hover	鼠标接触到链接的样式。
active	鼠标点击链接不松手的样式。
focus	链接获得焦点

这些伪类的位置不能随意改变先后顺序是link visited hover active

实列：

<style>

a:link {color:greenyellow;}

a:visited{color:magenta;}

a:hover{ color: darkturquoise;}

a:active{color: darkred;}

</style>

</head>

<body>