python 之 前端开发(基本选择器、组合选择器、 交集与并集选择器、序列选择器、属性选择器、伪类选择器、伪元素选择器)

11.3 css

11.31 基本选择器

11.311 id选择器

根据指定的id名称,在当前界面中找到对应的唯一一个的标签,然后设置属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #p1 {color: red;}               引用id一定要加#
        #p2 {color: green;}
        #p3 {color: blue;}
    style>
head>
<body>
<p id="p1">大多数人的帅,都是浮在表面的,是外表的帅p>
<p id="p2">而我,不仅具备外表帅,内心更是帅了一逼p>
<p id="p3">就是我,我就是p>
body>
html>
11.312 类选择器

作用:根据指定的类名称,在当前界面中找到对应的标签,然后设置属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .p1 {color: red;}           #引用class一定要加点.
        .p2 {font-size: 50px;}
        .p3 {text-decoration: underline;}
    style>
head>
<body>
<p class="p1">大多数人的帅,都是浮在表面的,是外表的帅p>
<p class="p2">而我,不仅具备外表帅,内心更是帅了一逼p>
<p class="p3">那就是我p>

<p class="p1 p2">大多数人的帅,都是浮在表面的,是外表的帅p>
<p class="p2 p3">而我,不仅具备外表帅,内心更是帅了一逼p>
<p class="p3 p1">那就是我p>
body>
html>
11.313 标签选择器

作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        p {color: red;}
    style>
head>
<body>
<p>美丽的外表下其实隐藏着一颗骚动的心p>
<ul>
    <li>
        <p>这颗心叫做七巧玲珑心,男人吃了会流泪,女人吃了会怀孕p>     
    li>
ul>
body>
html>

注意: 1、只要是HTML的标签都能当做标签选择器 2、标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签 3、标签选择器,无论嵌套多少层都能选中

11.314 通配符选择器

作用:选择所有标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        * {color: red;}             #把所有的标签设置相同的属性
    style>
head>
<body>
<h1 >我是标题h1>
<p >我是段落p>
<a href="#">我是超链接a>
body>
html>

11.32 组合选择器

11.321 后代选择器

作用:找到指定标签的所有后代(儿子,孙子,重孙子、、、)标签,设置属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .part1 p {color: red;} # 1 找到part1下的所有p标签,添加属性
        #id1 ul p {color: red;} # 2 找到一个id='id1'下的ul下的所有p标签
    style>
head>
<body>
  <p>我是body下的段落1p>
    <div id="id1" class="part1">
        <p>我是div下的段落1p># 1
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1p># 1   2
            li>
        ul>
    div>
    <div>
        <p>hahahahahp>
    div>
    <p>我是body下的段落2p>
body>
html>

注意:1、后代选择器必须用空格隔开 2、后代不仅仅是儿子,也包括孙子、重孙子 3、后代选择器不仅仅可以使用标签名称,还可以使用其他选择器比如id或class 4、后代选择器可以通过空格一直延续下去

11.322 子元素选择器

作用:找到指定标签的所有特定的直接子元素,然后设置属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        #id1>p {color: red;}      # 1 找到id='id1'下的子标签p,添加属性
        .part1 ul .aaa>a {color: red;}
    style>                     #2 找到class='part1'下的所有标签ul下的class=aaa的子标签a,添加属性
head>
<body>
  <p>我是body下的段落1p>
    <div id="id1" class="part1">
        <p>我是div下的段落1p>            # 1
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1p>
                <a href="">点我啊1a>     # 2
                <p> <a href="">点我啊2a> p>
            li>
            <li>
                <a href="#">点我啊3a>
            li>
        ul>
    div>
    <div>
        <p>hahahahahp>
    div>
  <p>我是body下的段落2p>
  <a href="#">百度一下a>
body>
html>

注意: 1、子元素选择器之间需要用>符号链接,并且不能有空格,比如div >p会找div标签的所有后代标签,标签名为">p" 2、子元素选择器只会查找儿子,不会查找其他嵌套的标签 3、子元素选择器不仅可以用标签名称,还可以使用其他选择器,比如id或class 4、子元素选择器可以通过>符号一直延续下去

11.323相邻兄弟与通用兄弟选择器

相邻兄弟选择器:只能选中紧跟其后的那个标签,不能选中被隔开的标签

通用兄弟选择器:给指定选择器后面的所有选择器中的所有标签设置属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器title>
    <style type="text/css">
        #相邻兄弟选择器
        h1+p {color: red;}#相邻兄弟选择器必须通过+号链接  x
        #通用兄弟选择器
        h1~p {color: red;}#通用兄弟选择器必须用~来链接   y
    style>
head>
<body>
    <h1>我是标题1h1>
    <a href="">有了这个标签,p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中a>
    <p>我是段落p> #y
    <p>我是段落p> #y
    <h1>我是标题2h1>
    <p>我是段落p> #x      y
body>
html>

11.33 交集与并集选择器

11.331 并集选择器

作用:给所有满足条件的标签设置属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        p,a {color: red;}               #找到所有p标签和a标签,添加属性
    style>
