Skip to main content

选择器

css就是给html标签美化，如何正确的选到html标签，是最关键的，那就是选择器

标签选择器#

p {    color: red;}

没啥说的，太简单了

类选择器#

<body><p class="one"></p></body><style>    .one {        color: red;    }</style>

很简单就是选class名，class可以被多个标签使用

id选择器#

<body><p id="one"></p></body><style>    #one {        color: red;    }</style>

很简单就是选id,用#表示，id最好唯一不然会有错误

通配符选择器#

*{color:red;}

没啥好讲的就是选择页面里所有的元素

标签属性选择器#

/* 存在title属性的<a> 元素 */a[title] {  color: purple;}
/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */a[href="https://example.org"] {  color: green;}
/* 存在href属性并且属性值包含"example"的<a> 元素 */a[href*="example"] {  font-size: 2em;}
/* 存在href属性并且属性值结尾是".org"的<a> 元素 */a[href$=".org"] {  font-style: italic;}
/*表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。*/a[attr^=value]{  color:red;}

/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */a[class~="logo"] {  padding: 2px;}
/* 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。*/a[attr|=value]{  color:red;}


[*attr* *operator* *value* i]

在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

[*attr* *operator* *value* s]

在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

后代选择器#

<ul>    haha    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li></ul><style>ul li{    color:red;}</style>

很简单，就是ul空格 li

注意后代选择器是选择ul下的所有标签，包括li里的标签

子选择器#

子选择器就是选择父级节点下面的一个节点，不然选择到2级节点

如：

<div id="one">    <h1>title</h1>    <p>content</p>    <div id="two">        <p>1</p>        <p>2</p>    </div></div><style>          #one>p,h1{    color: red;}
</style>

最后只有title,content 是红色的

并集选择器#

div,p{}就是同时选择几个元素

伪类选择器#

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

伪元素选择器特别的多，但是其实并不多，为何这么说，因为不是所有的伪类都能在所有的元素标签上面用的，所以也不是很难记忆

比如 a变迁的几个伪类选择器

a标签伪类选择器#

a:link { color: blue; }          /* 未访问链接 */a:visited { color: purple; }     /* 已访问链接 */a:hover { background: yellow; }  /* 用户鼠标悬停 */a:active { color: red; }         /* 激活链接 */
p:active { background: #eee; }   /* 激活段落 */

：foucs#

获取焦点的表单元素

<input type="text"><input type="text"><input type="text"><style>input:focus{    background-color:palevioletred;}
</style>

点哪个input哪个就变样式

结构伪类选择器#

E:first-child匹配父元素中的第一个子元素
E:last-child最后一个
E:nth-child(n)匹配第n个元素
<ul>        <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>        <li>7</li>    </ul>    <style>    ul li:first-child{        color: red;    }    ul li:last-child{        color: blueviolet;    }    ul li:nth-child(3){        color: yellow;    }    </style>

最后就时1，3最后的颜色按照css的来

这里着重选下，nth-child(n)

当n是数字直接选择第几个

当n是公式，如2n,2n-1，此时n从0开始的整数，如2n就是所有偶数，2n+1就是所有基数

tr:nth-child(odd)

表示HTML表格中的奇数行。

tr:nth-child(even)

表示HTML表格中的偶数行。

span:nth-child(-n+3)

匹配前三个子元素中的span元素。

nth-of-type#

和nth-child一样，就是带一个类型选择

ul li:nth-of-type(3){        color: yellow;    }

把li排列然后选第3个li

伪元素选择器#

两个::before ::after

就是在指定元素前面，后面加东西

p::after{        content: 'xiaoyu';        color: red;    }

必须要有content，且不能为空，不然不生效

默认display是inline，改成inline-block可以做更多操作

如

p::before{        display: inline-block;        content: " ";        width: 10px;        height: 10px;        background: red;    }

这样，我们就可以直接 在前面加一个小方块了，当然你也可以做圆，三角了