`
minijack
  • 浏览: 23196 次
  • 性别: Icon_minigender_1
  • 来自: 江苏泰州
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS选择器种类----8中武器

阅读更多
前言:
淘宝二面时,面试官说道:“现在淘宝网前台后台半壁江山!” 而且后台的发展经过这么长时间的发展,淘宝内部的技术体系差不多已趋完善,so,做前太或许就会更加多一点。无论如何,会点前台对以后的职业生涯发展也会有所倍益的。记得当时面试官问了一些前台的知识,都不会,只记得问过关于选择器的,本文就谈谈css的选择器的知识,以纪念我那失去的淘宝供职的机会。
 
简述:
选择器就好比招聘工作职位时的条件一样,是为了从众多的html标签中挑选出我们所需要设置的标签。设置选择器的目的是为了让我们能够对被选择出来的标签使用样式。
 
具体一一详述:
CSS选择器大体上可以分为两类:简单选择器和组合选择器。一一详述;
 
简单选择器:

1.       类型选择器
根据HTML的标签进行选择,写法如下:
选择器名称() 
{ 
           属性:属性值; 
} 
注意:选择器名称一定要是HTML中存在的标签。
2.       属性选择器
根据HTML标签的属性进行选择,写法如下:
选择器名称【属性=属性值】 
{ 
           属性:属性值; 
} 
注意:选择器名称一定要是HTML中存在的标签。
Eg:需要对居中显示的段落应用样式则可以用属性选择器。
3.       ID选择器
是一种比较精准的选择器,是根据标签的ID来决定显示的样式。标签的ID可以程序员自己设计。查找范围小,效率高。写法如下:
#ID名称 
{ 
           属性:属性值; 
} 
注意:大小写敏感
4.       类选择器
通过标签的class属性中设置的值来进行选择。使用灵活性非常大。写法如下:
.类型选择器 
{ 
           属性:属性值; 
} 
Eg:
.changeColor{ 
               Background-color:green; 
} 
<h2 align=”center” class=changeColor>页面的标题</h2> 
 
5.       通配选择器
通配选择比较简单,是管辖权最大的一种选择器:它可以根本就不加选择,将页面的所有一类标签都应用上指定的样式。写法如下:
*标签名称 
{ 
           属性:属性值; 
} 
注意:一般慎用!!!

组合选择器:

1.       后代选择器
后代选择器是指在一个html标签中还包含第二个标签的情况下,选择第二个标签应用样式。写法如下:
父标签  后代标签 
{ 
           属性:属性值; 
} 
2.       子选择器
与后代选择器类似,但只有当一个标签是父标签的直接子代,也就是是父标签的儿子,而不是孙子标签的情况下,样式才会被应用。写法如下:
父标签 > 子标签 
{ 
           属性:属性值; 
} 
3.       兄弟选择器
写法如下:
兄弟标签1+兄弟标签2 
{ 
           属性:属性值; 
} 
 
分享到:
评论

相关推荐

    react-React组件的css选择器

    在React开发中,CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面,因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用,以及如何优化组件的...

    css选择器303-311-Artificial-Intelligence-笔记

    css选择器303_311-Artificial-Intelligence-笔记

    CSS选择器-xmind

    CSS选择器 xmind - 选择器分类(ID选择器,类选择器,标签选择器,通配选择器,属性选择器,伪类选择器)。 - 选择器关系(分组,后代,子元素,相邻兄弟,后续兄弟)。 - CSS特性(优先级,继承,层叠)。

    HTML-CSS-JS学习-01百度登录界面练习.zip

    HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度登录界面练习 HTML-CSS-JS学习--01百度登录界面练习HTML-CSS-JS学习--01百度...

    css 样式生成器---topstyle

    css 样式生成器---topstyle 无需写代码

    CSS经典练习-css-diner-develop.7z

    在这个练习中,你将从最基础的标签选择器开始,如`<p>`、`<div>`等,逐渐接触更复杂的类选择器、ID选择器、属性选择器,以及后代选择器、相邻兄弟选择器等。这些选择器的组合使用能实现更精细的控制,让你对CSS有更...

    CSS and XPath checker-0.23.0

    名称:CSS and XPath checker----------------------------------------版本:0.23.0作者:...描述:用于确认CSS和XPath选择器的辅助工具。此工具有助于检查CSS和XPath选择器。它以高亮显示由选择器指定的元素。

    CSS中背景background-position负值定位

    CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位

    postcss-selector-namespace:使用postcss命名CSS选择器

    postcss-选择器命名空间 安装 $ npm install postcss-selector-namespace 用法 var postcss = require ( 'postcss' ) var selectorNamespace = require ( 'postcss-selector-namespace' ) var output = postcss ( ) ...

    1.css选择器-属性选择器.html

    1.css选择器-属性选择器.html

    python爬虫之css选择器

    #### 三、CSS选择器分类及示例 ##### 1. 基本选择器 - **类选择器**:`.class` 示例:`.intro` 描述:选择所有class属性为"intro"的元素。 - **ID选择器**:`#id` 示例:`#firstname` 描述:选择所有id属性...

    CSS3选择器教辅.pdf

    CSS3选择器是CSS3规范中用于选择HTML文档中元素的方式,它增强了原有CSS选择器的功能,并引入了新的选择器,以便更精确地控制页面元素。以下是一些常见的CSS3选择器及其说明: 1. 类选择器和ID选择器: - 类选择器...

    CSS选择器分类汇总图片和文档

    8. CSS预处理器选择器: - 使用Sass、Less等预处理器,可以创建更复杂的选择器,如嵌套规则,变量,混合等。 9. CSS3新选择器: - **伪类`:not(X)`**:选择不匹配选择器`X`的元素。 - **`:nth-child(n)`和`:nth-...

    HTML---CSS----基础知识及代码----各种小程序网页设计

    在实训和案例学习中,你可以通过编写简单的网页和小程序,逐步掌握HTML的基本标签、CSS的选择器和样式规则。此外,还可以学习如何使用Bootstrap、Flexbox或Grid等工具进行快速布局,以及如何利用JavaScript进行动态...

    html-css-网页模板-团队介绍

    2. CSS选择器:CSS通过选择器来定位HTML元素,如类选择器(`.classname`)、ID选择器(`#idname`)、标签选择器(`element`)和后代选择器(`parent > child`)等,以便应用样式。 3. 布局技术:CSS Flexbox和Grid...

    前端开源库-css-split-webpack-plugin

    **前端开源库-CSS-Split-Webpack-...总的来说,`css-split-webpack-plugin` 是一个实用的前端工具,它帮助开发者在保持代码现代化的同时,兼顾对老旧浏览器的兼容,是Webpack生态中解决CSS兼容性问题的一个好选择。

    CSS选择器.txt

    ### CSS选择器详解 ...通过以上介绍可以看出,CSS选择器功能强大且种类繁多,能够满足开发者对页面元素进行精确选择和样式的各种需求。理解并熟练掌握这些选择器,对于提高网页设计的灵活性和效率至关重要。

    jquery-ui.css、jquery-ui.js下载

    jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序功能(Sortable)以及各种可自定义...

    HTML-CSS-JS 学习.zip

    HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习HTML-CSS-JS 学习 ...

    CSS选择器 CSS 选择器 CSS3

    ### CSS选择器与优先级详解 #### CSS选择器概述 CSS选择器是用于定义样式规则应用于HTML文档中哪些元素的基本工具。随着CSS的发展,从CSS1到CSS3,选择器的功能变得越来越强大,允许开发者更加精确地控制网页的...

Global site tag (gtag.js) - Google Analytics