CSS选择器

Posted

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选择器的主要内容,如果未能解决你的问题,请参考以下文章

css都有哪些选择器

css都有哪些种类的选择器

CSS3选择器入门

css选择器

夯实基础--CSS=> 基础选择器

css选择器 列表样式