Selector 选择器 CSS

1.标记选择器,通过HTML标签定义选择器

p{background-color:blue;color:red}

上面p代表段落标签,表示将所有段落背景和前景颜色分别设为蓝色和红色;也可用其他字母表示其他标签

2.类别选择器。网页元素通过class属性定义类别,选择器在类别前加一个

"cs1">段落正文

.cs1{font-family:华文行楷;font-size:15px}

3.ID选择器,使用id定义选择器。网页元素通过id属性定义id,选择器在类别前加#

"cs1">段落正文

#cs1{font-family:华文行楷;font-size:15px}

4.伪类选择器:为元素的特定状态设置样式。如a:link, a:visited ,a:hover, a:active

a:hover{font-size : 30px ;color : red ;}

表示鼠标滑过链接时,文字大小和颜色发生改变。

5.复合选择器:包括并集、交集、后代选择器等。

  • 并集选择器:多个选择器通过逗号连接,表示多个选择器共用一种样式。

h1, h2, h3, h4, h5, p{color:blue;font-size:15px; }

  • 交集选择器:由两个选择器直接连接构成,结果是两个选择器定义的元素的交集。通常情况下,第1个选择器是标记选择器,第2个是类别选择器

p.special{color:red;}

  • 后代选择器:外层选择器写在前面,内层选择器写在后面,中间用空格分隔。表示嵌套在外层元素的内层元素使用样式。可以多层嵌套。这里的后代不仅限于直接后代,也会影响到各级后代,如果只想影响直接后代,可以使用子选择器:选择器之间用>分隔

p span{color:red;}

  • 兄弟选择器:用+或~分隔,A+B表示紧邻A的B元素,A~B表示A后所有兄弟B节点。

    <html>

    <head>

    <style type="text/css">

        h1 + p {

           color:red;

      }

    style>

    head>

    <body>

    <h1>heading.h1>

    <p>paragraph1.p>

    <p>paragraph2.p>

    <p>paragraph3.p>

    body>

    html>

6.*  代表全部均用此属性

*  {  color:red;   } 

7.     :first-child     /   :last-child   /   :only-child 

某个标签中包含的第一个/最后一个/只有一个的子元素

  :first-child     /   :last-child   /   :only-child 

Selector 选择器 CSS_第1张图片 

apple、pickle可用plate :only-child{  } 定义

apple可用plate :first-child{   }定义

最后一个pickle可用div  :last-child{   }定义

 8.   其他

:nth-child(A)     定义标签下的第A个子元素

:nth-last-child(A)       定义标签下的倒数第A个子元素

:first-of-type             定义标签下的第1个子元素

:nth-of-type(A)        定义标签下的第A个子元素 (A可以是odd(奇数个)或even(偶数个))

:nth-of-type(An+B)     在第n的类公式选择每第n个元素开始,在该元素的特定实例计数  

:only-of-type          在另一个元素中选择其类型的唯一元素

:last-of-type           选择另一个元素中该类型的最后一个元素

:empty                   选择其中没有任何其他元素的元素

:not(x)                   选择与选择器“X”不匹配的所有元素

你可能感兴趣的:(HTML,CSS,JS,css,前端,html)