css如何选中奇数行

html-css014

css如何选中奇数行,第1张

odd代表奇数,even是偶数。

假设您的选择器是li的话,那么写法如下:

li:nth-child(odd) {

color: blue

}

这样您奇数行的li标签文字颜色就是蓝色的了。

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>

1、首先打开Vscode编辑器,新建一个HTML文档,用于承载表格和CSS。

2、然后新建一个5行3列的<table>表格备用。

3、接着定义一个内联样式,设置table表格的偶数行even背景色为浅灰色,奇数行odd的背景色为蓝色。

4、保存以上内容,在浏览器预览效果,就能看到奇数行景色为蓝色,偶数行背景色为浅灰色的效果了。