CSS选择器

Posted 2023-05-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS选择器相关的知识，希望对你有一定的参考价值。

参考技术A id：指定标签的唯一标识，定位到页面上唯一的元素。
使用场景：使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上。

class ：类选择器，指定标签的类名，定位到页面上某一类的元素。
使用场景：使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时。

* /* a=0 b=0 c=0 d=1 -> 0,0,0,0 */
p /* a=0 b=0 c=0 d=1 -> 0,0,0,1 */
a:hover /* a=0 b=0 c=1 d=1 -> 0,0,1,1 */
ul li /* a=0 b=0 c=0 d=2 -> 0,0,0,2 */
ul ol+li /* a=0 b=0 c=0 d=3 -> 0,0,0,3 */
h1+input[type=hidden] /* a=0 b=0 c=1 d=2 -> 0,0,1,1 */
ul ol li.active /* a=0 b=0 c=1 d=3 -> 0,0,1,3 */
#ct .box p /* a=0 b=1 c=1 d=1 -> 0,1,1,1 */
div#header:after /* a=0 b=1 c=0 d=2 -> 0,1,0,2 */
style="" /* a=1 b=0 c=0 d=0 -> 1,0,0,0 */
先比较a，a大的权重最大，再依次比较b，c，d

#header

id选择器，匹配特定id为header的元素

.header

类选择器，匹配class包含header的元素

.header .logo

后代选择器，匹配class为header元素所有的后代（不只是子元素、子元素向下递归）
calss为logo的元素

.header.mobile

匹配class既有header又有logo的元素

.header p, .header h3

同时匹配class为header所有后代元素p和class为header所有后代元素h3

#header .nav>li

匹配id为header元素所有后代中calss为nav的所有直接子元素li

#header a:hover

匹配id为header所有后代中鼠标悬停其上的a元素

#header .logo~p

匹配id为header所有后代中class为logo之后的同级元素p（无论直接相邻与否）

#header input[type="text"]

匹配id为header所有后代中属性type值为text的元素

n的取值
1，2，3，4，5
2n+1, 2n, 4n-1
odd, even

<style> .item1:first-child color: red; .item1:first-of-type background: blue; </style> <div class="ct"> <p class="item1">aa</p> <h3 class="item1">bb</h3> <h3 class="item1">ccc</h3> </div>

css选择器

参考技术A

CSS（Cascading Style Sheet），中文译为层叠样式表，可以让设计者方便灵活地控制Web页面的外观表现。CSS是1996年由W3C审核通过并且推荐使用的。CSS的引入，就是为了使HTML语言更好地适应网页的美工设计。CSS详细规范说明要查阅CSS手册，或登录W3C官网（ http://www.w3c.org ）。
使用CSS，要了解常用的各种选择器。
1.标记选择器：
一个HTML页面由很多不同的标记组成，而CSS选择器就是声明哪些标记采用哪种CSS样式。每一种HTML标记的名称都可以作为相应的标记选择器的名称。示例：

每一个选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一标记名称声明多种样式。CSS语言对于所有属性和值都有相对严格的要求，如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。还有一种通配选择器“*”，表示其中设置的样式会应用于所有的网页元素。示例：

<html><head><title>class选择器</title>
<style type="text/css">
.red color: red; font-size:18px;
.green color: green; font-size:20px;
</style></head>
<body>
<p class="red">class选择器1</p>
<p class="green">class选择器2</p>
<h3 class="green">h3使用class</h3>
</body>
</html>

<html><head><title>ID选择器</title>
<style type="text/css">
#bold font-weight: bold;
#green font-size:30px; color:#009900;
</style></head>
<body>
<p id="bold">ID选择器1</p>
<p id="green">ID选择器2</p>
</body></html>

<html><head><title>交集选择器</title>
<style type="text/css">
p / 标记选择器 / color: blue;
p.special / 标记.类别选择器 / color: red;
.special / 类别选择器 / color: green;
</style></head>
<body>
<p >普通段落文本（蓝色）……</p>
<h3 >普通标题文本（黑色）……</h3>
<p class="special">指定了.special类别的段落文本（红色）……</p>
<h3 class="special">指定了.special类别的标题文本（绿色）……</h3>
</body>
</html>

<html><head><title>并集选择器</title>
<style type="text/css">
h1,h2,h3.h4.h5.p / 并集选择器 / color: purple; font-size:15px;
h2.special,.special,#one / 集体声明 / text-decoration:underline;
</style></head>
<body>
<h1 >示例文字h1……</h1>
<h2 class=”special” >示例文字h2……</h2>
<h3 >示例文字h3……</h3>
<p >示例文字p1……</p>
<p class="special">示例文字p2……</p>
<p id="one">示例文字p3……</p>
</body></html>

<html><head><title>后代选择器</title>
<style type=”text/css”>
p span / 嵌套声明 / color: red;
span color:blue;
</style></head>
<body>
<p >嵌套使<span>用CSS（红色）</span>标记的方法</p>
嵌套之外的<span>标记（黑色）</span>不生效
</body></html>

:hover :visited :active :first-line :first-letter :first-child :nth-child :nth-of-type :nth-last-child
:nth-last-of-type

以上是关于CSS选择器的主要内容，如果未能解决你的问题，请参考以下文章