精华内容
下载资源
问答
  • HTML选择器

    2014-11-01 21:45:42
    HTML选择器 HTML选择器 1、标签选择器 直接将HTML元素中的标签作为选择器,可以是p、h1、d1、strong等HTML标签,在CSS中直接展现。 2、ID选择器 通常在编写页面的时候设定某些标签元素的ID,同一个HTML...

    HTML选择器

    HTML选择器
    1、标签选择器
    直接将HTML元素中的标签作为选择器,可以是p、h1、d1、strong等HTML标签,在CSS中直接展现。
    2、ID选择器
    通常在编写页面的时候设定某些标签元素的ID,同一个HTML中ID不允许重复,例如,<div id="wrapper">,后来使用的时候就用#wrapper,这里的”#wrapper“就是ID选择器,在CSS中以”#“开头。
    3、类选择器
    CSS里面用”.“开头的表示类选择器,如有如下的CSS代码

    .error{
    color:red;
    font-size:14px;
    }

    在页面HTML的代码中,使用class="类别名"进行调用

    <span class="error">错误信息以红色显示</span>

    注意:类选择器和ID选择器比较类似,都是通过HTML元素添加属性而生效的,可应用在<body>内的任何元素上,不过和ID选择器不同的是,类选择器是可以重复的。例如可以像下面的代码这样设定:

    <div class="error">用户名不存在!</div>
    <p class="error">邮箱格式不正确!</p>

    也可以针对不同类型的元素对同一个名称的类选择器设定不同的样式规则,即使是相同名称的类选择器,也可以有不同的表现。例如,对于上面的HTML代码,可以修改CSS规则如下:

    复制代码
    div.error{
    color:red;
    font-size:14px;
    }
    
    p.error{
    color:green;
    font-size:14px;
    }
    复制代码

    4、后代选择器

    复制代码
    <h3>外部</h3>
        <div id="sider">
            <h3>内部</h3>
            <ul>
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
            </ul>
        </div>
    复制代码

    在这里,可以定义如下的CSS样式,就可以实现分层调用

    h3 {color:green;}
    #sider h3 {color:red;}
    #sider ul {color:red;}
    #sider ul li{color:red;}

    5、子元素选择器

    CSS样式设定如下:

    div > em {color:red;}

    HTML代码如下:

    <div>
    <em>这个em是div中的元素</em>
    <p>p中的<em>是p的子元素</p>
    </div>    

    显示效果为第一个<em>标签显示红色,而第二个<em>标签的子元素将不会应用此样式。

    6、相邻兄弟选择器
    表示样式应用于与该元素相邻的下一个元素

    div +p{color:red;}

    HTML代码如下:

    <p>与div相邻的上一个p</p>
    <div>
    <p>div中的p</p>
    </div>
    <p>与div相邻的下一个p</p>
    <p>不与div相邻的p</p>

    只有与div相邻的下一个p才会应用此样式

     

    展开全文
  • html选择器

    2019-05-11 11:23:40
    选择器 (权重:写在后面的优先) 类选择器选择器命名:不建议写特殊字符,不以数字开头,常用选择器 <style type="text/css"> <!--类选择器命名:不建议写特殊字符,不以数字开头,常用选择器--> ...

    选择器

    (权重:写在后面的优先)
    类选择器
    类选择器命名:不建议写特殊字符,不以数字开头,常用选择器

    <style type="text/css">
        <!--类选择器命名:不建议写特殊字符,不以数字开头,常用选择器-->
        .one{
            font-size:50px;
             }
        .two{
             color:red;
             }
    <!--类选择器-->
    <span class="one">展示</span><br>
    <span class="one">展示</span><br>
    <span class="one two">展示</span><br>
    

    10.9.2 id选择器

    id名不允许重复,唯一性–>

    <style type="text/css">
        #name1{
            color:yellow;
            }
        #name2{
            font-size: 50px;
            }
    </style>
    <!--id选择器-->
    <!--id名不允许重复,唯一性-->
    <span id="name1">展示</span><br>
    <span id="name2">展示</span><br>
    <span id="name1">展示</span>
    

    层级选择器–>

    <style type="text/css">
        ul li a{
            color:red;
            }
    
    </style>
    <style type="text/css">
        ul.father li.son{
            font-size:60px;
            }
    
    </style>
    
    <ul class="father">
        <li><a>展示1</a></li><br>
        <li class="son">展示2</li><br>
        <li>展示3</li><br>
    </ul>
    

    并集选择器

    <style type="text/css">
        div,p{
        font-size:50px;
        }
    </style>
    <div>展示1</div><br>
    <span>展示2</span><br>
    <p>展示3</p><br>
    

    指定标签选择器

    <style type="text/css">
        div.new{
        font-size:50px;
        }
    </style>
    
    <div class="new">展示1</div><br>
    <span>展示2</span><br>
    

    伪类选择器

    <style type="text/css">
        div::after{
            content:"python,java,color:#000;" ;
            color: aqua;
        }
        div::before{
            content: "计算机:";
            color: yellow;
        }
    </style>
    <!--伪类选择器-->
    <div>编程语言:</div>
    
    展开全文
  • Css 基本语法:选择器:{属性1:值1;属性2:值2.......} ...1.对于HTML选择器,用法:p{color:red},对于p,如果我们是行标记的话,就用tr,如果是表格标记的话就用table标记,等等 html选择器 p{color:red

    Css 基本语法:选择器:{属性1:值1;属性2:值2.......}

    例:h1{color:red;fond-size:14px}

    对于属性有4钟:HTML选择器,ID选择器,类选择器,属性选择器

    1.对于HTML选择器,用法:p{color:red},对于p,如果我们是行标记的话,就用tr,如果是表格标记的话就用table标记,等等

    <html>
    <head>
    	<title>html选择器</title>
    	<style type = "text/css">
    		p{color:red;font-weight:bold}
    	</style>
    </head>
    <body>
    	<p>这是一个段落。</p>
    </body>
    </html>


    2,对于ID选择器,用法:#test{color:red}, 这里的test,我们可以自己定义,注意是用#.

    在HTML文档中只能出现一次。同时对大小写敏感,推荐适用小写。

    <html>
    <head>
    	<title>ID选择器</title>
    	<style type = "text/css">
    		#test{color:blue;font-weight:bold}
    	</style>
    </head>
    <body>
    	<p id="test">这是一个段落。</p>
    </body>
    </html>


    3,对于类选择器,.用法:test{color:red},这里的test同ID选择器我们可以行定义,但不同的是前面用的是点.

    在HTML文档中可以出现多次。同时对大小写敏感,推荐适用小写。

    <html>
    <head>
    	<title>类选择器</title>
    	<style>
    		.test{color:red;font-weight:bold}
    	</style>
    </head>
    <body>
    	<p class="test">这是一个段落</p>
    </body>
    </html>
    


    4.对于属性选择器是带有指定属性的HTML元素设置样式

    用法:

    [align=center]{color:blue}

    //包含指定值,试用于由空格分隔的属性值

    [name~="t1"]{color:red}

    //包含指定值,适用由连字符分隔的属性值

    [name|="t"]{color:red}

    <html>
    <head>
    	<title>属性选择器</title>
    	<style type="text/css">
    		[align = "center"]{color:blue}
    		[name~="t1"]{color:red}
    		[name|="t"]{color:green}
    	</style>
    </head>
    <body>
    	<p align = "center">这是一个段落</p>
    	<p align = "center" name = "t t1">这是一个段落</p>
    	<p align = "center" name = "t-t1">这是一个段落</p>
    </body>
    </html>
    


    展开全文
  • 1、css使用的基本语法: 选择器 { 属性1:属性值; 属性2:属性值; 属性3:属性值;  . ...3、Css中常用的4种选择器: ...(1)、类选择器,又叫class选择器:  类选择器格式: . 类选择器{

    1、css使用的基本语法:

    选择器 {

    属性1:属性值;

    属性2:属性值;

    属性3:属性值;

             .

             .

             .

    }

    2、Css使用的必要性:

    (1)、统一网页不同个体的风格

    (2)、可以使用滤镜

    3、Css中常用的4种选择器:

    (1)、类选择器,又叫class选择器:

             类选择器格式:

    . 类选择器{

             属性名:属性值;

             ……

    }

     

    (2)、id选择器:

             Id选择器格式:

             #id选择器{

             属性名:属性值;

             ……

    }

    (3)、html元素选择器:

     

    html元素选择器格式:

    Html元素名称{

             属性名:属性值;

             ……

     

    }

    (4)、通配符选择器

    * {

    属性名:属性值;

                       ……

    }

    (5)、父子选择器

     

    #id1  span {
                      color:red;
                      font-size:60px;
                      font-style : italic ;
    }


    Ø  Css文件可以使用在各种文件中,如 .php, .html, .jsp, .asp, .net;

    Ø  各种选择器优先级比较:Id选择器 > class选择器 > html选择器 > 通配符选择器;

    Ø  父子选择器可以有多级,但实际开发中最好不要超过三层;

    Ø  父子选择器有严格的层级关系;

    Ø  父子选择器不局限于什么类型的选择器:

    如:

    #id1  span

    .s1  #id1 font

    Div   #id1  .s1

    这些形式均可以;

     

    Ø  一个元素可以同时被id,class选择器修饰;

    <span class="style1" id="id2">样式1一</span>

    Ø  同一个元素不能同时被两个id选择器修饰,一个元素只能有1个id选择器,但可以有多个class选择器;   <span class="style1  style2">样式1一</span>

    Ø  当修饰同一个元素的多个类选择器发生冲突时,则以写在css文件中的后面的哪个类选择器为准;

    Ø  在css文件中,如果有多个class、id选择器,他们有相同的部分,我们可以把相同的css样式放在一起;

    5、说明:

    css文件本身也会被浏览器下载到本地,才能显示效果。

    实例:

     

    <html>
    <head>
    <title>第二讲代码</title>
    <!--css 部分可以单写一个文件(外联css),然后引入,也可以直接嵌入到该html文件中(内联css)-->
    <!--一个html文件可以引入多个css文件,多写几行即可-->
    <link rel="stylesheet" type="text/css" href="a1.css" >
    <link rel="stylesheet" type="text/css" href="a2.css" >
    </head>
    <body>
    <!--<span> 属性用来组合行内元素(中间部分可看做一个整体),以便通过样式来格式化它们-->
    <b>1、使用css统一网页不同元素风格,类选择器</b><br><br><br>
    <span class="style1" style ="font-family:华文新魏">样式一</span>
    <br/><br/>
    <span class="style1">样式二</span>
    <br/><br/>
    <span class="style1">样式三</span>
    <br/><br/>
    <span class="style2">样式四</span>
    <br/><br/>
    <span class="style2">样式五</span>
    <br/><br/>
    <span class="style2">样式六</span>
    <br/><br/>
    
    
    <b>2、id选择器</b><br><br><br>
    
    <span id="id1">样式七</span>
    <br/><br/>
    <span id="id1">样式八</span>
    <br/><br/>
    <span id="id1">样式九:不打算把课程包括数据初步设计课程不健康报报价</span>
    <br/><br/>
    
    <b>3、html选择器控制超链接</b><br><br><br>
    
    <a href="http://www.baidu.com" >百度</a><br>
    <a href="http://www.sohu.com" target="_blank">搜狐</a><br>
    <a href="http://www.taobao.com" target="_blank">淘宝</a><br><br><br>
    
    <b>4、对同一种html元素,分类显示问题</b><br><br><br>
    
    <b class="cls1">11223344556677889900</b>
    <br><br>
    <b class="cls2">qqwweerrttyyuuiioopp</b>
    <br><br>
    
    <b>5、通配符选择器</b><br><br><br>
    <!--如果希望所有的元素都符合某一样式,可以使用通配符选择器,但它的优先级是最低的。-->
    <!--见.css文件,以网页边距属性margin为例-->
    
    
    <b>6、父子选择器</b><br><br><br>
    
    <span id="id1"><span>标<span>题</span>:</span>不打算把课程<font>包括数</font>据初步设计课程不健康报报价</span>
    <br/><br/>
    
    <b>7、一个元素被多种选择器修饰</b><br><br><br>
    <span class="style1" id="id2">样式1一</span>
    <br/><br/>
    <span class="style1">样式1二</span>
    <br/><br/>
    <span class="style1">样式1三</span>
    <br/><br/>
    
    
    <b>8、一个元素被多个class选择器修饰</b><br><br><br>
    <span class="style1 style3">样式1一</span>
    <br/><br/>
    <span class="style1">样式1二</span>
    <br/><br/>
    <span class="style1">样式1三</span>
    <br/><br/>
    
    <b>9、合并css文件选择器</b><br><br><br>
    <!--在css文件中,如果有多个class、id选择器,他们有相同的部分,我们可以把相同的css样式放在一起;
    把各个类选择器的公共部分,单独抽取写为一份,这样可以减少css的冗余-->
    
    <span class="ad_1">恩格斯v输入个人</span>
    <br/><br/>
    <span class="ad_2">v都是v二嘎v是v上造成至</span>
    <br/><br/>
    <span class="ad_3">说v发多少v分DVD大幅度v别的服不</span>
    <br/><br/>
    
    <b>2、滤镜技术,不好用,没能明白</b><br><br><br>
    <div>
    
    <img src="b1.jpg" >
    <img src="b2.jpg" >
    <img src="b3.jpg" >
    <img src="b4.jpg">
    <img src="b5.jpg">
    <img src="b6.jpg">
    <img src="b7.jpg">
    <img src="b8.jpg">
    
    </div>
    
    </body>
    
    </html>

     a1.css

    /*.style1  叫做  类选择器*/
    .style1 {
    	color:green;
    	font-size:30px;
    }
    .style2 {
    	color:red;
    	font-size:40px;
    }
    
    /*id选择器的使用*/
    #id1{
    	color:yellow;
    	font-size:50px;
    }
    
    
    /*html选择器,使网页字体默认显示为橙色 */
    body{
    	color:orange;
    }
    
    img{
    width:300px;
    filter :gray;
    }
    /*html选择器控制超链接*/
    a:link{   /*伪类link设置 a 对象在未被访问前的样式。*/
    	color:red;
    	text-decoration : none;/*去掉文字装饰效果,这里指下划线*/
    	font-size:24px;
    	
    }
    a:hover{    /*伪类hover设置对象在其鼠标悬停时的样式*/
    	color:blue;
    	text-decoration :underline;/*添加下划线*/
    	font-size:35px;
    }
    
    a:visited {  /*伪类visited设置 a 对象在其链接地址已被访问过时的样式*/
    	color:#c0ff00;
    	font-size:50px;
    	
    }
    
    a:active {  /*伪类active设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。*/
    	color:#40ff00;
    	font-size:50px;
    	
    }
    
    /*同一种元素的分类显示*/
    b.cls1{
    	color:#c0ff00;
    	font-size:50px;
    }
    
    
    b.cls2{
    	color:#40ff00;
    	font-size:53px;
    }
    
    
    /*通配符选择器*/
    
    *{
    	/*margin-top:0px;  /* 消除外部上边距*/
    	/*margin-right:0px;
    	margin-bottom:0px;
    	margin-left:0px;*/
    	/*margin:0px;*/
    	/*margin: 10px 20px;*/
    	/*margin: 10px 20px 30px;*/
    	margin: 10px 20px 30px 40px;
    	/*margin取值含义:如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边(以顺时针顺序)。
    	如果只提供一个,将用于全部的四边。
    	如果提供两个,第一个用于上-下,第二个用于左-右。
    	如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
        */
    	
    }
    
    *{
    	/*padding-top:0px;  /* 消除元素内部上边距*/
    	/*padding-right:0px;
    	padding-bottom:0px;
    	padding-left:0px;*/
    	/*padding:0px;*/
    	/*padding: 10px 20px;*/
    	/*padding: 10px 20px 30px;*/
    	padding: 10px 20px 30px 40px;
    	/*padding取值含义:如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边(以顺时针顺序)。
    	如果只提供一个,将用于全部的四边。
    	如果提供两个,第一个用于上-下,第二个用于左-右。
    	如果提供三个,第一个用于上,第二个用于左-右,第三个用于下。
        */
    	
    }
    
    
    /*父子选择器(包含选择器)*/
    
    
    #id1  span {
    	color:red;
    	font-size:60px;
    	font-style : italic ;
    }
    
    #id1  span  span {     /*一定要注意层次关系*/
    	color:green;
    
    }
    
    
    #id1  font{
    
    	font-size:100px;
    
    }
    
    #id2 {
    	font-weight : bold;
    	font-style : italic ;
    }
    
    /*一个元素被多个class选择器修饰*/
    .style3 {
    	font-weight : bold;
    	text-decoration :line-through;
    	background : red;
    }
    
    
    
    /*合并css文件选择器*/
    /*在css文件中,如果有多个class、id选择器,他们有相同的部分,我们可以把相同的css样式放在一起;
    把各个类选择器的公共部分,单独抽取写为一份,这样可以减少css的冗余*/
    
    /*我们可以把某个css文件中的选择器公有的部分,独立出来写一份;
    例如以下三个选择器:
    */
    /*广告一*/
    .ad_1{
    	width:20px;
    	height:30px;
    	background:red;
    	float:left;
    	margin:3px;	
    }
    /*广告二*/
    .ad_2{
    	width:30px;
    	height:40px;
    	background:red;
    	float:left;
    	margin:3px;	
    }
    /*广告三*/
    .ad_3{
    	width:40px;
    	height:50px;
    	background:red;
    	float:left;
    	margin:3px;	
    }
    
    /*由以上三个选择器可进行以下改写:*/
    
    /*广告一*/
    .ad_1{
    	width:200px;
    	height:30px;	
    }
    /*广告二*/
    .ad_2{
    	width:300px;
    	height:40px;
    }
    /*广告三*/
    .ad_3{
    	width:400px;
    	height:50px;
    }
    /*将以上三个选择器的重合部分写入以下选择器*/
    .ad_1,.ad_2,.ad_3{  /*注意用逗号隔开,否则就成了父子选择器了*/
    	background:red;
    	float:left;
    	margin:3px;	
    }
    
    /*注意,经过以上改造的选择器还和原来一样使用,新生成的选择器  不需要出现在html文件中,会自动识别重合属性*/
    

    展开全文
  • HTML选择器讲解

    2018-08-17 21:04:35
    HTML中常见选择器有: 行内选择器、标签选择器、id选择器、类选择器(class) 优先级: id选择器&amp;gt;标签选择器 行内样式&amp;gt;id选择器选择器&amp;gt;标签选择器 id选择器&amp;gt;类...
  • <!DOCTYPE html> <!-- HTML是标记语言,把属性这些写在里面并不规范,有可能无法显示 CSS为了规范每个标记的样式,属性等设置控制... CSS语法,由选择器,属性,和值三部分组成,简单明了,在头部的<style ...
  • HTML选择器文字段落

    2018-05-15 23:11:46
    关系选择器/* 群组选择器 :可以让所有选择器,以逗号分割/*后代选择器 :任何选择器都是可以使用,后代是指所有子标签,包括子代的子代直到结束/*子代选择器: 只能找到它唯一的子代关系/*相邻选择器: 兄+弟 设置弟弟...
  • 陈力:传智播客古代 珍宝币 泡泡龙游戏开发第八讲:DIV+CSS中类选择器、id选择器和html选择器介绍  陈力:传智播客古代 珍宝币 泡泡龙游戏开发第七讲:DIV+CSS入门。在贵阳网站建设中,经常需要进行网站建设的...
  • 表示选择列表中的第一个标签。p:first-child{} 表示选择列表中的最后一个标签。p:last-child{} 表示选择列表中的第3个标签。p:nth-child(3){} 表示选择列表中的奇数标签。p:nth-child(2n-1){} 表示选择列表中的偶数...
  • css之html选择器---shinepans

    千次阅读 2014-12-08 21:00:21
    .s1{ /*类选择器*/ color:pink; font-size:30px; /*font-weight 粗体等 font-style normal italic:斜体 oblique倾斜的字体*/ text-decoration:line-through; } .s2{ color:red; font-size:25px; font-style:it
  • 1、html <div class="col-md-5"> <h4 class="m-t-md" id="dwzh"><strong>单位帐号</strong></h4> <p class="text-info">qqqqqqqqqqq1231</p></div>...
  • 2.当只有:root选择器或者html选择器时,document.documentElement.style.getPropertyValue获取到的值为空 结论 1.document.documentElement.style只能获取内联属性的值 (根据参考链接2,style确实只能获取内联...
  • 文西马龙:http://blog.csdn.net/wenximalong/ div+css细节 1.初始CSS 2.块元素和行内元素 3.CSS核心内容 3.1标准流 3.2盒子模型 3.3浮动 3.4定位 ...2.掌握CSS的四种选择器用法 CSS使
  • HTML5选择器学习

    2019-01-03 14:56:11
    HTML选择器 1、标签选择器  直接将HTML元素中的标签作为选择器,可以是html、h1、a、strong等HTML标签,在CSS中直接展现。 html {color:black;} h1 {color:blue;} h2 {color:silver;} 2、ID选择器  通常在编写...
  • 复合选择器是通过基本选择器进行组合后构成的,常用的复合选择器有:交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。 1. 交集选择器 交集选择器由两个选择器直接构成,其中...
  • HTML常用选择器

    千次阅读 2018-11-17 20:17:40
    HTML中常见选择器有: 元素选择器、id选择器、类选择器(class)、选择器分组(并集选择器)、通配选择器、复合选择器(交集选择器)。 元素选择器 作用:通过元素选择器可以选择页面中的所有指定元素。 语法...
  • HTML5选择器

    千次阅读 2018-07-14 14:49:09
    这两天学习的有HTML5的选择器,总结一下:一、首先是基本选择器,有通配符选择器,标签(元素)选择器,类选择器,ID选择器,群组选择器。目前我就学这么多,我比较喜欢用类选择器也是class选择器。通配符选择器:*{...
  • HTML各类选择器

    万次阅读 2018-06-11 21:27:54
    基本选择器:1.通配选择器(*)2.元素选择器(eg:p)3.类选择器(.class)4.ID选择器(#..)高级选择器:1.后代选择器(E(空格)F)2.子代选择器(E&gt;F)3.兄弟选择器(E+F)4.通用选择器(E~F)结构伪类选择...
  • Html5提供了三种常用了标签选择器,分别为标签选择器,id选择器和类选择器 一.标签选择器 语法: 标签名{ css样式1; css样式2;  ...... } 举例说明,使用标签选择器建立分别建立一个div标签和一个p标签,代码...
  • HTML5中CSS3的相邻选择器、兄弟选择器以及not选择器
  • html 后代选择器和子元素选择器

    千次阅读 2017-08-30 10:21:44
    后代选择器和子元素选择器    1.后代选择器和子元素选择器之间的区别?  1.1  后代选择器使用空格作为连接符号  子元素选择器使用>作为连接符号  1.2  后代选择器会选中指定标签中,所有的特定后代...
  • HTML选择器 1. 标签选择器 一个HTML文件由很多不同的标签组成,利用标签选择器可以统一设置使用某类标签定义的元素的外观。 例如: text-align:center; font-size:42px; color:#FF6600; 2.类选择器(class) ...
  • 一、并集选择器 1.作用:给所有的选择器选中的标签设置属性。 2.格式: 选择器1,选择器2{ 属性:值; } 3.例如: .abc1,#abc2{ color:red; } .......省略代码....... <p class="abc1">并集1<...
  • QSS 的选择器

    千次阅读 多人点赞 2016-03-30 09:20:30
    本文连接地址:http://www.qtdebug.com/QSS-Selector.html ...通用选择器 *类型选择器选择器ID 选择器属性选择器包含选择器子元素选择器伪类选择器Subcontrol 选择器 很多时候,可以使用不同的选择器
  • html学习选择器

    2015-02-27 17:59:51
    一.类选择器 用法:.类选择器名称{  属性名:属性值; } 二.id选择器 用法:#id选择器的名称{ ...注意:在html文件中要引用id选择器  内容  任意内容 三.html选择器 用法:html中的元素{  属性名:属性值
  • html选择日期选择器

    万次阅读 2018-02-05 13:32:08
    1. input class="form-control date-picker" type="text" name="year1"  ...placeholder="选择年" data-date-format="yyyy"> script type="text/javascript"> $(document).ready(function () { $('[name=y

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 36,433
精华内容 14,573
关键字:

html选择器