CSS选择器

最新推荐文章于 2024-09-09 09:01:46 发布

dudu5666

最新推荐文章于 2024-09-09 09:01:46 发布

阅读量865

点赞数 12

文章标签： css tensorflow 前端

本文链接：https://blog.csdn.net/dudu5666/article/details/140891495

版权

CSS选择器

选择器基本格式

selector{
    属性：值；
    属性1：值1；
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 定义一个给谁用的样式，即内部样式
     <style>
        div{
            color: hotpink;
            background-color: lightblue;
        }
     </style>
      -->
     <!-- 链接一个css的文件——外部样式 -->
      <link rel="stylesheet" href="css/css选择器.css">
</head>
<body>
    <ul>
        <li>hello01</li>
        <li>hello02</li>
        <li>hello03</li>  
        <li>hello04</li>
        <li>hello05</li>
    </ul>
</body>
</html>

一、基本选择器

1.元素选择器：用元素名称直接选择

div{
    color: hotpink;
    background-color: lightblue;
}

特例：选择所有元素 *

*{
    color: hotpink;
    background-color: lightblue;
}

2.属性选择器

div[id]有id属性的div元素

div[id=xx]有id属性，且id属性值为xx的div元素

div[id*=xx]有id属性，且id属性值包含xx的div元素

div[id^=xx]有id属性，且id属性值以xx开头的div元素

div[id$=xx]有id属性，且id属性值以xx结尾的div元素

div{
    color: rgb(105, 188, 255);
    background-color: rgb(89, 131, 32);

}
div[id*=aaxx]{
    color: rgb(105, 188, 255);
    background-color: rgb(89, 131, 32);

}
div[id^=aaxx]{
    color: rgb(105, 188, 255);
    background-color: rgb(89, 131, 32);

}
div[id$=aaxx]{
    color: rgb(105, 188, 255);
    background-color: rgb(89, 131, 32);

}

3.id选择器

//xx是类名
div#xx {  
	color: rgb(105, 188, 255);    background-color: rgb(89, 131, 32);}

4.class选择器

.xx{
    color: rgb(105, 188, 255);
    background-color: rgb(89, 131, 32);
}

特例：结合选择器

p.xx{
	color: rgb(105, 188, 255);
    background-color: rgb(89, 131, 32);
}

5.包含选择器 or后代选择器 selector1 selector2 空格强调包含

div p{
    color: rgb(105, 188, 255);
    background-color: rgb(89, 131, 32);

}

6.子选择器 selector1>selector2 >强调父子

css复盘以及常见问题总结_后代和子代选择器的区别是什么-CSDN博客

div>p{
    color: rgb(105, 188, 255);
    background-color: rgb(89, 131, 32);
}

7.兄弟选择器只招弟弟，不找哥哥，找所有弟弟用

/*第一个div之后的所有div*/
div+div{
}
/*第一个类名为axx的div后的相邻div弟弟 */
.axx+div{
}
/*以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素*/
div+p
{
  background-color:yellow;
}

特例：找所有弟弟

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

.cc~*{

div~p
{
  background-color:yellow;
}

8.选择器组合 selector1,selector2,selector3...

表示或者

p,
div a,
span{
}

二、伪元素选择器

1.首字母加样式 ::first-letter 只能用于竖着布局的元素，不能横着，比如span

div::first-letter{
	color:hotpink;
    background-color: lightblue;
}

2.首行加样式 ::first-line 只能用于竖着布局的元素，不能横着，比如span

div::first-line{
	color:hotpink;
    background-color: lightblue;
}

让每一个英文单词裂开【英语无法自动分词，如果是全部打aaaa的话】

div{
	word-break：break-all；
}

3.在前边插入 ::before

必须要写content，需要借此开辟空间

div::before{
	content:"aaa";
	color:hotpink;
    background-color: lightblue;
}

4.在后边插入 ::after

div::after{
	content:"aaa";
	color:hotpink;
    background-color: lightblue;
}

三、伪类选择器

1.结构性伪类选择器

$表示一个数字位

:nth-child()

只认数字，如果类型刚好符合，则被选中

括号里可以是数字n，n从1开始

也可以是英文单词odd 奇数 even偶数

还可以是表达式，比如2n+1，n从0开始

找第一个:nth-child(1)=first-child

找最后一个:last-child

倒着数 :nth-last-child()

ul li:nth-child(even){

}
ul li:nth-child(2n+1){

}

:nth-of-type()

既认数字也认类型，找同类型下的第n个元素

li:first-of-type=nth-of-type(1)

li:last-of-type

倒着：li:nth-last-of-type(){

ul li:nth-of-type(3n+2){
	color:
	background:
}

2.ui状态伪类选择器

:hover 鼠标悬停状态

ul li:hover{
}

:focus 焦点状态

ul li:focus{
}

:checked选中状态

input:checked{
	box-shadow:3px 3px 3px red
}

其他伪类选择器

:not(.类名)

ul li:not(.java){
}
ul li:not(.java):not(.php){
}

四、选择器的优先级规则

1.选择器写得越长（越准确），优先级越高

2.优先级高低 id选择器>class选择器>元素选择器

3.同级别长度下，css代码按照顺序执行，不同效果会叠加，后边的效果会把前面的覆盖掉

4.终极规则：以上规则使用大部分场景，特殊场景不适用，自行测试

dudu5666

关注

12
点赞
踩
14

收藏

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

3.同级别长度下，css代码按照顺序执行，不同效果会叠加，后边的效果会把前面的覆盖掉。div[id^=xx]有id属性，且id属性值以xx开头的div元素。div[id$=xx]有id属性，且id属性值以xx结尾的div元素。div[id*=xx]有id属性，且id属性值包含xx的div元素。div[id=xx]有id属性，且id属性值为xx的div元素。找第一个:nth-child(1)=first-child。倒着：li:nth-last-of-type(){div[id]有id属性的div元素。
复制链接

扫一扫