head>
<body>
    <h1>哈哈啊h1>
    <p class="part1">我是段落1p>
    <a href="#" class="part2">a标签a>
body>
html>

注意: 1、选择器与选择器之间必须用逗号来链接 2、选择器可以使用标签名称、id、class

11.332 交集选择器

作用:给所有选择器选中的标签中,相交的那部分标签设置属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        a.part2 {color: red;}           #找到同时有a标签且,添加属性
    style>
head>
<body>
    <h1>哈哈啊h1>
    <p class="part2">我是段落2p>
    <a href="#" class="part2">a标签1a>  #此处文本变成红色
    <a href="#">a标签2a>
body>
html>

注意: 1、选择器与选择器之间没有任何链接符号 2、选择器可以使用标签名称、id、class

11.34 序列选择器

#2.1 同级别
:first-child    p:first-child    同级别的第一个
:last-child    p:last-child      同级别的最后一个
:nth-child(n)                    同级别的第n个
:nth-last-child(n)               同级别的倒数第n个
#2.2 同级别同类型
:first-of-type                   同级别同类型的第一个
:last-of-type                    同级别同类型的最后一个
:nth-of-type(n)                  同级别同类型的第n个
:nth-last-of-type(n)             同级别同类型的倒数第n个
#2.3 其他
:only-of-type                    同类型的唯一一个
:only-child                     同一级别唯一一个
11.341同级别序列选择器
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        p:first-child {color: red;}     #同一级别第一个p  x
        p:last-child {color: red;}      #同一级别倒数第一个p  y
        p:nth-child(3) {color: red;}    #同一级别第3个p  z
        p:nth-last-child(3) {color: red;}#同一级别倒数第3个p  w
    style>
head>
<body>
<h1>我是标题1h1> 
<p>我是段落1p>        
<a href="">aaaaaa>
<p>我是段落2p>
<p>我是段落3p>        #w
<p>我是段落4p>
<p>我是段落5p>        #y
<div>
    <p>我是段落6p>    #x  w
    <a href="">我是a标签a>
    <h1>我是标题2h1>
div>
body>
html>
11.342同级别同类型序列选择器
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        p:first-of-type {color: red;}           # 同级别同类型的第一个p  x
        p:last-of-type {olor: red;}             # 同级别同类型的倒数第一个p  y
        p:nth-of-type(3) {color: red;}          # 同级别同类型的第3个p   z
        p:nth-last-of-type(3) {color: red;}      # 同级别同类型的倒数第3个p  u
        p:only-child {color: red;}              # 同一级别唯一一个p 不存在
        p:only-of-type {color: red;}            # 同类型的唯一一个 不存在
    style>
head>
<body>
<h1>我是标题1h1>
<p>我是段落1p>    #x
<a href="">aaaaaa>
<p>我是段落2p>
<p>我是段落3p>    #z  u
<p>我是段落4p>
<p>我是段落5p>    #y
<div>
    <a href="">我是a标签a>
    <p>我是段落6p>#x   u
    <p>我是段落7p>
    <p>我是段落8p>#y z
    <h1>我是标题2h1>
div>
<div>
    <p>我是独生子p>#x
    <p>我是独生子p>#y
    <a href="">我是二胎a>
    <a href="">我是二胎a>
div>
body>
html>

11.35 属性选择器

作用:根据指定的属性名称找到对应的标签,然后设置属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        [id] {color: red;}                         #找到所有包含id属性的标签  x
        h1[id] {color: red;}                       #找到所有包含id属性的h1标签  y
        [value] {width: 200px;height: 200px;}       #找到所有包含value属性的标签 z
        [] {color: red;}               #找到所有class属性值为part1的标签 u
        [class^="part"] {color: red;}               #找到所有class属性值以part开头的标签 v
        [class*="part"] {color: red;}               #找到所有class属性值包含part的标签 w
        [class$="yyy"] {color: red;}                #找到所有class属性值以yyy结尾的标签 o
        [value*="male"] {width:
请点击此处下载

请先注册会员后在进行下载

已注册会员,请先登录后下载

提取码: 
下载次数:0    下载所需积分:5 吾①币
下载权限: 注册会员  以上或 VIP会员   [购买VIP]   [充值铜板]  [免费赚铜板]


路过

雷人

握手

鲜花

鸡蛋
郑重提示

本站现该为邀请码注册下载,20元一个永久免费下载(除年费会员、永久会员专享和棋牌源码)源码资源

20元永久免费下载!

邀请一个会员注册即可领取10元

如有疑问可直接联系本站管理员:28840654

我知道了

平台简介

51源码论坛是国内新兴著名的商业网站源码资源站,收罗各类精品源码、完全整站源码、整站数据、免费源码、APP原生源码、E4A源码、dz模版、网站源码、dz插件、织梦模版、92Game等精品资源,提供各类网站;APP;软件安装教程,让小白变大神!另外提供链接交换、资源网站卖家中介、交换等等服务,致力为中国中小站长建站添动力!

QQ|Archiver|手机版|小黑屋|51源码网_我要源码 ( 皖ICP备17028231号-3 ) 知道创宇云安全

返回顶部