精华内容
下载资源
问答
  • CSS常用五类选择器
    千次阅读
    2020-12-22 09:52:11

    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。

    ㈠什么是选择器?

    每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。

    “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。

    ㈡CSS的五大选择器

    ⑴标签选择器(元素选择器)

    ⑵ID选择器(唯一性,一次引用)

    ⑶类选择器(单类选择器,多类选择器)

    ⑷属性选择器(简单属性选择,具体属性选择,部分属性选择, 特定属性选择)

    ⑸派生选择器(后代选择器(descendant selector),子元素选择器(child selector),相邻兄弟选择器(Adjacent sibling selector)

    ㈢元素选择器(标签选择器)

    一个完整的HTML页面是由很多不同的标签组成。标签选择器:指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。

    如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。

    例如:

    html {background-color: black;}
    p {font-size: 30px; backgroud-color: gray;}
    h2 {background-color: red;}
    

    以上css代码会对整个文档添加黑色背景;将所有p元素字体大小设置为30像素同时添加灰色背景;对文档中所有h2元素添加红色背景。

    ㈣ID 选择器

    ⑴ID 选择器允许以一种独立于文档元素的方式来指定样式。

    ⑵ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次。

    ⑶id 选择器以 “#” 来定义。

    例如:在css中,下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为黄色:

    #red{color:red;}
    #yellow{color:yellow;}

    下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。

    <p id="red">这个段落是红色。</p>

    <p id="yellow">这个段落是黄色。</p>

    ㈤类选择器

    类选择器使用类名来选择元素,前提是要在HTML中,给元素定义一个class的属性,class="类名",然后使用"."进行标识,后面紧跟类名。**

    (1)单类选择器

    类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。

    ①修改 HTML 代码

    在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。

    请看下面的 HTML 代码:

    <h1 class="important">
    
    This heading is very important
    
    </h1>
    
    <p class="impportant">
    
    This paragraph is very important.
    
    </p>
    

    在上面的代码中,两个元素的 class 都指定为 important:第一个标题( h1 元素),第二个段落(p 元素)。

    ②语法

    我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.),然后结合通配选择器:

    .important {color:red;}

    如果只想选择所有类名相同的元素,可以在类选择器中忽略通配选择器,这没有任何不好的影响:

    .important {color:red;}

    ③结合元素选择器

    类选择器可以结合元素选择器来使用。

    ♧例如,只让段落显示为红色文本:

    p.important {color:red;}

    选择器现在会匹配 class 属性包含 important 的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性。

    选择器 p.important 解释为:“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落,这个规则的选择器与之不匹配,因此 h1 元素不会变成红色文本。

    ♧例如:为 h1 元素指定不同的样式,可以使用选择器

    h1.important:
    
    p.important {color:red;}
    
    h1.important {color:blue;}
    

    ⑵多类选择器

    在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。
    例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作:

    <p class="important warning">
    This paragraph is very important warning.
    </p>
    

    注:这两个词的顺序无关紧要,写成 warning important 也可以。

    假设 class 为 important 的所有元素都是粗体,而 class 为 warning 的所有元素为斜体,class 中同时包含 important 和 warning 的所有元素还有一个银色的背景 。

    就可以写作:

    .important {font-weight:bold;}
    
    .warning{font-style:italic;}
    
    .important .warning{background:silver;}
    
    

    通过把两个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。

    如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。

    ㈥属性选择器

    属性选择器可以根据元素的属性及属性值来选择元素。

    ⑴简单属性选择

    如果希望选择有某个属性的元素,而不论属性值是什么,可以使用简单属性选择器。

    例子 1:把包含标题(title)的所有元素变为红色,可以写作:

    [title] {color:red;}

    例子 2:只对有 href 属性的锚(a 元素)应用样式:

    a[herf] {color:red;}

    例子 3:根据多个属性进行选择,只需将属性选择器链接在一起即可。

    为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:

    a[herf] [title] {color:red;}

    例子 4:对所有带有 alt 属性的图像应用样式,从而突出显示这些有效的图像:

    img[alt] {border:5px solid red;}

    ⑵根据具体属性值选择

    例子 1:将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写:

    a [href="http://www.baidu.com"] {color:red;}

    例子 2:把多个属性-值选择器链接在一起来选择一个文档。

    a [href="http://www.baidu.com"] [title="baidu"] {color:red;}

    这会把第一个超链接的文本变为红色,但是第二个或第三个链接不受影响:

    注意:这种格式要求必须与属性值完全匹配。

    如果属性值包含用空格分隔的值列表,匹配就可能出问题。

    ⑶根据部分属性值选择

    如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。

    选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点:

    p[class~="important"] {color:yellow;}

    注意:如果忽略了波浪号,则说明需要完成完全值匹配。

    ⑷特定属性选择类型

    举例:[lang |="en"] {color:red;}

    上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此,以下示例标记中的前三个元素将被选中,而不会选择后两个元素:

    ㈦后代选择器

    ⑴后代选择器(descendant selector)又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

    ⑵在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。

    ⑶每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”,但是要求必须从右向左读选择器。

    举例:只对 h1 元素中的 em 元素应用样式,可以这样写:

    h1 em {colopr:red;}

    ⑴上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em 文本(如段落或块引用中的 em)则不会被这个规则选中.

    ⑵h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器,可以换成以下说法:“包含 em 的所有 h1 会把以下样式应用到该 em”。

    具体应用:

    可以使 HTML 中不可能实现的任务成为可能。假设有一个文档,其中有一个边栏,还有一个主区。边栏的背景为蓝色,主区的背景为白色,这两个区都包含链接列表。不能把所有链接都设置为蓝色,因为这样一来边栏中的蓝色链接都无法看到。解决方法是使用后代选择器。在这种情况下,可以为包含边栏的 div 指定值为 sidebar 的 class 属性,并把主区的 class 属性值设置为 maincontent。

    编写以下样式:

    div.sidebar {background:blue;}
    
    div.maincontent {background:white;]
    
    div.sidebar a:link {color:white;}
    
    div.maincontent a:link {color:blue;}
    

    ㈧子元素选择器

    ⑴子元素选择器(Child selectors)只能选择作为某元素子元素的元素。

    ⑵不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。

    ⑶子选择器使用了大于号(子结合符)。子结合符两边可以有空白符,这是可选的。

    例如:选择只作为 h1 元素子元素的 strong 元素,可以这样编写:

    h1 > strong {color:red;}

    如果从右向左读,选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

    这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:

    ㈨相邻兄弟选择器

    ⑴相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

    ⑵相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。与子结合符一样,相邻兄弟结合符旁边可以有空白符。

    例如:如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

    h1 + p {margin-top:50px;}

    这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

    具体解释:请看下面这个文档树片段:

    在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。

    不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。

    简单来说:ul与ol是相邻兄弟,而ul里面的列表项与ol里面的列表项不是相邻兄弟。

    我目前是在职前端开发,如果你现在也想学习前端开发技术,在入门学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题,你都可以申请加入我所在的前端学习交流裙:421374697。里面聚集了一些正在自学前端的初学者,转行者,初阶者,我这里也有我做前端技术这段时间整理的一些前端学习思维导图,前端大厂面试题,前端开发源码教程,PDF文档书籍教程,需要的话都可以找裙猪获取。

    注意:用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:

    li + li {font-weight:bold;}

    上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。

    更多相关内容
  • 网页元素,都可以按类型进行区分,其类型可以作为CSS的选择符,如“<a></a>”、“<ul></ul>”、“<div></div>”等,对应的选择器分别为“a”、“ul”、“div”。例子: CSS Code复制内容到剪贴板 a{ text-...
  • CSS3 :default 伪类选择器只能作用表单元素上,表示默认状态的表单元素。接下来通过本文给大家介绍CSS3 :default伪类选择器使用简介,感兴趣的朋友跟随脚本之家小编一起看看吧
  • 一:什么是 CSS 的 class 选择器。 二:什么是 CSS 的多类名选择器

    这是【CSS 教程系列第 7 篇】,如果觉得有用的话,欢迎关注专栏。

    CSS 的选择器有很多,常用的有 元素选择器id 选择器class 选择器后代选择器子代选择器并集选择器交集选择器伪类选择器通配符选择器 等。

    本篇博客说的是 class 选择器,详细内容如下

    一:类名选择器

    class 选择器,也叫类选择器。与 id 选择器不同的是,你可以在一个页面设置多个相同的 class ,就好比身份证号没有相同的,但却可以同名同姓。

    我们可以对"相同的元素" 或者 “不同的元素” 定义相同的 class 属性,然后对拥有相同 class 属性的元素进行 CSS 样式操作。

    1:语法

    对于 class 选择器,我们必须在 class 名前面加上前缀符号 . ,后面紧跟 class 名,表示这是一个 class 选择器,不加 . 前缀该选择器就是无效的。基本语法格式如下图所示
    在这里插入图片描述
    再在需要指定样式的元素加上 class 属性,属性值是你指定的 class 名。

    2:举例说明

    如下代码所示

    	<div>雄心志四海,万里望风尘</div>
    	<div>雄心志四海,万里望风尘</div>
    	<div>雄心志四海,万里望风尘</div>
    

    浏览器运行效果如下所示
    在这里插入图片描述
    我希望前两个 div 元素和 p 元素的文本颜色为红色,字体大小为 18 像素,这时就可以使用 class 选择器,HTML 代码如下

    	<div class="myClass">雄心志四海,万里望风尘</div>
    	<div class="myClass">雄心志四海,万里望风尘</div>
    	<p class="myClass">雄心志四海,万里望风尘</p>
    	<div>雄心志四海,万里望风尘</div>
    

    CSS 代码如下

    	.myClass {color: red;font-size: 18px;}
    

    浏览器运行效果如下所示
    在这里插入图片描述
    .myClass {color: red;font-size: 18px;} 这行代码的意思是选中 class 为 myClass 的元素,然后设置该元素的文本颜色为红色,字体大小为 18 像素。

    3:注意事项

    1:什么时候使用 class 选择器

    如果你要为两个或多个元素定义相同的样式,元素可以是相同的,也可以是不同的,建议使用 class 选择器,这样可以减少代码的冗余度。

    2:class 名的命名规范

    • 先字母,后数字的命名是允许的,如 a1
    • 先数字,后字母的命名是不允许的,如 1a

    如果你自己测试过,你会发现,你可以在 HTML 中定义 class = “1a” ,这是不会报错的,但当你在 CSS 中去引用这个类名时,就会出错,提示你 unexpected token ,翻译过来就是 “意外的标记”。

    除了这个外

    • 不建议使用下划线 _ 来命名 CSS 选择器,以便区分 JavaScript 中的变量命名。
    • 不要以纯数字、中文命名,尽量使用英文字母来表示。

    二:多类名选择器

    多类名选择器也属于类名选择器,只不过可以一次引用多个类选择器,使用上也很简单,只需要在之前的类名后再按一下空格,然后直接写上类名即可。

    1:举例说明

    比如现在分别有 classOne 和 classTwo 的类名,classOne 负责修改元素的文本颜色和字体大小,classTwo 负责字体加粗显示,CSS 代码如下所示

    	.classOne{color: blue;font-size: 18px;}
    	.classTwo{font-weight: bold}
    

    HTML 代码如下

    	<div class="classOne classTwo">雄心志四海,万里望风尘</div>
    

    浏览器运行效果如下所示
    在这里插入图片描述
    也许你会问,那为什么不写成下面这种写法呢

    	<div class="classOne" class="classTwo">雄心志四海,万里望风尘</div>
    

    首先需要说明一下,这种写法是错误的,因为一个标签里面只能写一个 class,需要记住这一点。

    你的问题得到解决了吗?欢迎在评论区留言。

    赠人玫瑰,手有余香,如果觉得文章不错,希望可以给个一键三连,感谢。


    结束语

    技术是一点一点积累的,大神也不是一天就可以达到的。原地不动就是退步,所以每天进步一点点。

    最后,附上一句格言:"好学若饥,谦卑若愚",望共勉。
    展开全文
  • css样式,后代选择器

    千次阅读 2021-06-11 11:17:01
    css语法(下图所示)每个CSS样式由两个组成部分:选择器(标签名)和声明(包括属性和属性值),每个声明之后用分号结束。css注释写法/*这是注释*/css的引入方式行内样式(是标记的style属性设定CSS样式。)Hello wor...

    css介绍

    CSS(层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观。

    当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。

    css语法(下图所示)

    每个CSS样式由两个组成部分:选择器(标签名)和声明(包括属性和属性值),每个声明之后用分号结束。

    css注释写法

    /*这是注释*/

    4ea8438852054921cff1789aca005f27.png

    css的引入方式

    行内样式(是在标记的style属性中设定CSS样式。)

    Hello world.

    内部样式Title

    background-color: #2b99ff;

    }

    外接样式(将css写在一个单独的文件中,然后在页面进行引入即可) 常用1. #现在写的这个.css文件是和你的html是一个目录下;如果不是一个目录,href里面要写上这个.css文件的路径

    2.

    @import url('./index.css');

    CSS选择器(找到对应的标签)

    基本选择器:

    1.标签选择器

    2.id选择器

    3.类选择器

    1.标签选择器(可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个)

    body{

    color:gray;

    font-size: 12px;

    }2.id选择器(#选中id)#同一个页面中id不能重复。

    任何的标签都可以设置id

    id命名规范 要以字母 可以有数字 下划线-大小写严格区分 aa和AA是两个不一样的属性值#box{

    background:green;

    }3.类选择器

    所谓类:就是class . class与id非常相似 任何的标签都可以加类,但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类,用空格隔开

    类的使用,要有”公共类“的概念。

    .big{

    font-size: 40px;

    }

    段落1

    段落2

    段落3

    高级选择器

    1.后代选择器

    2.通用选择器

    3.子代选择器

    4.并集选择器

    5.交集选择器

    1.后代选择器

    使用空格表示后代选择器.(父元素的后代(包括儿子,孙子,重孙子))

    541466f434bc29daf24feef72b3e5231.png

    2.通用选择器(*是全部)

    8b63a978ea5122d705cb0d5db8be9704.png

    3.子代选择器

    使用>表示子代选择器.比如div>p ,仅仅表示的式当前div元素选中的子代(不包含孙子...)元素p

    .container>p{

    color: yellowgreen;

    }

    4.并集选择器(boby或h1或p)margin是外边距

    多个选择器之间使用逗号隔开.便是选中的页面中的多个标签.一些共性的元素,可以使用并集选择器

    0987b4fb4d4cca34b13480bc52777274.png

    5.交集选择器(类选择器和id选择器.#这个就是针对p标签过多,做进一步区分)

    使用 .表示交集选择器.第一个标签必须式标签选择器,第二个标签必须式类选择器  语法:div.active  (比如有一个

    这样的标签)

    7942d1d3a559504f319d7d99c08b1ec0.png

    6.属性选择器

    就是根据标签中的属性,选中当前的标签.

    根据属性查找

    [for]{

    color: red;

    }

    找到for属性的等于username的元素 字体颜色设为红色

    [for='username']{

    color: yellow;

    }

    以....开头^[for^='user']{

    color:#008000;

    }

    以....结尾 $

    [for$='vvip']{

    color: red;

    }

    包含某元素的标签

    [for*="vip"]{

    color:#00BFFF;

    }

    指定单词的属性

    label[for~='user1']{

    color: red;

    }

    input[type='text']{

    background: red;

    }

    c64d90794e8231af702b1457257e7189.png

    总结

    1.字类选择器(1,2,3经常使用)

    用> #大于号

    选择的是前一级标签的子标签2.后代选择器

    用#空格

    选择的是前一级标签的后代标签3.并集选择器

    用,#逗号

    选则所有符合条件的标签4.交集选择器

    开头是标签名 后边跟id或类选择器#注意不要加空格,加空格就成后代选择器了

    5.通用选择器(要清除网页自带的外边距时使用)*选择所有的标签6.属性选择器1.[属性名] 带这个属性名的标签2.[属性名="要匹配的属性值"] 带这个属性和属性值的标签3.[属性名^="属性值的开头"]4.[属性名$=属性值结尾的字符串5.[属性名*=属性值包含的字符

    7.字类选择器

    伪类选择器

    伪类选择器一般用在超链接a标签中

    遵循 LoVe HAte 爱恨准则

    四种状态:

    未被访问的 link

    访问过的 visited

    鼠标悬停的 hover

    鼠标按下时 active

    选择第一个孩子:

    :first-child

    选择最后一个:

    last-child

    选择指定的孩子:

    nth-child(n)

    p:first-letter :选择第一个字符

    p:before 在标签前添加一个标签内容

    p:after 在标签后添加有一个标签内容

    根据标签的不同状态再进行进一步的区分,比如一个a标签,点击前,点击时,点击后有不同的三个状态。未访问的链接 颜色 .box ul li.item1 a:link {

    color:#FF0000

    }访问后的链接 颜色a:visited {

    color:#00FF00

    }鼠标移动到链接上a:hover {

    color:#FF00FF

    }选定的链接 (就是鼠标点下去还没有抬起来的那个瞬间,可以让它变颜色)

    a:active {

    color:#0000FF

    }input输入框获取焦点时样式input:focus {#input默认的有个样式,鼠标点进去的时候,input框会变浅蓝色的那么个感觉

    #outline: none;

    background-color: #eee; #框里面的背景色

    }

    补充:css3的选择器nth-child()

    /*选中第一个元素*/div ul li:first-child{

    font-size: 20px;

    color: red;

    }/*选中最后一个元素*/div ul li:last-child{

    font-size: 20px;

    color: yellow;

    }/*选中当前指定的元素 数值从1开始*/div ul li:nth-child(3){

    font-size: 30px;

    color: purple;

    }/*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/div ul li:nth-child(n){

    font-size: 40px;

    color: red;

    }/*隔几换色 隔行换色

    隔4换色 就是5n+1,隔3换色就是4n+1,(+1 是起始位置从第1个开始;4n 是每4个换色)

    */div ul li:nth-child(5n+1){

    font-size: 50px;

    color: red;

    }

    伪元素选择器

    /*设置第一个首字母的样式*/p:first-letter{

    color: red;

    font-size: 30px;

    }/* 在....之前 添加内容(了解)使用此伪元素选择器一定要结合content属性*/p:before{

    content:'alex';

    }/*在....之后 添加内容,使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/p:after{

    content:'&';

    color: red;

    font-size: 40px;

    }

    CSS标签的继承性和层叠性

    1.继承性:给父级设置一些属性,子级继承父级的该属性

    #有些属性可以继承下来,color,font-,text-,line-*  主要是文本级的标签元素;但有一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承.

    2.层叠性:权重大的标签覆盖掉了权重小的标签(就是被干掉)

    #权重(涉及颜色的显示问题)的计算先是  id的数量  class的数量  标签的数量 ,顺序不能乱

    介绍

    子标签可以继承父标签的样式: color,font-,text-, line-层叠性

    (选择器权重一样的时候)后边添加的样式会覆盖前边的样式

    权重(永不进位.当标签里面明确写了颜色,其权重为1000)

    id 权重100

    类 权重10

    标签 权重1

    !important 权重无限大(都有!important的时候,比较权重)

    权重相同的处理

    第一种现象:当权重相同时,以后来设置的属性为准,前提一定要权重相同

    第二种现象:第一个选择器没有选中内层标签,那么它是通过继承来设置的属性,那么它的权重为0。第二个选择器选中了内层标签,有权重.

    第三种现象:如果都是继承来的属性,谁描述的近,显示谁的属性。'就近原则'

    /*1 0 0 */显示红色#box{

    color: red;

    }/*0 1 0*/.container{

    color: yellow;

    }/*0 0 1*/p{

    color: purple;

    }

    https://www.cnblogs.com/hansha/p/10232480.html

    展开全文
  • css 选择器 1. css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式。 2. css 选择器的种类 标签选择器 类选择器 层级选择器(后代选择器) id选择器选择器类选择器 3. 标签选择器 ...

    css 选择器的定义

            css 选择器是用来选择标签的,选出来以后给标签加样式。

    css 选择器的种类

    1. 标签选择器
    2. 类选择器
    3. 层级选择器(后代选择器)
    4. id选择器
    5. 组选择器
    6. 伪类选择器
    7. 通配符选择器

    标签选择器

    • 概念:

      标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。

    • 语法:

    标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
    • 作用:

      标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签

    • 优点:

      是能快速为页面中同类型的标签统一样式

    • 缺点:

      不能设计差异化样式。

    示例代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style type="text/css">
            p {
                color: red;
            }
        </style>
    </head>
    
    <body>
        <div>hello</div>
        <p>hello</p>
    </body>
    
    </html>

    类选择器

            根据类名来选择标签,以 . 开头, 一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用,是css中应用最多的一种选择器。

            类选择器使用“.”(英文点号)进行标识,后面紧跟类名.

    • 语法:

      • 类名选择器

      .类名  {   
          属性1:属性值1; 
          属性2:属性值2; 
          属性3:属性值3;     
      }
      • 标签

    <p class='类名'></p>
    • 优点:

      • 可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

    • 注意

      • 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)

      • 长名称或词组可以使用中横线来为选择器命名。

      • 不要纯数字、中文等命名, 尽量使用英文字母来表示。

    多类名注意:

    • 各个类名中间用空格隔开。

    • 多类名选择器在后期布局比较复杂的情况下,还是较多使用的。

    示例代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style type="text/css">
            .blue {
                color: blue
            }
    
            .big {
                font-size: 20px
            }
    
            .box {
                width: 100px;
                height: 100px;
                background: gold
            }
        </style>
    </head>
    
    <body>
        <div class="blue">这是一个div</div>
        <h3 class="blue big box">这是一个标题</h3>
        <p class="blue box">这是一个段落</p>
    
    </body>
    
    </html>

     示例代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style type="text/css">
            .blue {
                color: blue;
                font-size: 100px;
            }
    
            .red {
                color: red;
                font-size: 100px;
            }
    
            .orange {
                color: orange;
                font-size: 100px;
            }
    
            .green {
                color: green;
                font-size: 100px;
            }
        </style>
    </head>
    
    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>
    
    </html>

    层级选择器(后代选择器)

            根据层级关系选择后代标签,以选择器1 选择器2开头,主要应用在标签嵌套的结构中,减少命名。

    示例代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style type="text/css">
            div p {
                color: red;
            }
    
            .con {
                width: 300px;
                height: 80px;
                background: green
            }
    
            .con span {
                color: red
            }
    
            .con .pink {
                color: pink
            }
    
            .con .gold {
                color: gold
            }
        </style>
    </head>
    
    <body>
        <div>
            <p>hello</p>
        </div>
    
        <div class="con">
            <span>哈哈</span>
            <a href="#" class="pink">百度</a>
            <a href="#" class="gold">谷歌</a>
        </div>
        <span>你好</span>
        <a href="#" class="pink">新浪</a>
    </body>
    
    </html>

    运行效果:

    注意点:

            这个层级关系不一定是父子关系,也有可能是祖孙关系,只要有后代关系都适用于这个层级选择器

    id选择器

            根据id选择标签,以#开头, 元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。

            id选择器使用#进行标识,后面紧跟id名

    • 其基本语法格式如下:

      • id选择器

        #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
      • 标签

        <p id="id名"></p>
    • 元素的id值是唯一的,只能对应于文档中某一个具体的元素。

    • 用法基本和类选择器相同。

    示例代码

    <style type="text/css">
        #box{color:red} 
    </style>
    
    <p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式,其它元素不允许应用此样式 -->
    <p>这是第二个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名 -->
    <p>这是第三个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名  -->
    

    注意点:

            虽然给其它标签设置id=“box”也可以设置样式,但是不推荐这样做,因为id是唯一的,以后js通过id只能获取一个唯一的标签对象。

    id选择器和类选择器区别

    • W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。

      • 类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜

      • id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次,经常和javascript 搭配使用。

            id选择器和类选择器最大的不同在于 使用次数上。

    组选择器

            根据组合的选择器选择不同的标签,以 , 分割开, 如果有公共的样式设置,可以使用组选择器。

    示例代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style type="text/css">
            .box1,
            .box2,
            .box3 {
                width: 100px;
                height: 100px
            }
    
            .box1 {
                background: red
            }
    
            .box2 {
                background: pink
            }
    
            .box2 {
                background: gold
            }
        </style>
    </head>
    
    <body>
        <div class="box1">这是第一个div</div>
        <div class="box2">这是第二个div</div>
        <div class="box3">这是第三个div</div>
    </body>
    
    </html>

    伪类选择器

            用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

    示例代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style type="text/css">
            .box1 {
                width: 100px;
                height: 100px;
                background: gold;
            }
    
            .box1:hover {
                width: 300px;
            }
        </style>
    </head>
    
    <body>
        <div class="box1">这是第一个div</div>
    </body>
    
    </html>

    通配符选择器

    • 概念

              通配符选择器用*号表示, * 就是 选择所有的标签 他是所有选择器中作用范围最广的,能匹配页面中所有的元素。

    • 其基本语法格式如下:

    * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

    例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。

    * {
      margin: 0;                    /* 定义外边距*/
      padding: 0;                   /* 定义内边距*/
    }
    • 注意:

      会匹配页面所有的元素,降低页面响应速度,不建议随便使用

    示例代码:

    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test</title>
        <style>
            * {
                color: pink;
            }
            .red {
                color: red;
            }
            li {
                color: green;
            }
        </style>
    </head>
     
    <body>
        <div>hello word!</div>
        <div>hello word!</div>
        <p>hello word!</p>
        <span>hello word!</span>
        <div>
            <ul>
                <li class="red">hello word!</li>
                <li>hello word!</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>hello word!</li>
                <li>hello word!</li>
            </ul>
        </div>
    </body>
     
    </html>

    展开全文
  • CSS结构伪类选择器

    万次阅读 多人点赞 2018-01-11 20:08:37
    结构伪类选择器,可以根据元素文档所处的位置,来动态选择元素,从而减少HTML文档对ID或的依赖,有助于保持代码干净整洁。 表 2-6 结构伪类选择器 选择器 功能描述 版本 E:last-child 选择父元素...
  • 让大家可以了解在css中类选择器的作用,css类选择器有哪些分类等知识。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 更多相关视频: 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神...
  • CSS 目标伪类选择器

    千次阅读 2018-02-11 18:16:09
    目标伪类选择器一个URI,除了可以直接指向某文档外,还可以...表 2-8 目标伪类选择器选择器功能描述版本E:target选择该文档特定“id”的元素3假如 index.htm 页面有 3 个&lt;a&gt;元素,id 为catlog、...
  • css类选择器(链接伪类选择器、结构伪类选择器、目标伪类选择器 链接伪类选择器:顾名思义就是用于链接的伪类选择器。a的伪标签有:a:link、a:visited、a:hover、a:active,a:link表示的是未访问的链接,a:...
  • CSS类选择器的嵌套使用

    千次阅读 2019-04-25 21:35:20
    下面的例子,有两个类选择器important和warming <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>class选择器</title> <style type="...
  • CSS——标签选择器类选择器

    千次阅读 2020-06-26 21:04:00
    在CSS中,执行这一任务的样式规则部分被称为选择器(选择符)。 CSS基础选择器 标签选择器(元素选择器) 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面某一标签指定统一的CSS样式。其基本...
  • css 选择器

    千次阅读 2022-01-20 15:13:57
    css 选择器 1.基础选择器 1.1 标签选择器 标签选择器,也称为元素选择器 css代码如下 <style> h3 { color: cornflowerblue; } span { color: crimson; font-weight: 300; } div { color: brown;
  • 一:什么是 CSS 的 id 选择器 ? 二:id 选择器的语法及案例说明。
  • CSS中的伪类选择器,颜色设置,度量单位,文本字体及文本样式设置。
  • ,用于向某些选择器添加特殊的效果。用伪定义的样式并不是作用标记上,而是作用标记的状态上,如a标签的:hover,表单元素的:disabled。 元素,如div、p、h1等,是实实在在存在的元素。 伪元素,是html不...
  • css通配符选择器Introduction: 介绍: We all are aware of various types of selectors that can be used for developing a website or a web page. But do we know all of them? Well, if your answer to that ...
  • 标签、类选择器CSS命名规范

    千次阅读 2019-06-20 23:22:01
    使用HTML标签名称作为选择器,按标签名称分类,为页面某一标签指定统一的CSS样式。 基本语法格式: 标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}或者 元素名{属性1:属性值1;属性2:属性值2;...
  • CSS选择器

    千次阅读 2022-01-28 22:13:42
    CSS选择器一、id和class二、选择器2.1元素选择器2.2 id选择器 一、id和class id和class都是用来选择元素,以便进行CSS操作或者JavaScript操作的。 id属性具有唯一性,也就是说一个页面相同的id只能出现一次。 ...
  • 前端人员写静态页面时,不可避免的会遇到选择器的权重问题,下面做一些有关选择器权重问题的总结 一、选择器优先级先后顺序: id选择器>类选择器>元素选择器 二.、规则: 选择器的权重值表述为4个部分,用0,...
  • CSS选择器优先级

    千次阅读 2022-02-14 11:07:06
    CSS选择器优先级 工作修改css样式时,是不是会经常遇到 写的css样式不生效 改这个地方结果别的地方样式也跟着一起变了 明明是一样的css代码为啥换个地方就不一样了 改了个标签结果把样式改乱了… ​ 几乎所有的...
  • CSS类选择器中的: 和 ::(冒号区别)

    千次阅读 2019-04-22 22:09:33
    平时工作中用到伪类选择器的时候一个冒号和两个冒号貌似都是可以的,所以两者到底有什么区别呢,我们先来看下W3C关于CSS3选择器的规范有一段描述:     A pseudo-element is made of two ...
  • CSS内嵌样式的选择器是通过使用style标签写head里的 选择器一共有9种: 1、标签选择器:是指通过元素的标签名字来选中元素 从而设置样式 语法结构:元素标签名{属性:属性值;属性:属性值} 2、id选择器:通过id选择...
  • CSS选择器的作用是从HTML页面找出特定的某元素,而常用的CSS选择器有如下几,一起来看看吧! 一、通配符选择器 通配符选择器常用 ‘*’ 号表示,它是所有选择器里作用范围最广的,能匹配页面所有的元素。 ...
  • CSS复合选择器 建立基础选择器上,对基本选择器进行组合形成的 可以更准确、更高效的选择目标元素(标签) 包含:后代选择器、子选择器、并集选择器、伪类选择器 一、后代选择器 又称为包含选择器,可以选择父元素...
  • CSS 选择器

    2020-12-13 22:36:19
    CSS”列表示在CSS版本的属性定义(CSS1,CSS2,或对CSS3)。 选择器 示例 示例说明 CSS .class .intro 选择所有class=”intro”的元素 1 #id #firstname 选择所有id=”firstname”的元素 1 * * 选择所有...
  • 后代选择器,用来选择元素或元素组的所有后代元素。
  • CSS选择器之nth

    千次阅读 2021-08-05 02:56:47
    语法:E:nth-child(n){}说明:nth-child() 是CSS3的一个伪类选择器,匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。效果实例:一、数字序号写法 E:nth-child(5){} //数值123456789E表示标签,div, li...
  • 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面某一标签指定统一的CSS样式。其基本语法格式如下: 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 或者 元素名{属性1:属性值1; 属性2...
  • 本章我们给大家讲解一下什么是css选择器css35种常见的基本选择器。... CSS 选择器是一种模式,用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构的DOM元素节点。 二:css35.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 141,306
精华内容 56,522
关键字:

在css中表示类选择器